# 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>