Навигационная панель

Создайте навигационные панели, которые можно использовать для навигации по основному сайту.

Как использовать компонент Navbar

Компонент Navbar состоит из контейнера навигационной панели, самой навигационной панели и собственно списка навигации.

Элемент Описание
uk-navbar Добавьте этот атрибут к элементу <nav>, чтобы начать использовать компонент Navbar.
.uk-navbar-container Добавьте этот класс к тому же элементу <nav> или родительскому элементу, чтобы добавить стиль фона панели навигации.
.uk-navbar-left
.uk-navbar-center
.uk-navbar-right		 Добаьте эти классы к элементам <div> для выравнивания блока навигации.
.uk-navbar-nav Добавьте этот класс к элементу <ul> для создания навигации. Используйте элементы <a> внутри элементов списка.
.uk-parent Добавьте этот класс к родительскому пункту меню
.uk-active Добавьте этот класс к элементу меню, чтобы включить активное состояние. 
<nav class="uk-navbar-container" uk-navbar>
    <div class="uk-navbar-left">
        <ul class="uk-navbar-nav">
            <li class="uk-active"><a href=""></a></li>
            <li class="uk-parent"><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </div>
</nav>

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

        <ul class="uk-navbar-nav">
            <li class="uk-active"><a href="#">Активный</a></li>
            <li>
                <a href="#">Родитель</a>
                <div class="uk-navbar-dropdown">
                    <ul class="uk-nav uk-navbar-dropdown-nav">
                        <li class="uk-active"><a href="#">Активный</a></li>
                        <li><a href="#">Ссылка</a></li>
                        <li><a href="#">Ссылка</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="#">Ссылка</a></li>
        </ul>

    </div>
</nav>

Несколько навигаций

Вы можете разместить более одной навигации внутри контейнера navbar. Таким образом, вы можете настроить выравнивание по левому краю, по центру и по правому краю внутри одной и той же панели навигации.

<nav class="uk-navbar-container" uk-navbar>
    <div class="uk-navbar-left">...</div>
    <div class="uk-navbar-center">...</div>
    <div class="uk-navbar-right">...</div>
</nav>

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

    <div class="uk-navbar-left">

        <ul class="uk-navbar-nav">
            <li class="uk-active"><a href="#">Активный</a></li>
            <li>
                <a href="#">Родительский</a>
                <div class="uk-navbar-dropdown">
                    <ul class="uk-nav uk-navbar-dropdown-nav">
                        <li class="uk-active"><a href="#">Активный</a></li>
                        <li><a href="#">Ссылка</a></li>
                        <li><a href="#">Ссылка</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="#">Ссылка</a></li>
        </ul>

    </div>

    <div class="uk-navbar-right">

        <ul class="uk-navbar-nav">
            <li class="uk-active"><a href="#">Активный</a></li>
            <li>
                <a href="#">Родительский</a>
                <div class="uk-navbar-dropdown">
                    <ul class="uk-nav uk-navbar-dropdown-nav">
                        <li class="uk-active"><a href="#">Активный</a></li>
                        <li><a href="#">Ссылка</a></li>
                        <li><a href="#">Сыылка</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="#">Ссылка</a></li>
        </ul>

    </div>

</nav>

Режим клика

Родительский элемент внутри панели навигации может быть включен либо в режим наведении курсора, либо при клике. Задайте опцию mode: click атрибуту uk-navbar.

<nav class="uk-navbar-container" uk-navbar="mode: click">...</nav>

  • <nav class="uk-navbar-container uk-margin" uk-navbar="mode: click">
    <div class="uk-navbar-left">

        <ul class="uk-navbar-nav">
            <li class="uk-active"><a href="#">Активный</a></li>
            <li>
                <a href="#">Родительский</a>
                <div class="uk-navbar-dropdown">
                    <ul class="uk-nav uk-navbar-dropdown-nav">
                        <li class="uk-active"><a href="#">Активный</a></li>
                        <li><a href="#">Ссылка</a></li>
                        <li><a href="#">Ссылка</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="#">Ссылка</a></li>
        </ul>

    </div>
