Компонент Навигация списком Nav

Создавайте навигации списком и устанавливайте различные стили для неё. Создание навигации в стиле многоуровнего меню «Аккордеон».

Навигация списком в стиле многоуровнего меню Аккордеон с выпадающими подпунктами.

Руководство

Чтобы использовать компонент Nav, используйте следующие классы.

Класс Описание
.uk-nav Добавьте этот класс к элементу <ul> чтобы определить компонент Nav.
Используйте элементы <a> в качестве навигационных пунктов меню.
.uk-active Добавьте этот класс к элементу списка, чтобы установить элементу меню активное состояние. 
<ul class="uk-nav">
    <li class="uk-active"><a href=""></a></li>
    <li><a href=""></a></li>
</ul>
Примечание По умолчанию навигация не имеет стиля. Вот почему важно добавить класс-модификатор. В данном примере используется класс .uk-nav-default. подробнее

Вложенная навигация

Добавьте класс .uk-parent к элементу, чтобы превратить его в родителя. Добавьте класс .uk-nav-sub к элементу <ul> внутри элемента, чтобы создать субнавигацию.

<ul class="uk-nav">
    <li class="uk-parent">
        <a href=""></a>
        <ul class="uk-nav-sub">
            <li><a href=""></a></li>
            <li>
                <a href=""></a>
                <ul>...</ul>
            </li>
        </ul>
    </li>
</ul>

Эффект «Аккордеон»

Навигация списком с эффектом «Аккордеон»

По умолчанию дочерние пункты меню всегда видны. Чтобы применить эффект аккордеона, просто добавьте к основному <ul> атрибут uk-nav. Для применения значков (иконок, указателей), обозначающих родительские элементы, добавьте класс .uk-nav-parent-icon.

Примечание Атрибут uk-nav автоматически устанавливает класс .uk-nav, поэтому вам не нужно прописывать его вручную. 
<ul class="uk-nav-parent-icon" uk-nav>...</ul>

Множественное открытие

Несколько открытых подпунктов

При нажатии по родительскому элементу открытый пункт закрывается, позволяя одновременно открывать только один открытый вложенный список. Чтобы изменить такое поведение и разрешить открывать несколько подпунктов сразу, просто добавьте к атрибуту опцию multiple: true.

<ul class="uk-nav-parent-icon" uk-nav="multiple: true">...</ul>

Заголовок и разделитель

Добавьте один из следующих классов в элемент списка, чтобы создать заголовок или какое-либо название. Также можно добавить разделитель между элементами навигации.

Класс Описание
.uk-nav-header Добавьте этот класс к элементу <li>, чтобы создать заголовок.
.uk-nav-divider Добавьте этот класс к элементу <li>, чтобы создать разделитель, разделяющий элементы навигации. 
<li class="uk-nav-header">Заголовок</li>

<li class="uk-nav-divider"></li>    <!-- Разделитель -->

  • <div class="uk-width-1-2@s uk-width-2-5@m">
    <ul class="uk-nav uk-nav-default">
        <li class="uk-nav-header">Название раздела</li>
        <li><a href="#">Пункт меню</a></li>
        <li><a href="#">Пункт меню</a></li>
        <li class="uk-nav-divider"></li>
        <li><a href="">Фреймворк UIkit 3</a></li>
    </ul>
</div>

Модификатор «Default»

Добавьте класс .uk-nav-default, чтобы придать навигации стиль по умолчанию. Вы можете разместить навигацию внутри карточек или в любом другом месте вашего контента.

<ul class="uk-nav uk-nav-default">...</ul>

Модификатор «Primary»

Добавьте класс .uk-nav-primary, чтобы придать навигации привелекающий стиль, например, при использовании в модальном окне. 

<ul class="uk-nav uk-nav-primary">...</ul>

Модификатор «Center»

Добавьте класс .uk-nav-center для внутреннего центрирования элементов навигации. Это можно сочетать со стилями классов-модификаторов Default и Primary. 

<ul class="uk-nav uk-nav-default uk-nav-center">...</ul>

Модификатор «Divider»

Между пунктами вертикального меню можно добавить разделительные линии. Добавьте класс .uk-nav-divider, чтобы разделить элементы адаптивной навигации линиями. Его можно комбинировать с модификаторами стиля Default и Primary стиля. 

<ul class="uk-nav uk-nav-default uk-nav-divider">...</ul>

Выпадающий список навигационного меню

Добавьте класс .uk-dropdown-nav, чтобы разместить навигационное меню внутри выпадающего списка Dropdown по умолчанию.

<div uk-dropdown>
    <ul class="uk-nav uk-dropdown-nav">...</ul>
</div>

  • <button class="uk-button uk-button-primary" type="button">Наведи на меня</button>

<div uk-dropdown>
    <ul class="uk-nav uk-dropdown-nav">
        <li class="uk-active"><a href="#">Активное меню</a></li>
        <li><a href="#">Навигация</a></li>
        <li class="uk-nav-header">Красивый заголовок</li>
        <li><a href="#">Навигация</a></li>
        <li><a href="#">Элемент навигация</a></li>
        <li class="uk-nav-divider"></li>
        <li><a href="#">Отдельный пункт</a></li>
    </ul>
</div>

Навигация списком в панели Navbar

Добавьте класс .uk-navbar-dropdown-nav, чтобы сделать выпадающее навигационное меню внутри горизонтальной панели навигации из компонента Navbar.

<div class="uk-navbar-dropdown">
    <ul class="uk-nav uk-navbar-dropdown-nav">...</ul>
</div>

Навигация списком и Off-canvas

Навигация списком может использоваться внутри панели off-canvas из компонента Off-canvas. Класс модификатора не нужно добавлять.

Параметры для атрибута

При использовании компонента 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, Integer, Node Навигационная панель для переключения.
Индекс начинается с 0.
animate Boolean true Запретить открытие анимации, передав false.