Компонент Навигация списком 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 автоматически устанавливает класс .uk-nav, поэтому вам не нужно прописывать его вручную. 
<ul uk-nav>...</ul>

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

<ul uk-nav>
    <li>
        <a href="">Родитель <span uk-nav-parent-icon></span></a>
        …
    </li>
</ul>

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

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

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

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

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

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

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

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

<li class="uk-nav-header">
    Заголовок
    <div class="uk-nav-subtitle">Подзаголовок</div>
</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">
        	Название раздела
        	<div class="uk-nav-subtitle">Подзаголовок</div>
        </li>
        <li class="uk-nav-divider"></li>
        <li><a href="#">Пункт меню</a></li>
        <li><a href="#">Пункт меню</a></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>

Подзаголовок

Добавьте класс .uk-nav-subtitle к элементу div, чтобы создать элемент с субтитрами. 

<ul class="uk-nav">
    <li>
        <a href="">
            <div>
                Что-то
                <div class="uk-nav-subtitle">
                    Это не было сном. Его комната, настоящая.
                </div>
            </div>
        </a>
    </li>
</ul>

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

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

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

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

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

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

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

Добавьте класс .uk-nav-secondary, чтобы использовать дополнительный стиль, если у навигации есть Подзаголовок. 

<ul class="uk-nav uk-nav-secondary">…</ul>

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

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

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

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

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

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

Модификатор «Размер»

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

Класс Описание
.uk-nav-medium Основная навигация среднего размера.
.uk-nav-large Основная навигация большого размера.
.uk-nav-xlarge Основная навигация размера xlarge. 
<ul class="uk-nav uk-nav-primary uk-nav-large">…</ul>

  • <div class="uk-width-1-2@s">
    <ul class="uk-nav-primary uk-nav-large" uk-nav>
        <li class="uk-active"><a href="#">Активный</a></li>
        <li><a href="#">Большой</a></li>
        <li><a href="#">Пункт</a></li>
    </ul>
</div>

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

Добавьте класс .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>

Навигация списком и Offcanvas

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

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

При использовании компонента Nav к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

Опции компонента

Опция Значение По умолчанию Описание
targets CSS selector > .uk-parent Элемент (ы) для переключения.
toggle CSS selector > a Элемент (ы) переключения.
content CSS selector > ul Элемент (ы) содержимого.
collapsible Boolean true Разрешить закрытие всех эллементов.
multiple Boolean false Разрешить несколько открытых позиций.
transition String ease Переход.
animation Boolean, 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 Навигационная панель для переключения.
Индекс начинается с 0.
animate Boolean true Запретить открытие анимации, передав false.