</nav>

Модификатор прозрачности

При использовании изображения или цветного фона для раздела вашего сайта, вы можете сделать панель навигации прозрачной. Добавьте модификатор .uk-navbar-transparent к элементу <nav>. При необходимости добавьте классы .uk-light или .uk-dark из компонента Инверсия, чтобы улучшить видимость элементов.

<nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>...</nav>

  • <div class="uk-position-relative">
    <img src="images/light.jpg" alt="">
    <div class="uk-position-top">
        <nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>
            <div class="uk-navbar-left">
                <ul class="uk-navbar-nav">
                    <li class="uk-active"><a href="#">Активный</a></li>
                    <li><a href="#">Ссылка</a></li>
                    <li>
                        <a href="#">Родитель</a>
                        <div class="uk-navbar-dropdown">
                            <ul class="uk-nav uk-navbar-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>
            </div>
        </nav>
    </div>
</div>

Подзаголовок пункта меню

Чтобы добавить подзаголовок пункта меню, вставьте элемент <div> внутрь элемента списка <a>. Добавьте этому элементу класс .uk-navbar-subtitle <div>.

<li>
    <a href="">
        <div>
            ...
            <div class="uk-navbar-subtitle"></div>
        </div>
    </a>
</li>

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

        <ul class="uk-navbar-nav">
            <li class="uk-active">
                <a href="#">
                    <div>
                        Active
                        <div class="uk-navbar-subtitle">Подзаголовок</div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div>
                        Родитель
                        <div class="uk-navbar-subtitle">Подзаголовок</div>
                    </div>
                </a>
                <div class="uk-navbar-dropdown">
                    <ul class="uk-nav uk-navbar-dropdown-nav">
                        <li class="uk-active"><a href="#">Активный</a></li>
                        <li><a href="#">Ссылка</a></li>
                        <li><a href="#">Ссылка</a></li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#">
                    <div>
                        Ссылка
                        <div class="uk-navbar-subtitle">Подзаголовок</div>
                    </div>
                </a>
            </li>
        </ul>

    </div>
</nav>

Контент в пункте меню

Вы также можете добавить пользовательский контент на панель навигации, например текст, иконки, кнопки или формы. Добавьте класс .uk-navbar-item к элементу <div> и разместите в нем свой контент.

<div class="uk-navbar-container" uk-navbar>
    <div class="uk-navbar-left">
        <a href="" class="uk-navbar-item uk-logo"></a>
        <ul class="uk-navbar-nav">...</ul>
        <div class="uk-navbar-item">...</div>
    </div>
</div>

Добавьте класс .uk-logo из компонента Утилиты к элементу <a> или <div> для их использовании в качестве логтипа.

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

        <a class="uk-navbar-item uk-logo" href="#">Лого</a>

        <ul class="uk-navbar-nav">
            <li>
                <a href="#">
                    <span class="uk-icon uk-margin-small-right" uk-icon="icon: star"></span>
                    Ссылка
                </a>
            </li>
        </ul>

        <div class="uk-navbar-item">
            <div>Еще <a href="#">Ссылка</a></div>
        </div>

        <div class="uk-navbar-item">
            <form action="javascript:void(0)">
                <input class="uk-input uk-form-width-small" type="text" placeholder="Input">
                <button class="uk-button uk-button-default">Кнопка</button>
            </form>
        </div>

    </div>
</nav>

Центрирование логотипа

Вы можете создать разделенное меню с центрированным логотипом. Добавьте класс uk-navbar-center-left к элементу, который будет слева, и класс uk-navbar-center-right к элементу, который будет справа от логотипа. Теперь ваш логотип будет отображаться по центру, а пункты меню — слева и справа.

Внимание Дополнительные элементы div требуются для поддержки IE 11.

<div class="uk-navbar-container" uk-navbar>
    <div class="uk-navbar-center">
        <div class="uk-navbar-center-left"><div>...</div></div>
        <a href="" class="uk-navbar-item uk-logo"></a>
        <div class="uk-navbar-center-right"><div>...</div></div>
    </div>
