Компонент Панель навигации 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>

Ни сама навигационная панель 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>

Пользовательский контент

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

Добавьте класс .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>

Выпадающий список панели навигации

Панель навигации может содержать раскрывающийся список компонента 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 Navbar. Липкая (закреплённая) панель навигации

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

Сама фиксированная панель навигации имеет класс-модификатор uk-navbar-sticky, который обеспечивает своеобразный стиль в липком состоянии когда панель закреплена (например, добавляется тень от блока). Чтобы позволить липкому компоненту динамически добавлять и удалять этот класс, установите cls-active: uk-navbar-sticky. Чтобы гарантированно добавить класс в navbar-контейнер, установите 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 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>

Параметры для атрибута

При использовании компонента Navbar к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

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

Опция Значение По умолчанию Описание
align String left Выравнивание Dropdown: left, right, center
dropbar Boolean false Включить или отключить поведение dropbar.
dropbar-anchor CSS selector false Если установлено, выпадающая панель будет вставлена после элемента anchor.
stretch Boolean,
x, y		 true Растянуть содержимое по обеим (true) или заданным осям.
mode click, hover click, hover Разделенный запятыми список режимов выпададения: click, hover
delay-show Number 0 Время задержки в режиме наведения до появления раскрывающегося списка в миллисекундах.
delay-hide Number 800 Время задержки в режиме наведения до скрытия раскрывающегося списка в миллисекундах.
boundary CSS selector true Область, которую dropdown не может превышать, заставляя его переворачиваться и сдвигаться. По умолчанию ближайший предок прокрутки.
target Boolean, CSS selector false Элемент, к которому позиционируется dropdown
(true for window).
target-x Boolean, CSS selector false Ось X элемента, на которую позиционируется dropdown
(true for window).
target-y Boolean, CSS selector false Ось Y элемента, на которую позиционируется dropdown
(true for window).
offset Number 0 Смещение выпадающего контейнера.
animation String uk-animation-fade Имена анимаций, разделенные пробелами.
animate-out Boolean false Использовать анимацию при закрытии.
duration Number 200 Продолжительность анимации.
container Boolean false Определите целевой контейнер с помощью селектора, чтобы указать, где раскрывающийся список должен быть добавлен в DOM.

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 закрывает любой раскрывающийся список, даже если фокус переместился на другой элемент.

Интернационализация

Компонент Toggle использует следующие строки перевода.
Ключ По умолчанию Описание
label Open Menu aria-label атрибут.

Подробнее о переводе компонентов.