Subnav

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

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

Для установки этого компонента, используйте следующие классы. Чтобы выровнять subnav, например, чтобы по горизонтали по центру, вы можете использовать Компонента Flex.

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

Пример

Разметки

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

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

Subnav линии

Добавить .uk-subnav-line класс к отдельным пунктам меню с линии.

Пример

Разметки

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

Subnav таблетки

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

Пример

Разметки

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

Это пример того, как использовать subnav с Выпадающий компонент.

Пример

Разметки

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

    <!-- This is the container enabling the JavaScript -->
    <li data-uk-dropdown="{mode:'click'}">

        <!-- This is the nav item toggling the dropdown -->
        <a href="">...</a>

        <!-- This is the dropdown -->
        <div class="uk-dropdown uk-dropdown-small">
            <ul class="uk-nav uk-nav-dropdown">
                <li><a href="">...</a></li>
            </ul>
        </div>
    </li>
</ul>