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

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

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>