Dotnav

Create a dot navigation with a horizontal or vertical layout to navigate through slideshows or to scroll to different page sections.

Usage

To create a navigation with dots, just add the .uk-dotnav to an <ul> element and nest <a> elements within the list. This is perfect to create a typical slideshow navigation.

Example

Markup

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

Vertical dotnav

The Dotnav can also be aligned vertically. Just add the .uk-dotnav-vertical class. This is great for page scroll navigation using the Scrollspy.

Markup

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