Навигация

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

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

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

Класс Описание
.uk-nav Добавьте этот класс к элементу <ul> для начала работы с компонентом. Используйте элементы <a> в качестве элементов навигации в списке.
.uk-active Добавьте этот класс в элемент списка, чтобы применить активное состояние к элементу меню. 
<ul class="uk-nav">
    <li class="uk-active"><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

  • <div class="uk-width-1-2@s uk-width-2-5@m">
    <ul class="uk-nav uk-nav-default">
        <li class="uk-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

Внимание По умолчанию навигация не имеет стиля. Вот почему важно добавить класс-модификатор. В нашем примере мы используем класс .uk-nav-default.

Вложенная навигация

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

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

  • <div class="uk-width-1-2@s uk-width-2-5@m">
    <ul class="uk-nav uk-nav-default">
        <li class="uk-active"><a href="#">Active</a></li>
        <li class="uk-parent">
            <a href="#">Parent</a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li>
                    <a href="#">Sub item</a>
                    <ul>
                        <li><a href="#">Sub item</a></li>
                        <li><a href="#">Sub item</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

Accordion

По умолчанию дочерние пункты меню всегда видны. Чтобы применить эффект аккордеона, добавьте атрибут uk-nav к родительскому элементу <ul>. Добавьте класс .uk-nav-parent-icon для применения иоконок, обозначающих родительские элементы.

Внимание Атрибут автоматически устанавливает класс .uk-nav, поэтому вам не нужно делать это вручную.

<ul class="uk-nav-parent-icon" uk-nav>...</ul>

  • <div class="uk-width-1-2@s uk-width-2-5@m">
    <ul class="uk-nav-default uk-nav-parent-icon" uk-nav>
        <li class="uk-active"><a href="#">Active</a></li>
        <li class="uk-parent">
            <a href="#">Parent</a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li>
                    <a href="#">Sub item</a>
                    <ul>
                        <li><a href="#">Sub item</a></li>
                        <li><a href="#">Sub item</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="uk-parent">
            <a href="#">Parent</a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li><a href="#">Sub item</a></li>
            </ul>
        </li>
    </ul>
</div>

Множественное раскрытие субнавигации

При клике по родительскому элементу открытый элемент закрывается, позволяя одновременно открывать только один вложенный список. Чтобы разрешить несколько открытых элементов, добавьте опцию multiple: true к атрибуту.

<ul class="uk-nav-parent-icon" uk-nav="multiple: true">...</ul>

  • <div class="uk-width-1-2@s uk-width-2-5@m">
    <ul class="uk-nav-default uk-nav-parent-icon" uk-nav="multiple: true">
        <li class="uk-active"><a href="#">Active</a></li>
        <li class="uk-parent">
            <a href="#">Parent</a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li>
                    <a href="#">Sub item</a>
                    <ul>
                        <li><a href="#">Sub item</a></li>
                        <li><a href="#">Sub item</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="uk-parent">
            <a href="#">Parent</a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li><a href="#">Sub item</a></li>
            </ul>
        </li>
    </ul>
</div>

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

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

Элемент Описание
.uk-nav-header Добавьте этот класс к элементу <li> для создания заголовка.
.uk-nav-divider Добавьте этот класс к элементу <li> для создания разделителя. 
<li class="uk-nav-header"></li>

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

  • <div class="uk-width-1-2@s uk-width-2-5@m">
    <ul class="uk-nav uk-nav-default">
        <li class="uk-nav-header">Header</li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li class="uk-nav-divider"></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

Стандартный модификатор

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

<ul class="uk-nav uk-nav-default">...</ul>

  • <div class="uk-card uk-card-default uk-card-body uk-width-1-2@s">
    <ul class="uk-nav-default uk-nav-parent-icon" uk-nav>
        <li class="uk-active"><a href="#">Active</a></li>
        <li class="uk-parent">
            <a href="#">Parent</a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li><a href="#">Sub item</a></li>
            </ul>
        </li>
        <li class="uk-parent">
            <a href="#">Parent</a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li><a href="#">Sub item</a></li>
            </ul>
        </li>
        <li class="uk-nav-header">Header</li>
        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
        <li class="uk-nav-divider"></li>
        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
    </ul>
</div>

Основной модификатор

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

<ul class="uk-nav uk-nav-primary">...</ul>

  • <div class="uk-width-1-2@s">
    <ul class="uk-nav-primary uk-nav-parent-icon" uk-nav>
        <li class="uk-active"><a href="#">Active</a></li>
        <li class="uk-parent">
            <a href="#">Parent</a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li><a href="#">Sub item</a></li>
            </ul>
        </li>
        <li class="uk-parent">
            <a href="#">Parent</a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li><a href="#">Sub item</a></li>
            </ul>
        </li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

Модификатор центрирования

Добавьте класс .uk-nav-center для центрирования элементов. Стиль можно комбинировать с модификаторами стиля по умолчанию и основного стиля.

<ul class="uk-nav uk-nav-default uk-nav-center">...</ul>

  • <div class="uk-card uk-card-default uk-card-body uk-width-1-2@s">
    <ul class="uk-nav-default uk-nav-center uk-nav-parent-icon" uk-nav>
        <li class="uk-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

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

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

  • <button class="uk-button uk-button-default" type="button">Hover</button>
<div uk-dropdown>
    <ul class="uk-nav uk-dropdown-nav">
        <li class="uk-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li class="uk-nav-header">Header</li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li class="uk-nav-divider"></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

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

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

  • <nav class="uk-navbar-container" uk-navbar>
    <div class="uk-navbar-left">

        <ul class="uk-navbar-nav">
            <li>
                <a href="#">Parent</a>
                <div class="uk-navbar-dropdown">
                    <ul class="uk-nav uk-navbar-dropdown-nav">
                        <li class="uk-active"><a href="#">Active</a></li>
                        <li><a href="#">Item</a></li>
                        <li class="uk-nav-header">Header</li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                        <li class="uk-nav-divider"></li>
                        <li><a href="#">Item</a></li>
                    </ul>
                </div>
            </li>
        </ul>

    </div>
</nav>

Навигация может быть использована внутри холста компонента Off-canvas. Класс модификатора добавлять не нужно.

  • Открыть 
  • <a href="#offcanvas-slide" class="uk-button uk-button-default" uk-toggle>Open</a>

<div id="offcanvas-slide" uk-offcanvas>
    <div class="uk-offcanvas-bar">

        <ul class="uk-nav uk-nav-default">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>

    </div>
</div>

Опции компонента

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

Опция Значение По умолчанию Описание
targets CSS selector > .uk-parent Элемент (ы) для переключения.
toggle CSS selector > a Элемент(ы) переключения.
content CSS selector > ul Элемент(ы) содержимого.
collapsible Boolean true Разрешить закрытие всех элементов.
multiple Boolean false Разрешить несколько открытых позиций.
transition String ease Вариант перехода.
animation String true Пространство разделено именами анимаций для использования. Анимации разделяются запятыми.
duration Number 200 Продолжительность анимации в миллисекундах.

JavaScript

Подробнее о JavaScript компонентах.

Инициализация

UIkit.nav(element, options);

Методы

Для компонента доступны следующие методы:

Toggle

UIkit.nav(element).toggle(index, animate);

Переключатели панели содержимого.

Имя Тип По умолчанию Описание
index String, Integer, Node 0 Панель навигации для переключения. Основано на 0 индексе.
animate Boolean true Отменить анимацию развертывания, вернув false