Примечание
По умолчанию навигация не имеет стиля. Вот почему важно добавить класс-модификатор.
В данном примере используется класс .uk-nav-default.
подробнее
Добавьте класс .uk-parent к элементу, чтобы превратить его в родителя. Добавьте класс .uk-nav-sub к элементу <ul> внутри элемента, чтобы создать субнавигацию.
По умолчанию дочерние пункты меню всегда видны. Чтобы применить эффект аккордеона
добавьте к основному <ul> атрибут uk-nav.
Для применения значков (иконок, указателей), обозначающих родительские элементы, добавьте класс .uk-nav-parent-icon.
Примечание Атрибут uk-nav автоматически устанавливает класс .uk-nav,
поэтому вам не нужно прописывать его вручную.
При нажатии по родительскому элементу открытый пункт закрывается, позволяя одновременно открывать только один открытый вложенный список. Чтобы изменить такое поведение и разрешить открывать несколько подпунктов сразу, просто добавьте к атрибуту опцию multiple: true.
Добавьте один из следующих классов в элемент списка, чтобы создать заголовок или какое-либо название. Также можно добавить разделитель между элементами навигации.
Класс
Описание
.uk-nav-header
Добавьте этот класс к элементу <li>, чтобы создать заголовок.
.uk-nav-subtitle
При использовании подзаголовка добавьте этот класс.
.uk-nav-divider
Добавьте этот класс к элементу <li>, чтобы создать разделитель, разделяющий элементы навигации.
Добавьте класс .uk-nav-default, чтобы придать навигации стиль по умолчанию. Вы можете разместить навигацию внутри карточек или в любом другом месте вашего контента.
Добавьте класс .uk-nav-center для внутреннего центрирования элементов навигации.
Это можно сочетать со стилями классов-модификаторов Default и
Primary.
<div class="uk-card uk-card-default uk-card-body uk-width-1-2@s">
<ul class="uk-nav-default uk-nav-center" uk-nav>
<li class="uk-active"><a href="#">Активный пункт меню</a></li>
<li><a href="#">Элемент меню по центру</a></li>
<li><a href="#">Центрированный пункт меню</a></li>
</ul>
</div>
Модификатор «Divider»
Между пунктами вертикального меню можно добавить разделительные линии.
Добавьте класс .uk-nav-divider, чтобы разделить элементы адаптивной навигации линиями.
Его можно комбинировать с модификаторами стиля Default и Primary стиля.
При использовании компонента Nav к атрибуту можно применить любой из этих параметров.
Разделяйте несколько вариантов точкой с запятой.
Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.
Опции компонента
Опция
Значение
По умолчанию
Описание
targets
CSS selector
> .uk-parent
Элемент (ы) для переключения.
toggle
CSS selector
> a
Элемент (ы) переключения.
content
CSS selector
> ul
Элемент (ы) содержимого.
collapsible
Boolean
true
Разрешить закрытие всех эллементов.
multiple
Boolean
false
Разрешить несколько открытых позиций.
transition
String
ease
Переход.
animation
String
true
Использование анимации. Название анимации через запятую.
duration
Number
200
Продолжительность анимации в миллисекундах.
JavaScript
Узнайте больше о использовании JavaScript
в компонентах фреймворка UIkit 3.
Инициализация
UIkit.nav(element, options);
Методы
Для компонента «Nav» доступны следующие методы:
Toggle
UIkit.nav(element).toggle(index, animate);
Переключает область содержимого.
Название
Тип
По умолчанию
Описание
index
String, Number, Node
Навигационная панель для переключения. Индекс начинается с 0.