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 class to an <ul> element and nest <a> elements within the list. This is perfect to create a typical slideshow navigation. This component is built with Flexbox. So to align a dotnav, you can use Flex component.

Example

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6

Markup

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

Dotnav and images

For better visibility on images, for example when using the Dotnav as a slideshow navigation, just add the .uk-dotnav-contrast class.

Example

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6

NOTE In this example we also applied the .uk-flex-center class from the Flex component to center the dotnav.

Markup

<ul class="uk-dotnav uk-dotnav-contrast uk-flex-center">
    <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-flex-column class. This is great for page scroll navigation using the Scrollspy component.

Example

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6

Markup

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