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

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

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

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. подробнее 
<div class="uk-width-1-2@s uk-width-2-5@m">
    <ul class="uk-nav uk-nav-default">
        <li class="uk-active"><a href="#">Активный пункт</a></li>
        <li><a href="#">Пункт меню</a></li>
        <li><a href="#">Пункт меню</a></li>
    </ul>
</div>

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

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

<div class="uk-width-1-2@s uk-width-2-5@m">
    <ul class="uk-nav uk-nav-default">
        <li class="uk-active"><a href="#">Активный пункт</a></li>
        <li class="uk-parent">
            <a href="#">Родительский</a>
            <ul class="uk-nav-sub">
                <li><a href="#">Подпункт</a></li>
                <li>
                    <a href="#">Подпункт</a>
                    <ul>
                        <li><a href="#">Подпункт</a></li>
                        <li><a href="#">Подпункт</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

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

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

По умолчанию дочерние пункты меню всегда видны. Чтобы применить эффект аккордеона добавьте к основному <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>

<div class="uk-child-width-1-2@m" uk-grid>
	
    <div>
        <ul class="uk-nav-default" uk-nav>
            <li class="uk-active"><a href="#">Активный</a></li>
            <li class="uk-parent">
                <a href="#">Родительский пункт</a>
                <ul class="uk-nav-sub">
                    <li><a href="#">Подпункт</a></li>
                    <li>
                        <a href="#">Подпункт</a>
                        <ul>
                            <li><a href="#">Ещё подпункт</a></li>
                            <li><a href="#">Ещё подпункт</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="uk-parent">
                <a href="#">Родительский пункт</a>
                <ul class="uk-nav-sub">
                    <li><a href="#">Подпункт</a></li>
                    <li><a href="#">Ещё подпункт</a></li>
                </ul>
            </li>
        </ul>
    </div>

    <div>
        <ul class="uk-nav-default" uk-nav>
            <li class="uk-active"><a href="#">Активный</a></li>
            <li class="uk-parent">
                <a href="#">Родительский пункт<span uk-nav-parent-icon></span></a>
                <ul class="uk-nav-sub">
                    <li><a href="#">Подпункт</a></li>
                    <li>
                        <a href="#">Подпункт</a>
                        <ul>
                            <li><a href="#">Ещё подпункт</a></li>
                            <li><a href="#">Ещё подпункт</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="uk-parent">
                <a href="#">Родительский пункт<span uk-nav-parent-icon></span></a>
                <ul class="uk-nav-sub">
                    <li><a href="#">Подпункт</a></li>
                    <li><a href="#">Ещё подпункт</a></li>
                </ul>
            </li>
        </ul>
    </div>
    
</div>

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

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

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

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

<div class="uk-width-1-2@s uk-width-2-3@m uk-width-1-2@l">
    <ul class="uk-nav-default" uk-nav="multiple: true">
        <li class="uk-active"><a href="#">Активный пункт меню</a></li>
        <li class="uk-parent">
            <a href="#">Родительский пункт<span uk-nav-parent-icon></span></a>
            <ul class="uk-nav-sub">
                <li><a href="#">Подпункт</a></li>
                <li>
                    <a href="#">Подпункт</a>
                    <ul>
                        <li><a href="#">Ещё подпункт</a></li>
                        <li><a href="#">Ещё один подпункт</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="uk-parent">
            <a href="#">Ещё родительский пункт<span uk-nav-parent-icon></span></a>
            <ul class="uk-nav-sub">
                <li><a href="#">Подпункт меню</a></li>
                <li><a href="#">Ещё один подпункт</a></li>
            </ul>
        </li>
    </ul>
</div>

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

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

Класс Описание
.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>

<div class="uk-width-1-2@s uk-width-2-5@m">
    <ul class="uk-nav uk-nav-default">
        <li class="uk-active">
        	<a href="#">
        		<div>
        			Активный
        			<div class="uk-nav-subtitle">
        				Когда от милой моей долины поднимается пар и полдневное солнце стоит.
        			</div>
        		</div>
        	</a>
        </li>
        <li><a href="#"><div>Название<div class="uk-nav-subtitle">Душа моя озарена неземной радостью, я наслаждаюсь от всего сердца.</div></div></a></li>
        <li><a href="#"><div>Название<div class="uk-nav-subtitle">Душа моя озарена неземной радостью, я наслаждаюсь от всего сердца.</div></div></a></li>
    </ul>
