Навигация

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

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

Для установки этого компонента, добавить .uk-nav класс к <ul> элемент. Используйте <a> элементы как меню предметов в списке. Применять активное состояние для пункта меню, просто добавьте .uk-active класса.

Пример

Примечание по умолчанию прибор имеет никакого стайлинга. Поэтому важно добавить модификатор класса, чтобы придать ей стиль. В наших примерах мы использовали .uk-nav-side класса.

Разметки

<ul class="uk-nav">
    <li><a href="#">...</a></li>
    <li class="uk-active"><a href="#">...</a></li>
</ul>

Вложенные навы

Вы можете легко добавить любое количество <ul> элементы навигации.

Класс Описание
.uk-nav-sub Добавьте этот класс к первой вложенной <ul> для оптимизированного интервала.
.uk-parent Добавить этот класс, чтобы указать родительский пункт меню.
.uk-nav-parent-icon Добавить этот класс в NAV-добавить иконки, указывая на родительские элементы.

Пример

Разметки

<ul class="uk-nav uk-nav-parent-icon">
    <li class="uk-parent"><a href="#">...</a>
        <ul class="uk-nav-sub">
            <li><a href="#">...</a>
                <ul>...</ul>
            </li>
        </ul>
    </li>
</ul>

Аккордеон

По умолчанию дочерние элементы меню всегда видны. Чтобы применить эффект аккордеона, просто добавьте data-uk-nav атрибут к основному <ul>. При клике на родительский элемент, открытый человек закроет, позволяя только один открытый вложенный список одновременно. Чтобы избежать этого, просто добавьте {multiple:true} для данных атрибутов.

Пример

Разметки

<ul class="uk-nav uk-nav-parent-icon" data-uk-nav>
    <li class="uk-parent">
        <a href="#">...</a>
        <ul class="uk-nav-sub">
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
        </ul>
    </li>
</ul>
<ul class="uk-nav uk-nav-parent-icon" data-uk-nav="{multiple:true}">
    <li class="uk-parent">
        <a href="#">...</a>
        <ul class="uk-nav-sub">
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
        </ul>
    </li>
</ul>

Заголовок и делитель

Добавьте один из следующих классов для элемента списка чтобы создать верхний или разделитель между элементами.

Класс Описание
.uk-nav-header Добавьте этот класс к <li> элемент для создания заголовка.
.uk-nav-divider Добавьте этот класс к <li> элемент для создания делителя разделяющая пункты меню.

Примечание Вы также можете добавить субтитры к сча элементов. Просто создать <div> внутри элемента <a> элемент внутри элемента списка.

Пример

Разметки

<li class="uk-nav-header">...</li>
<li class="uk-nav-divider"></li>

Стиль модификаторов

Существует несколько модификаторов для стиля нав зависимости от контекста, в котором оно используется.

Навигация стороне

Добавить .uk-nav-side класс для размещения навигации внутри боковой панели, панели или где-либо еще в ваш контент.

Пример

Разметки

<div class="uk-panel uk-panel-box">
    <h3 class="uk-panel-title">...</h3>
    <ul class="uk-nav uk-nav-side">...</ul>
</div>

Навигация выпадающее

Добавить .uk-nav-dropdown класс для размещения навигации внутри по умолчанию, выпадающий из Выпадающий компонент.

Пример

Разметки

<div class="uk-dropdown">
    <ul class="uk-nav uk-nav-dropdown">...</ul>
</div>

Навигация навигации

Добавить .uk-nav-navbar класс для размещения навигации внутри выпадающего навигации с Компонент навигации.

Пример

Разметки

<div class="uk-dropdown uk-dropdown-navbar">
    <ul class="uk-nav uk-nav-navbar">...</ul>
</div>

Навигация off-холст

Добавить .uk-nav-offcanvas класс для размещения навигации внутри off-холст боковой панели с Off-холст компонент.

Пример

Разметки

<div class="uk-offcanvas-bar">
    <ul class="uk-nav uk-nav-offcanvas">...</ul>
</div>