Dotnav

Create a dot navigation to operate slideshows or to scroll to different page sections.

Usage

To create a navigation with dots, use the following classes. This component is built with Flexbox. So to align a dotnav, you can use utility classes from Tailwind CSS.

Class	Description
`.uk-dotnav`	Add this class to a `<ul>` element to define the Dotnav component. Use `<a>` elements as nav items within the list.
`.uk-active`	Add this class to a list item to apply an active state.

<ul class="uk-dotnav">
  <li class="uk-active"><a href=""></a></li>
  <li><a href=""></a></li>
</ul>

- Item 1
- Item 2
- Item 3
- Item 4
- Item 5

Something's not working? Feel free to report an issue or edit this snippet .

<ul class="uk-dotnav">
  <li class="uk-active"><a>Item 1</a></li>
  <li><a>Item 2</a></li>
  <li><a>Item 3</a></li>
  <li><a>Item 4</a></li>
  <li><a>Item 5</a></li>
</ul>

Something's not working? Feel free to report an issue or edit this snippet .

<ul className="uk-dotnav">
  <li className="uk-active"><a>Item 1</a></li>
  <li><a>Item 2</a></li>
  <li><a>Item 3</a></li>
  <li><a>Item 4</a></li>
  <li><a>Item 5</a></li>
</ul>

Vertical alignment

The dotnav can also be displayed vertically. Just add the .uk-dotnav-vertical modifier.

<ul class="uk-dotnav uk-dotnav-vertical">
  ...
</ul>

- Item 1
- Item 2
- Item 3
- Item 4
- Item 5

Something's not working? Feel free to report an issue or edit this snippet .

<ul class="uk-dotnav uk-dotnav-vertical">
  <li class="uk-active"><a>Item 1</a></li>
  <li><a>Item 2</a></li>
  <li><a>Item 3</a></li>
  <li><a>Item 4</a></li>
  <li><a>Item 5</a></li>
</ul>

Something's not working? Feel free to report an issue or edit this snippet .

<ul className="uk-dotnav uk-dotnav-vertical">
  <li className="uk-active"><a>Item 1</a></li>
  <li><a>Item 2</a></li>
  <li><a>Item 3</a></li>
  <li><a>Item 4</a></li>
  <li><a>Item 5</a></li>
</ul>

On This Page
Usage
Vertical alignment