Панель навигации

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

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

Компонент Navbar состоит из самой панели навигации и одной или нескольких навигаций.

Класс Описание
.uk-navbar Добавьте этот класс к элементу <nav>, чтобы применить компонент Navbar.
.uk-navbar-nav Добавьте этот класс к элементу <ul> для создания навигации.
В качестве пунктов меню, в списке, используйте тег <a>.
.uk-active Добавьте этот класс, чтобы применить активное состояние.
.uk-parent Добавьте этот класс, чтобы указать родительский пункт меню.

Пример

Разметка

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

Добавьте класс .uk-navbar-flip к элементу <div>, чтобы сгруппировать элементы и разместить навигацию по правой стороне.

Пример

Разметка

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

    <div class="uk-navbar-flip">    <!-- Устанавливаем по правой стороне-->
        <ul class="uk-navbar-nav">
            <li><a href="">...</a></li>
        </ul>
    </div>
</nav>

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

Пример

Разметка

<nav class="uk-navbar">
    <ul class="uk-navbar-nav">
        <li>
            <a href="" class="uk-navbar-nav-subtitle">
            Пункт меню
            <div>Подзаголовок</div>
            </a>
        </li>
    </ul>
</nav>

Контент

Вы также можете добавить пользовательский контент на панель навигации, например текст, иконки, кнопки, формы или даже переключатель toggle. По умолчанию JavaScript не подключен к переключателю toggle. Например, вы можете добавить навигацию из компонента Off-canvas.

Класс Описание
.uk-navbar-content Добавьте этот класс к элементу <div>, который служит контейнером для вашего контента по умолчанию. Содержание будет центрировано вертикально.
.uk-navbar-brand Добавьте этот класс к элементу <a> или <div>, при размещении своего бренда, логотипа.
.uk-navbar-center Добавьте этот класс для центрирования вашего контента или бренда в панели Navbar.
Элемент должен быть последним дочерним элементом в панели навигации.
.uk-navbar-toggle Добавьте этот класс к элементу <a> или <div>, чтобы создать иконку в качестве переключателя toggle.
.uk-navbar-toggle-alt Добавьте этот класс, чтобы создать альтернативный значок в качестве переключателя toggle.

Пример

Разметка

<nav class="uk-navbar">
    <a href="" class="uk-navbar-brand">...</a>
    <ul class="uk-navbar-nav">...</ul>
    <div class="uk-navbar-content">...</div>
    <div class="uk-navbar-content uk-navbar-center uk-hidden-small">...</div>
    <a href="" class="uk-navbar-toggle"></a>
</nav>

Отзывчивая видимость

Чтобы скрыть или отобразить определенные элементы панели навигации UIkit 2, просто добавьте один из адаптивных классов видимости из компонента Utility. Это удобно, например, если вы хотите использовать переключатель toggle в мобильной навигации.

Пример

Измените размер окна вашего браузера, чтобы увидеть его в действии.

Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах.

Разметка

<nav class="uk-navbar">
    <ul class="uk-navbar-nav uk-hidden-small">...</ul>
    <a href="#my-id" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>
</nav>

<div id="my-id" class="uk-offcanvas">
    ...
</div>

Примечание В этом примере использовалась боковая панель off-canvas из компонента Off-canvas.

Модификаторы

Добавьте классы-модификаторы, чтобы отобразить панель навигации в другом стиле. Эти модификаторы можно комбинировать друг с другом.

Добавьте класс .uk-navbar-attached для изменения стиля панели навигации, который будет расположен в верхней части области просмотра. Например, закругленные углы будут удалены.

Пример

Разметка

<nav class="uk-navbar uk-navbar-attached">
    ...
</nav>

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

Пример

Разметка

<nav class="uk-navbar">

    <ul class="uk-navbar-nav">
        <li class="uk-active"><a href="">Активный</a></li>
        <li><a href="">Пункт меню</a></li>
        <li class="uk-parent" data-uk-dropdown>
            <a href="">Родительский <i class="uk-icon-caret-down"></i></a>
            
            <div class="uk-dropdown uk-dropdown-navbar">
                <ul class="uk-nav uk-nav-navbar">
                    <li><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>
    
</nav>