Компонент Панель навигации Navbar
Создайте панель навигации, которую можно использовать для навигации по основному сайту. Создание, примеры, разметка.
Руководство
Панель 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, ни контейнер навигационной панели не имеют горизонтального отступа. Чтобы установить горизонтальный отступ, как и для остальной части веб-страницы, используйте компонент Container.
<nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar>…</div>
</div>
</nav>
-
-
<nav class="uk-navbar-container"> <div class="uk-container"> <div 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> </div> </nav>
Несколько меню
Несколько меню в панели навигации Navbar
Вы можете разместить более одной навигации внутри navbar-контейнера. Таким образом, вы можете иметь выровненную по левому краю, центрированную и выровненную по правому краю навигацию внутри одной и той же панели навигации 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-center"> <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-divider"></li> <li> <a href="https://asuikit.com/v3"> <span uk-icon="uikit"></span> Фреймворк Uikit 3 </a> </li> </ul> </div> </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>
Модификатор «Transparent»
При использовании изображения или цветного фона, для раздела «Hero» на вашем сайте, может понадобиться сделать прозрачную панель навигации. Просто добавьте к элементу <nav>
класс .uk-navbar-transparent
.
.uk-light
или .uk-dark
из компонента Инверсия,
чтобы настроить соответствующие стили, цвет панели навигации.
<nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>...</nav>
-
-
<div class="uk-position-relative"> <img src="/demo/img/light.jpg" width="1800" height="1200" alt="Тестовое изображение" loading="lazy"> <div class="uk-position-top"> <nav class="uk-navbar-container uk-navbar-transparent"> <div class="uk-container"> <div 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> </div> </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> Активный <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
из компонента полезных дополнительных классов UIkit в элемент <a>
или <div>
, чтобы обозначить логотип.
-
-
<nav class="uk-navbar-container"> <div class="uk-container"> <div uk-navbar> <div class="uk-navbar-left"> <a class="uk-navbar-item uk-logo" href="/" aria-label="На главную">Лого</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> </div> </div> </nav>
Центрированный логотип
Вы можете создать разделенное меню с центрированным логотипом.
Просто добавьте класс uk-navbar-center-left
в одну панель навигации и класс uk-navbar-center-right
в другую
в том же контейнере панели navbar. Таким образом ваш логотип будет по центру, а меню будет выровнено слева и справа.
<div class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-center">
<div class="uk-navbar-center-left">...</div>
<a href="" class="uk-navbar-item uk-logo">ЛОГО</a>
<div class="uk-navbar-center-right">...</div>
</div>
</div>
-
-
<nav class="uk-navbar-container uk-margin" uk-navbar> <div class="uk-navbar-center"> <div class="uk-navbar-center-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> </ul> </div> <a class="uk-navbar-item uk-logo" href="#">БРЕНД</a> <div class="uk-navbar-center-right"> <ul class="uk-navbar-nav"> <li><a href="#">Матроскин</a></li> </ul> </div> </div> </nav>
Navbar и Toggle
Navbar и переключатель Toggle
Добавьте класс .uk-navbar-toggle
и атрибут uk-navbar-toggle-icon
к элементу <a>
или <div>
,
чтобы создать значок в качестве переключателя меню.
По умолчанию JavaScript не подключен к переключателю. Например, вы можете добавить навигацию вне холста из компонента Offcanvas или модальное окно из компонента 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-container uk-margin"> <div class="uk-container"> <div uk-navbar> <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> </div> </div> </nav>
Смена иконки меню при переключении
Чтобы заменить иконку меню при переключении с плавной анимацией,
с иконки меню «гамбургер» на значок закрытия, добавьте класс .uk-navbar-toggle-animate
.
<a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href=""></a>
-
-
<nav class="uk-navbar-container"> <div class="uk-container"> <div uk-navbar="mode: click"> <div class="uk-navbar-left"> <a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon 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> </div> </div> </div> </nav>
Navbar и Dropdown
Выпадающий список панели навигации
Панель навигации может содержать раскрывающийся список компонента Dropdown.
Просто добавьте в раскрывающийся список модификатор .uk-navbar-dropdown
, чтобы он идеально вписывался в стиль навигационной панели.
Добавьте класс .uk-navbar-dropdown-nav
к навигации внутри раскрывающегося меню Dropdown.
<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>
Чтобы определить подзаголовок (субтитр) в dropdown-меню, добавьте к элементу класс .uk-nav-subtitle
.
...
<ul class="uk-nav uk-navbar-dropdown-nav">
...
<div class="uk-nav-subtitle">подзаголовок</div>
...
</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="#">Родительский</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>
Режим «Click»
Родительский элемент внутри панели навигации Navbar может быть включен (открываться) либо при наведении курсора мыши,
либо при нажатии на так называемый переключатель. Просто добавьте к атрибуту uk-navbar
опцию mode: click
,
чтобы меню начало открываться при клике.
<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="javascript:;">Активное</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="javascript:;">Фреймворк</a></li> </ul> </div> </nav>
Dropdown:: Расположение: align, target
Align. Выравнивание. Позиция
По умолчанию выпадающие списки расположены под элементом панели навигации и выровнены по левому краю.
Чтобы изменить выравнивание, установите опцию align
для атрибута uk-navbar
.
Позиция | Описание |
---|---|
left |
Выравнивает раскрывающееся содержимое по левому краю. |
right |
Выравнивает раскрывающееся содержимое по правому краю. |
center |
Выравнивает раскрывающееся содержимое по центру. |
<div uk-navbar="align: center"></div>
-
-
<div class="uk-navbar-container" uk-navbar="align: center"> <div class="uk-navbar-center"> <ul class="uk-navbar-nav"> <li> <a href="#">Center</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> </div>
Target
Выпадающие списки Dropdown могут быть выровнены по "границе" навигационной панели.
Просто добавьте к атрибуту uk-navbar
параметр target: SELECTOR
.
Добавьте параметр align: left
, align: center
или align: right
, чтобы изменить выравнивание.
<nav class="uk-navbar-container" uk-navbar="target: !.uk-navbar">...</nav>
Открытие выпадающего по центру
-
-
<nav class="uk-navbar-container" uk-navbar="target: !.uk-navbar; 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-drop-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-drop-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>
Панель «Dropbar»
Панель Dropbar занимает всю ширину панели навигации и
отображает раскрывающийся список без стилей по умолчанию.
Чтобы разместить выпадающее меню внутри такой dropbar-панели,
добавьте опцию dropbar: true
в панель uk-navbar
.
При желании, можно использовать параметр dropbar-anchor
,
чтобы указать, после какого элемента в разметку будет вставлена панель полной ширины.
<nav class="uk-navbar-container" uk-navbar="dropbar: true;">...</nav>
-
-
<div class="uk-position-relative"> <nav class="uk-navbar-container"> <div class="uk-container"> <div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container; target-y: !.uk-navbar-container"> <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-drop-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><!-- // .uk-navbar-left --> <div class="uk-navbar-right"> <ul class="uk-navbar-nav"> <li> <a href="#dropbar">Dropbar</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><!-- // .uk-navbar-right --> </div> </div> </nav> </div>
Drop: «Stretch»
Чтобы растянуть меню,
распределить пространство выравнивая выпадающий список (меню Dropdown) по ширине,
используйте компонент Drop (Выпадение) вместе с его возможностями позиционирования,
а именно, нам нужен параметр stretch
.
<div class="uk-navbar-dropdown" uk-drop="boundary: !.uk-navbar; stretch: x; flip: false">…</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: !.uk-navbar-nav; stretch: x; flip: false"> <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: !.uk-navbar; stretch: x; flip: false"> <div class="uk-drop-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></li> </ul> </div> </nav>
Иконка
Добавление иконки в родительский пункт меню
Для того чтобы создать родительский значок, просто добавьте атрибут uk-navbar-parent-icon
к элементу <span>
.
<ul class="uk-navbar-nav">
<li>
<a href="">Родитель <span uk-navbar-parent-icon></span></a>
<div class="uk-navbar-dropdown">…</div>
</li>
</ul>
-
-
<nav class="uk-navbar-container"> <div class="uk-container"> <div uk-navbar> <div class="uk-navbar-left"> <ul class="uk-navbar-nav"> <li class="uk-active"><a href="#">Активное</a></li> <li> <a href="#">Родительский<span uk-navbar-parent-icon></span></a> <div class="uk-navbar-dropdown"> <ul class="uk-nav uk-navbar-dropdown-nav"> <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="#">Родительский<span uk-navbar-parent-icon></span></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> </ul> </div> </li> </ul> </div> </div> </div> </nav>
Dropdown: Ширина, столбцы, сетка (grid)
Несколько столбцов (колонок) и ширина в навигации
Компонент раскрывающегося списка Dropdown позволяет упорядочить раскрывающийся контент в столбцах (колонках).
Вы можете поместить сетку (grid) из компонента Grid при построении шаблона.
Если сетка должна автоматически складываться всякий раз, когда раскрывающийся список больше не соответствует своему контейнеру,
просто добавьте класс .uk-drop-grid
.
Колонки будут аккуратно складываться друг под друга, если они не помещаются больше в контейнер.
Чтобы разместить до пяти колонок, необходимо добавить один из следующих классов:
Класс | Описание |
---|---|
.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-drop-grid uk-child-width-1-2" uk-grid>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">...</ul>
</div>
<div>...</div>
</div>
</div>
Навигация: утроенная ширина раскрывающегося списка в 2 колонки
-
-
<nav class="uk-navbar-container uk-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-3"> <div class="uk-drop-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>
Sticky: Липкая навигация
Sticky Navbar. Липкая (закреплённая) панель навигации
Для закреплённой панели меню Navbar необходимо установить панель навигации внутри контейнера с атрибутом uk-sticky
из компонента Sticky.
Сама фиксированная панель навигации имеет класс-модификатор uk-navbar-sticky
,
который обеспечивает своеобразный стиль в липком состоянии
когда панель закреплена (например, добавляется тень от блока).
Чтобы позволить липкому компоненту динамически добавлять и удалять этот класс,
установите cls-active: uk-navbar-sticky
.
Чтобы гарантированно добавить класс в navbar-контейнер, установите sel-target: .uk-navbar-container
.
<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 uk-box-shadow-small; end: #example-sticky-dropbar; offset: 60"> <nav class="uk-navbar-container"> <div class="uk-container"> <div 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> </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>
Прикреплённая навигация с панелью Dropbar
-
-
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky uk-box-shadow-small; end: #transparent-sticky-navbar; offset: 60"> <nav class="uk-navbar-container" uk-navbar="dropbar: true;"> <div class="uk-navbar-left"> <ul class="uk-navbar-nav"> <li class="uk-active"><a href="#">Активное</a></li> <li> <a href="#">Dropbar</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="#">Пункт меню Dropbar</a></li> <li><a href="#">Ещё названице</a></li> </ul> </div> </li> <li><a href="#">Пунктик</a></li> </ul> </div> </nav> </div>
Sticky: Прозрачная панель
Прозрачная липкая панель навигации
Когда вы используете прозрачную панель навигации,
ваша разметка содержит класс .uk-navbar-transparent
вместе с .uk-light
или .uk-dark
.
Когда навигационная панель прикреплена (см. закреплённая навигация),
обычно требуется удалить эти классы и добавить их, когда навигационная панель вернется в обычное незакрепленное состояние.
Для этого установите cls-inactive: uk-navbar-transparent uk-light
.
По умолчанию моментальное переключение выглядит не очень привлекательно.
Вместо этого мы можем установить start: 300
, чтобы навигационная панель сначала исчезла, а затем снова появилась,
когда пользователь прокрутил страницу на 300 пикселей ниже.
В этом случае мы также можем определить, чтобы навигационная панель появлялась с анимацией,
для этого просто установите 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;
start: 200">
<nav class="uk-navbar-container" uk-navbar>
...
</nav>
</div>
-
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами.
Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в рот. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики.
Великий Оксмокс предупреждал ее о злых запятых, диких знаках вопроса и коварных точках с запятой, но текст не дал сбить себя с толку. Он собрал семь своих заглавных букв, подпоясал инициал за пояс и пустился в дорогу.
-
<div class="uk-section-secondary 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; start: 200; end: #component-options; offset: 60"> <nav class="uk-navbar-container"> <div class="uk-container uk-container-expand"> <div uk-navbar="align: center"> <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>Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в рот. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики.</p> <p>Великий Оксмокс предупреждал ее о злых запятых, диких знаках вопроса и коварных точках с запятой, но текст не дал сбить себя с толку. Он собрал семь своих заглавных букв, подпоясал инициал за пояс и пустился в дорогу.</p> </div> </div> </div>
JavaScript
Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.
Инициализация
UIkit.navbar(element, options);
События
Следующие события будут инициированы для элементов компонента «Navbar»:
Имя события | Описание |
---|---|
beforeshow |
Срабатывает до показа элемента. Можно предотвратить отображение, вызвав событие preventDefault() . |
show |
Срабатывает после показа элемента. |
shown |
Запускается после завершения анимации показанного элемента. |
beforehide |
Срабатывает до того, как элемент скрыт. Можно предотвратить отображение, вызвав событие preventDefault() . |
hide |
Запускается после запуска анимации скрытия элемента. |
hidden |
Срабатывает после того, как элемент скрыт. |
Доступность
Компонент «Панель навигации» Navbar придерживается Disclosure Navigation Menu и автоматически устанавливает соответствующие роли, состояния и свойства WAI-ARIA.
-
Элементы навигации и элементы переключения имеют
aria-expanded
состояние и свойствоaria-haspopup
. - Переключаемые элементы также имеют свойство
aria-label
.
Взаимодействие с клавиатурой
Доступ к компоненту Navbar можно получить с помощью клавиатуры используя следующие клавиши:
- Клавиши tab или shift+tab перемещают фокус внутрь или за пределы панели навигации.
- Клавиши left/right arrow перемещаются по элементам навигационной панели Navbar. В режиме наведения раскрывающийся список откроется автоматически. Если фокус находится на последнем элементе, он перемещается на первый элемент.
- Клавиши enter или space открывают и закрывают раскрывающийся список выбранного элемента панели навигации.
- Клавиши up/down arrow перемещаются по элементам навигации в раскрывающемся списке. Если фокус находится на последнем элементе, он перемещается на первый элемент.
- Клавиша esc закрывает любой раскрывающийся список, даже если фокус переместился на другой элемент.
Интернационализация
Ключ | По умолчанию | Описание |
---|---|---|
label |
Open Menu |
aria-label атрибут. |
Подробнее о переводе компонентов.