Точечная навигация

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

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

Чтобы создать навигацию с точками, добавьте класс .uk-dotnav к элементу <ul> и вложите в список элементы <a>. Это идеально подходит для создания современной навигации по слайд-шоу. Компонент «Dotnav» построен с помощью Flexbox. Чтобы выровнять точку, можно использовать потрясающий компонент 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) также можно выровнять по вертикали. Добавьте класс .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>

Добавляем компонент «Dotnav» к проекту

<link rel="stylesheet" href="/../css/components/dotnav.min.css">