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 с выпадающих меню

Это пример того, как использовать 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>