Компонент Навигация списком : 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>

Nav и Accordion

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

При нажатии по родительскому элементу открытый пункт закрывается, позволяя одновременно открывать только один открытый вложенный список. Чтобы изменить такое поведение и разрешить открывать несколько подпунктов сразу, просто добавьте к атрибуту опцию 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="https://asuikit.com/v3">Фреймворк 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>

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

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

Nav и Dropdown

  • <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>

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

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

Nav и Navbar

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

Пример Nav и Off-canvas

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

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

Опция Значение По умолчанию Описание
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);

Методы

Для компонента доступны следующие методы:

Toggle

UIkit.nav(element).toggle(index, animate);

Переключает область содержимого.

Название Тип По умолчанию Описание
index String, Integer, Node Навигационная панель для переключения. Индекс начинается с 0.
animate Boolean true Запретить открытие анимации, передав false.
Документация
Компоненты