Суб-навигация

Определяет разные стили для суб-навигации.

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

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

Класс Описание
.uk-subnav Добавьте этот класс к элементу <ul>.
.uk-active Добавьте этот класс в элемент списка, чтобы применить активное состояние.
.uk-disabled Добавьте этот класс в элемент списка, чтобы применить отключенное состояние.
Заметка
Чтобы выровнять Subnav, например, отцентрировать его горизонтально, вы можете использовать компонент Flex.

Пример

Разметка

<ul class="uk-subnav">
    <li class="uk-active"><a href="">...</a></li>
    <li><a href="">...</a></li>
    <li class="uk-disabled"><a href="">...</a></li>
</ul>

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

Добавьте класс .uk-subnav-line к элементу <ul>, чтобы использовать пункты меню с линиями.

Пример

Разметка

<ul class="uk-subnav uk-subnav-line">
    <li>...</li>
</ul>

Добавьте класс .uk-subnav-pill к элементу <ul>, чтобы выделить активный пункт меню фоном. Чтобы применить активное состояние к пункту меню, добавьте класс .uk-active.

Пример

Разметка

<ul class="uk-subnav uk-subnav-pill">
    <li class="uk-active">...</li>
    <li>...</li>
</ul>

Суб-навигация UIkit 2 может содержать раскрывающийся список из компонента Dropdown. Это пример того, как использовать Subnav и выпадающий список Dropdown.

Пример

Разметка

<ul class="uk-subnav">
    <li class="uk-active"><a href="">Активный</a></li>
    <li><a href="">Пункт меню</a></li>

    <!-- Это контейнер, включающий JavaScript -->
    <li data-uk-dropdown="{mode:'click'}">

        <!-- Это элемент навигации, переключающий выпадающий список -->
        <a href="">Выпадающий<i class="uk-icon-caret-down"></i></a>

        <!-- Это выпадающий список -->
        <div class="uk-dropdown uk-dropdown-small">
            <ul class="uk-nav uk-nav-dropdown">
                <li><a href="">Пункт меню</a></li>
            </ul>
        </div>
    </li>
</ul>