Dotnav

Создать точку навигации с горизонтальным или вертикальным разметка для навигации по слайд-шоу или, чтобы прокрутить различные разделы страницы.

Использование

Для создания навигации с точками, просто добавьте .uk-dotnav класс к <ul> элемент и гнездо <a> элементов в списке. Это идеальный вариант, чтобы создать типичное слайд-шоу навигации. Этот компонент построен на основе адаптируемых блоков. Поэтому чтобы выровнять dotnav, вы можете использовать Компонента Flex.

Пример

Разметки

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

Dotnav и изображений

Для лучшей видимости на изображения, например при использовании Dotnav в виде слайд-шоу навигации, просто добавьте .uk-dotnav-contrast класс.

Пример

Примечание В этом примере мы также применили .uk-flex-center класс Компонента Flex чтобы центрировать dotnav.

Разметки

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

Вертикальный dotnav

В Dotnav может также быть выровнены по вертикали. Просто добавить .uk-flex-column класс. Это очень удобно для прокрутки страницы навигации с помощью Scrollspy компонент.

Пример

Разметки

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