Для установки этого компонента, добавить .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} для данных атрибутов.

Пример

data-uk-nav

data-uk-nav="{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>

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

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