</div>

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

        <div class="uk-navbar-center-left"><div>
            <ul class="uk-navbar-nav">
                <li class="uk-active"><a href="#">Активный</a></li>
                <li>
                    <a href="#">Parent</a>
                    <div class="uk-navbar-dropdown">
                        <ul class="uk-nav uk-navbar-dropdown-nav">
                            <li class="uk-active"><a href="#">Активный</a></li>
                            <li><a href="#">Ссылка</a></li>
                            <li><a href="#">Ссылка</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div></div>
        <a class="uk-navbar-item uk-logo" href="#">Logo</a>
        <div class="uk-navbar-center-right"><div>
            <ul class="uk-navbar-nav">
                <li><a href="#">Ссылка</a></li>
            </ul>
        </div></div>

    </div>
</nav>

Элемент "Бургер" для меню

Добавьте класс .uk-navbar-toggle и добавьте атрибут uk-navbar-toggle-icon к элементу <a> или <div> для создания кнопки с иконкой. По умолчанию JavaScript не подключен к переключателю. Можно добавить навигацию из компонента Off-canvas или вызов модального окна из компонента Modal или что-нибудь еще.

<div class="uk-navbar-container" uk-navbar>
    <div class="uk-navbar-left">
        <a class="uk-navbar-toggle" uk-navbar-toggle-icon href=""></a>
    </div>
</div>

  • <nav class="uk-navbar uk-navbar-container uk-margin">
    <div class="uk-navbar-left">
        <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
    </div>
</nav>

<nav class="uk-navbar uk-navbar-container uk-margin">
    <div class="uk-navbar-left">
        <a class="uk-navbar-toggle" href="#">
            <span uk-navbar-toggle-icon></span> <span class="uk-margin-small-left">Меню</span>
        </a>
    </div>
</nav>

Выпадающее меню

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

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

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

        <ul class="uk-navbar-nav">
            <li class="uk-active"><a href="#">Активный</a></li>
            <li>
                <a href="#">Родитель</a>
                <div class="uk-navbar-dropdown">
                    <ul class="uk-nav uk-navbar-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>
            <li><a href="#">Ссылка</a></li>
        </ul>

    </div>
    <div class="uk-navbar-right">

        <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="#">Активный</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>
    </div>
</nav>

Многоколоночные выпадающие меню

Компонент Dropdown позволяет упорядочить выпадающий контент в столбцах. Чтобы разместить до пяти столбцов, вам также необходимо добавить один из следующих классов. Поддерживается адаптивное поведение.

Класс Описание
.uk-navbar-dropdown-width-2 Две колонки.
.uk-navbar-dropdown-width-3 Три колонки.
.uk-navbar-dropdown-width-4 Четыре колонки.
.uk-navbar-dropdown-width-5 Пять колонок. 
<div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
    <div class="uk-navbar-dropdown-grid uk-child-width-1-2" uk-grid>
        <div>
            <ul class="uk-nav uk-navbar-dropdown-nav">...</ul>
        </div>
        <div>...</div>
    </div>
</div>

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

        <ul class="uk-navbar-nav">
            <li>
                <a href="#">Две колонки</a>
                <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
                    <div class="uk-navbar-dropdown-grid uk-child-width-1-2" uk-grid>
                        <div>
                            <ul class="uk-nav uk-navbar-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>
                        <div>
                            <ul class="uk-nav uk-navbar-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>
                    </div>
                </div>
            </li>
        </ul>

    </div>

</nav>

Выравнивание относительно границы

Выпадающие могут быть выровнены по границе навигационной панели. Добавьте параметр boundary-align: true к атрибуту uk-navbar. Добавьте опцию align: left, align: center или align: right для установки выравнивания. По умолчанию выпадающие меню выравниваются по левому краю.