</div>

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

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

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

<div class="uk-card uk-card-default uk-card-body uk-width-1-2@s">
    <ul class="uk-nav-default" uk-nav>
        <li class="uk-active"><a href="#">Активный пункт меню</a></li>
        <li class="uk-parent">
            <a href="#">Родительский пункт меню<span uk-nav-parent-icon></span></a>
            <ul class="uk-nav-sub">
                <li><a href="#">Подпункт меню</a></li>
                <li><a href="#">Подпункт меню</a></li>
            </ul>
        </li>
        <li class="uk-parent">
            <a href="#">Ещё родительский пункт<span uk-nav-parent-icon></span></a>
            <ul class="uk-nav-sub">
                <li><a href="#">Подпункт меню</a></li>
                <li><a href="#">Подпункт меню</a></li>
            </ul>
        </li>
        <li class="uk-nav-header">Раздел UIkit 3</li>
        <li><a href="#"><span class="uk-margin-small-right" uk-icon="cog"></span> Инструментарий</a></li>
        <li><a href="#"><span class="uk-margin-small-right" uk-icon="thumbnails"></span> Коллекция</a></li>
        <li class="uk-nav-divider"></li>
        <li><a href=""><span class="uk-margin-small-right" uk-icon="uikit"></span> Фреймворк</a></li>
    </ul>
</div>

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

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

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

<div class="uk-width-1-2@s">
    <ul class="uk-nav-primary" uk-nav>
        <li class="uk-active"><a href="#">Активный пункт меню</a></li>
        <li class="uk-parent">
            <a href="#">Заголовок пункта меню<span uk-nav-parent-icon></span></a>
            <ul class="uk-nav-sub">
                <li><a href="#">Обычный подпункт меню</a></li>
                <li><a href="#">Очередной подпункт меню</a></li>
            </ul>
        </li>
        <li class="uk-parent">
            <a href="#">Название пункта меню<span uk-nav-parent-icon></span></a>
            <ul class="uk-nav-sub">
                <li><a href="#">Обычный подпункт меню</a></li>
                <li><a href="#">Очередной подпункт меню</a></li>
            </ul>
        </li>
        <li><a href="#">Невероятное!</a></li>
    </ul>
</div>

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

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

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

<div class="uk-width-1-2@s">
    <ul class="uk-nav uk-nav-secondary">
        <li class="uk-active"><a href="#"><div>Активный<div class="uk-nav-subtitle">Когда от милой моей долины поднимается пар и полдневное солнце стоит.</div></div></a></li>
        <li><a href="#"><div>Название<div class="uk-nav-subtitle">Душа моя озарена неземной радостью, я наслаждаюсь от всего сердца.</div></div></a></li>
        <li>
        	<a href="#">
        		<div>
        			Название
        			<div class="uk-nav-subtitle">
        				Душа моя озарена неземной радостью, я наслаждаюсь от всего сердца.
        			</div>
        		</div>
        	</a>
        </li>
    </ul>
</div>

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

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

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

<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 и Secondary. 

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

<div class="uk-width-1-2@s">
    <ul class="uk-nav-default uk-nav-divider" uk-nav>
        <li class="uk-active"><a href="#">Активный пункт</a></li>
        <li><a href="#">Элемент меню</a></li>
        <li><a href="#">Элемент меню</a></li>
    </ul>
</div>

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

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

Класс Описание
.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>

<nav class="uk-navbar-container" uk-navbar>
    <div class="uk-navbar-left">
        <ul class="uk-navbar-nav">
            <li>
                <a href="#">Родительский пункт</a>
                <div class="uk-navbar-dropdown">
                    <ul class="uk-nav uk-navbar-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>
            </li>
        </ul>
    </div>
</nav>

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

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

Открыть 
<a href="#offcanvas-slide" class="uk-button uk-button-primary" uk-toggle>Открыть</a>

<div id="offcanvas-slide" uk-offcanvas>
    <div class="uk-offcanvas-bar">
        <ul class="uk-nav uk-nav-default">
            <li class="uk-active"><a href="#">Активный Off-canvas</a></li>
            <li><a href="#">Пункт off-canvas</a></li>
            <li class="uk-nav-header">Крутой заголовок</li>
            <li><a href="#">Пункт меню off-canvas</a></li>
            <li><a href="#">Ещё один пункт меню</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Отдельный off-canvas пункт</a></li>
        </ul>
    </div>
</div>

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

При использовании компонента 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.