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

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

Использование компонента Subnav в UIkit 3

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

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

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

<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 class="uk-active"><a href="#">Активная</a></li>
    <li><a href="#">Ссылка</a></li>
    <li><a href="#">Ссылка</a></li>
    <li><span>Неактивная</span></li>
</ul>

Внимание Для улучшения отображения добавьте атрибут uk-margin из компонент Margin. После этого строки будут корректно переноситься в случае, если не уместятся в одну строку.

Модификатор разделителя

Добавьте класс .uk-subnav-divider для разделения элементов списка линией.

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

Модификатор подсветки активного элемента

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

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

Субнавигация и выпадающий список

Вы также можете использовать субнавигацию совместно с компонентом 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>