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

Устанавливает различные стили для навигации списком.

Использование

Добавьте класс .uk-nav к тегу <ul>, чтобы применить компонент Nav. Элементы <a> используйте в качестве списка пунктов меню. Чтобы применить активное состояние к пункту меню, добавьте класс .uk-active.

Пример

Примечание По умолчанию навигация не имеет стилей. Нужно добавить класс-модификатор, чтобы придать стиль. В примерах использовался класс .uk-nav-side.

Разметка

<ul class="uk-nav uk-nav-side">
    <li class="uk-active">        <!-- Активный -->
        <a href="#">Активный</a>
    </li>
    <li><a href="#">...</a></li>
    <li><a href="#">...</a></li>
</ul>

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

В навигацию можно добавлять любое количество элементов <ul>.

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

Пример

Разметка

<ul class="uk-nav uk-nav-parent-icon">
    <li class="uk-active">        <!-- Активный -->
        <a href="#">Активный</a>
    </li>
    <li class="uk-parent">
        <a href="#">Родительский</a>  <!-- Родительский -->
        <ul class="uk-nav-sub">
            <li>
                <a href="#">...</a>
                <ul>...</ul>
            </li>
        </ul>
    </li>
</ul>

Аккордеон

По умолчанию дочерние пункты меню всегда видны. Чтобы применить эффект аккордеона, добавьте к основному элементу <ul> атрибут data-uk-nav. При нажатии по родительскому элементу открытый закрывается, позволяя одновременно открывать только один открытый вложенный список. Чтобы избежать такого поведения, добавьте к атрибуту данных {multiple:true}.

Примеры

data-uk-nav

data-uk-nav="{multiple:true}"

Разметка data-uk-nav

<ul class="uk-nav uk-nav-parent-icon" data-uk-nav>
    <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>

Разметка data-uk-nav="{multiple:true}"

<ul class="uk-nav uk-nav-parent-icon" data-uk-nav="{multiple:true}">
    <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>

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

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

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

Пример

Разметка

<ul class="uk-nav uk-nav-parent-icon" data-uk-nav>
    <li class="uk-nav-header">Заголовок</li>
    <li class="uk-active">
        <a href="#">Пункт <div>Подзаголовок</div></a>
    </li>
    <li><a href="#">...</a></li>
    <li class="uk-nav-divider"></li>    <!-- Разделитель -->
</ul>

Модификаторы

Есть несколько модификаторов для стилизации навигации в соответствии с контекстом, в котором она используется.

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

Пример

Nav side в панели

Разметка

<div class="uk-panel uk-panel-box">
    <h3 class="uk-panel-title">...</h3>
    <ul class="uk-nav uk-nav-side">
        ...
    </ul>
</div>

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

Пример

Разметка

<div class="uk-dropdown">
    <ul class="uk-nav uk-nav-dropdown">
        <li><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-nav-navbar, чтобы разместить выпадающую dropdown - навигацию внутри меню из компонента Navbar.

Пример

Разметка

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

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

Пример

Разметка

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

Разметка Nav off-canvas

<div id="nav-offcanvas" class="uk-offcanvas">

    <div class="uk-offcanvas-bar"><h3 class="uk-panel-title">Заголовок</h3>

        <ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav>
            <li><a href="#">Пункт</a></li>
            <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>

            <li><a href="#">Пункт</a></li>

            <li class="uk-nav-header">Заголовок</li>
            <li class="uk-parent"><a href="#"><i class="uk-icon-star"></i> Родительский</a></li>
            <li><a href="#"><i class="uk-icon-lock"></i> Пункт</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#"><i class="uk-icon-power-off"></i> Пункт</a></li>
        </ul>

    </div>

</div>