<nav class="uk-navbar-container" uk-navbar="boundary-align: true; align: center;">...</nav>

  • <nav class="uk-navbar-container" uk-navbar="boundary-align: true; align: center;">
    <div class="uk-navbar-left">

        <ul class="uk-navbar-nav">
            <li>
                <a href="#">Ссылка</a>
                <div class="uk-navbar-dropdown">
                    <ul class="uk-nav uk-navbar-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>
            <li>
                <a href="#">Ссылка</a>
                <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
                    <div class="uk-navbar-dropdown-grid uk-child-width-1-2" uk-grid>
                        <div>
                            <ul class="uk-nav uk-navbar-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>
                        <div>
                            <ul class="uk-nav uk-navbar-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>
                    </div>
                </div>
            </li>
            <li>
                <a href="#">Ссылка</a>
                <div class="uk-navbar-dropdown uk-navbar-dropdown-width-3">
                    <div class="uk-navbar-dropdown-grid uk-child-width-1-3" uk-grid>
                        <div>
                            <ul class="uk-nav uk-navbar-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>
                        <div>
                            <ul class="uk-nav uk-navbar-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>
                        <div>
                            <ul class="uk-nav uk-navbar-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>
                    </div>
                </div>
            </li>
        </ul>

    </div>

    <div class="uk-navbar-right">
        <ul class="uk-navbar-nav">
            <li>
                <a href="#">Ссылка</a>
                <div class="uk-navbar-dropdown">
                    <ul class="uk-nav uk-navbar-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>
    </div>

</nav>

Ширина родительского элемента

Чтобы использовать выравнивание и ширину, отличные от параметров по умолчанию, используйте возможности компонента Drop. В следующем примере выпадающее меню будет выравнивается по границе родительской панели навигации, т.е. весь выпадающий блок будет равен ширине навигационной панели.

<div class="uk-navbar-dropdown" uk-drop="boundary: .parent; boundary-align: true; pos: bottom-justify;">...</div>

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

        <ul class="uk-navbar-nav">
            <li>
                <a href="#">Ссылка</a>
                <div class="uk-navbar-dropdown" uk-drop="boundary: !nav; boundary-align: true; pos: bottom-justify;">
                    <ul class="uk-nav uk-navbar-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>
           <li>
               <a href="#">Ссылка</a>
               <div class="uk-navbar-dropdown" uk-drop="boundary: !nav; boundary-align: true; pos: bottom-justify;">
                   <div class="uk-navbar-dropdown-grid uk-child-width-1-2" uk-grid>
                       <div>
                           <ul class="uk-nav uk-navbar-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>
                       <div>
                           <ul class="uk-nav uk-navbar-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>
                   </div>
               </div>
           </li>
       </ul>

    </div>
</nav>

Компонент Dropbar

Панель Dropbar распространяется на всю ширину панели навигации и отображает раскрывающийся список без стилизации по умолчанию. Чтобы разместить выпадающие списки внутри такой панели, добавьте опцию dropbar: true к атрибуту uk-navbar.

<nav class="uk-navbar-container" uk-navbar="dropbar: true;">...</nav>
<div class="uk-navbar-dropbar"></div>

  • <div class="uk-position-relative">

    <nav class="uk-navbar-container" uk-navbar="dropbar: true">

        <div class="uk-navbar-left">

            <ul class="uk-navbar-nav">
                <li>
                    <a href="#">Ссылка</a>
                    <div class="uk-navbar-dropdown">
                        <ul class="uk-nav uk-navbar-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>
                <li>
                    <a href="#">Ссылка</a>
                    <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
                        <div class="uk-navbar-dropdown-grid uk-child-width-1-2" uk-grid>
                            <div>
                                <ul class="uk-nav uk-navbar-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>
                            <div>
                                <ul class="uk-nav uk-navbar-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>
                        </div>
                    </div>
                </li>
            </ul>

        </div>

        <div class="uk-navbar-right">

            <ul class="uk-navbar-nav">
                <li>
                    <a href="#">Родитель</a>
                    <div class="uk-navbar-dropdown">
                        <ul class="uk-nav uk-navbar-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>

        </div>
    </nav>

    <div class="uk-navbar-dropbar"></div>

