Компонент Суб-навигация Subnav

Меню списка. Разные стили для суб-навигации. Пункты меню с вертикальными линиями. Суб-навигация с выпадающим списком.

Руководство

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

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

Чтобы добавить элементы списка без ссылки, используйте элемент <span> вместо <a>. Или же отключите элемент <a> добавив класс .uk-disabled к элементу <li> и удалите атрибут href, чтобы сделать его недоступным с помощью навигации по клавиатуре.

Чтобы выровнять суб-навигацию, например, горизонтально отцентрировать её, вы можете использовать компонент Flex.
<ul class="uk-subnav">
    <li class="uk-active"><a href=""></a></li>
    <li><a href=""></a></li>
    <li><span></span></li>
</ul>
  • <ul class="uk-subnav" uk-margin>    
        <li><a href="#">Пункт</a></li>
        <li class="uk-active"><a href="#">Активный</a></li>
        <li><a href="#">Заголовок</a></li>
        <li><span>Отключен</span></li>
    </ul>
  • <ul class="uk-subnav uk-flex-center" uk-margin>    
        <li><a href="#">Название</a></li>
        <li class="uk-active"><a href="#">Активный</a></li>
        <li><a href="#">Пункт</a></li>
        <li><span>Отключено</span></li>
    </ul>
Примечание Для лучшего отображения, если элементы будут переноситься на следующую строку, добавьте атрибут uk-margin из компонента Внешний отступ.

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

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

<ul class="uk-subnav uk-subnav-divider">...</ul>
  • <ul class="uk-subnav uk-subnav-divider" uk-margin>
        <li class="uk-active"><a href="#">Активный</a></li>
        <li><a href="#">Элемент</a></li>
        <li><a href="#">С линиями</a></li>
    </ul>

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

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

<ul class="uk-subnav uk-subnav-pill">...</ul>
  • <ul class="uk-subnav uk-subnav-pill" uk-margin>
        <li class="uk-active"><a href="#">Активный</a></li>
        <li><a href="#">Пункт</a></li>
        <li><a href="#">Элемент</a></li>
    </ul>

Суб-навигация с выпадающим Dropdown

Вы также можете использовать вместе с суб-навигацией раскрывающийся список из компонента Dropdown.

<ul class="uk-subnav">
    <li>
        <a href=""></a>
        <div uk-dropdown="mode: click;"></div>
    </li>
</ul>
  • <ul class="uk-subnav uk-subnav-pill" uk-margin>
        <li class="uk-active"><a href="#">Активное</a></li>
        <li><a href="#">Обычное</a></li>
        <li>
            <a href>Нажми <span uk-icon="icon:  triangle-down"></span></a>
            <div uk-dropdown="mode: click;">
                <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>
        </li>
    </ul>