</div>

Сдвиг

По умолчанию эта панель перекрывает содержимое сайта. Но в UIkit появилось и другое поведение. Добавьте опцию dropbar-mode: push;, и выпадающее меню будет сдвигать контент снизу.

Внимание Режим push не работает, если панель навигации находится внутри "Липкого" компонента

<nav class="uk-navbar-container" uk-navbar="dropbar: true; dropbar-mode: push">...</nav>
<div class="uk-navbar-dropbar"></div>

  • <div class="uk-position-relative">

    <nav class="uk-navbar-container" uk-navbar="dropbar: true; dropbar-mode: push">

        <div class="uk-navbar-left">

            <ul class="uk-navbar-nav">
                <li>
                    <a href="#">Ссылка</a>
                    <div class="uk-navbar-dropdown">
                        <ul class="uk-nav uk-navbar-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>
                <li>
                    <a href="#">Ссылка</a>
                    <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
                        <div class="uk-navbar-dropdown-grid uk-child-width-1-2" uk-grid>
                            <div>
                                <ul class="uk-nav uk-navbar-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>
                            <div>
                                <ul class="uk-nav uk-navbar-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>
                        </div>
                    </div>
                </li>
            </ul>

        </div>

        <div class="uk-navbar-right">

            <ul class="uk-navbar-nav">
                <li>
                    <a href="#">Родитель</a>
                    <div class="uk-navbar-dropdown">
                        <ul class="uk-nav uk-navbar-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>

        </div>

    </nav>

    <div class="uk-navbar-dropbar"></div>

</div>

Липкие навигационные панели

Для создания простой липкой навигационной панели оберните навигационную панель в <div> и задайте ей атрибут uk-sticky или data-uk-sticky из компонента Sticky.

Сама панель навигации будет иметь класс-модификатор uk-navbar-sticky, что обеспечивает оптимизированное оформление для закрепленного состояния (например, дополнительная тень от блока). Чтобы позволить компоненту Sticky динамически добавлять и удалять этот класс, установите параметр cls-active: uk-navbar-sticky. Чтобы убедиться, что класс добавлен в контейнер навигационной панели, задайте sel-target: .uk-navbar-container.

Внимание Вы можете увидеть больше примеров липких контейнеров в разделе Sticky Navbar.

<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
    <nav class="uk-navbar-container" uk-navbar>...</nav>
</div>

  • <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; bottom: #transparent-sticky-navbar">
    <nav class="uk-navbar-container" uk-navbar style="position: relative; z-index: 980;">
        <div class="uk-navbar-left">

            <ul class="uk-navbar-nav">
                <li class="uk-active"><a href="#">Активный</a></li>
                <li>
                    <a href="#">Parent</a>
                    <div class="uk-navbar-dropdown">
                        <ul class="uk-nav uk-navbar-dropdown-nav">
                            <li class="uk-active"><a href="#">Активный</a></li>
                            <li><a href="#">Ссылка</a></li>
                            <li><a href="#">Ссылка</a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="#">Ссылка</a></li>
            </ul>

        </div>
    </nav>
</div>

Вместо использования выпадающего меню вы можете отобразить Dropbar, при этом субнавигация займет всю ширину под навигацией. Просто установите dropbar: true внутри атрибутаuk-navbar.

<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
    <nav class="uk-navbar-container" uk-navbar="dropbar: true;">...</nav>
</div>

  • <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; bottom: #transparent-sticky-navbar">
    <nav class="uk-navbar-container" uk-navbar="dropbar: true;" style="position: relative; z-index: 980;">
        <div class="uk-navbar-left">

            <ul class="uk-navbar-nav">
                <li class="uk-active"><a href="#">Активный</a></li>
                <li>
                    <a href="#">Родитель</a>
                    <div class="uk-navbar-dropdown">
                        <ul class="uk-nav uk-navbar-dropdown-nav">
                            <li class="uk-active"><a href="#">Активный</a></li>
                            <li><a href="#">Ссылка</a></li>
                            <li><a href="#">Ссылка</a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="#">Ссылка</a></li>
            </ul>

        </div>
    </nav>
</div>

Прозрачность липких навигационных панелей

Когда вы используете прозрачность, ваша разметка должна содержать класс .uk-navbar-transparent вместе с .uk-light или .uk-dark. Когда навигационная панель привязана, следует удалить эти классы и добавить их, когда навигационная панель вернется в незакрепленное состояние. Для этого установите параметр cls-inactive: uk-navbar-transparent uk-light.

По умолчанию немедленное переключение классов незаметно. Мы можем установить параметр top: 200, чтобы навигационная панель исчезла, а затем снова появлялась, когда пользователь прокрутил 200 пикселей за навигационную панель.

В этом случае мы также можем определить, чтобы навигационная панель вставлялась с анимацией, для этого добавьте параметр animation: uk-animation-slide-top. Не забывайте, что параметры должны отделяться друг от друга точкой с запятой.

<div uk-sticky="animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent uk-light; top: 200">
    <nav class="uk-navbar-container" uk-navbar>...</nav>
</div>

  • Инженер – это человек, который может объяснить, как работает то или иное устройство, но не может объяснить, почему оно не работает.

    Инженер – это человек, который может объяснить, как работает то или иное устройство, но не может объяснить, почему оно не работает.

    Инженер – это человек, который может объяснить, как работает то или иное устройство, но не может объяснить, почему оно не работает.

  • <div class="uk-section-primary uk-preserve-color">

    <div uk-sticky="animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent uk-light; top: 200">

        <nav class="uk-navbar-container">
            <div class="uk-container uk-container-expand">
                <div uk-navbar>

                    <ul class="uk-navbar-nav">
                        <li class="uk-active"><a href="#">Активный</a></li>
                        <li>
                            <a href="#">Родитель</a>
                            <div class="uk-navbar-dropdown">
                                <ul class="uk-nav uk-navbar-dropdown-nav">
                                    <li class="uk-active"><a href="#">Активный</a></li>
                                    <li><a href="#">Ссылка</a></li>
                                    <li><a href="#">Ссылка</a></li>
                                </ul>
                            </div>
                        </li>
                        <li><a href="#">Ссылка</a></li>
                    </ul>

                </div>
            </div>
        </nav>
    </div>

    <div class="uk-section uk-light">
        <div class="uk-container">

            <p>Инженер – это человек, который может объяснить, как работает то или иное устройство, но не может объяснить, почему оно не работает.</p>

            <p>Инженер – это человек, который может объяснить, как работает то или иное устройство, но не может объяснить, почему оно не работает.</p>

            <p>Инженер – это человек, который может объяснить, как работает то или иное устройство, но не может объяснить, почему оно не работает.</p>

        </div>
    </div>

</div>

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

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

Опция Значение По умолчанию Описание
align String left Позиция выпадающего меню: left, right, center
mode String click, hover Режим активации тригера: click, hover
delay-show Number 0 Задержка появления в миллисекундах.
delay-hide Number 800 Задержка исчезновения в миллисекундах.
boundary CSS selector window Устанавливает границу, относительно которой будет выравниваться выпадающее меню.
boundary-align Boolean false Выровнивание раскрывающегося списка по границе.
offset Number 0 Смещение выпадающего контейнера.
dropbar Boolean false Включить или отключить поведение dropbar.
dropbar-mode String slide Режим появления Dropbar: slide, push
duration Number 200 Длительность перехода Dropbar.

JavaScript

Подробнее об использовании компонентов JavaScript.

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

UIkit.navbar(element, options);

События

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

Имя Описание
beforeshow Срабатывает до показа объекта. Может отменить появление, вернув false.
show Срабатывает после появления объекта.
shown Запускается после завершения анимации появления объекта.
beforehide Срабатывает до скрытия объекта. Может отменить скрытие, вернув false.
hide Срабатывает после запуска анимации исчезнования объекта.
hidden Срабатывает после исчезновения объекта