Navbar

Create a navigation bar that can be used for your main site navigation.

Navbar

Create a navigation bar that can be used for your main site navigation.

Usage

The Navbar component consists of a navbar container, the navbar itself and one or more navigations.

ElementDescription
uk-navbarAdd this attribute to a <nav> element to define the Navbar component.
.uk-navbar-containerAdd this class to the same <nav> element or a parent element to add the navbar background style.
.uk-navbar-left
.uk-navbar-center
.uk-navbar-right		Add one of these classes to a <div> element to align the navigation.
.uk-navbar-navAdd this class to a <ul> element to create the navigation. Use <a> elements as menu items within the list.
.uk-parentAdd this class to indicate a parent menu item.
.uk-activeAdd this class to indicate an active menu item.
<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>

Multiple navigations

You can place more than one navigation inside a navbar container. That way you can have a left-aligned, a centered and a right-aligned navigation inside the same 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>

Click mode

A parent item inside the navbar can be enabled by either hovering or clicking the toggle. Just add the mode: click option to the uk-navbar attribute.

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

Transparent modifier

When using an image or colored background for the hero section of your website, you might want to turn the navbar transparent. Just add the .uk-navbar-transparent class to the <nav> element. If necessary, add the .uk-light or .uk-dark class from the Inverse component to adjust the navbar color.

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

Subtitle

To define a subtitle, create a <div> element inside an item’s <a> element. Add the .uk-navbar-subtitle class to another <div> element.

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

Content item

You can also add custom content to the navbar, like text, icons, buttons or forms. Add the .uk-navbar-item class to a <div> element that serves as a container for your content.

<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>

Add the .uk-logo class from the Utility component to an <a> or <div> element to indicate your brand.

You can create a split menu with a centered logo. Just add the uk-navbar-center-left class to one navbar and the uk-navbar-center-right class to another within the same navbar container. This will keep your logo centered and align the menus to the left and right.

<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>

Toggle item

Add the .uk-navbar-toggle class and the uk-navbar-toggle-icon attribute to an <a> or <div> element to create an icon as a toggle. By default, there is no JavaScript attached to the toggle. As an example, you can add an offcanvas navigation from the Offcanvas component or a modal from the Modal component.

<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>

To changes toggle icon from a menu icon to a close icon with a smooth animation, add the .uk-navbar-toggle-animate class.

<a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href=""></a>

A navbar can contain a dropdown from the Dropdown component. Just add the .uk-navbar-dropdown modifier to the dropdown so it fits perfectly into the navbar styling. Add the .uk-navbar-dropdown-nav class to navs inside the 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>

Parent icon

To create a parent icon, just add the uk-navbar-parent-icon attribute to a <span> element.

<ul class="uk-navbar-nav">
    <li>
        <a href="">Parent <span uk-navbar-parent-icon></span></a>
        <div class="uk-navbar-dropdown">…</div>
    </li>
</ul>

Multiple columns

The Dropdown component allows you to arrange the dropdown content in columns. To accommodate up to five columns, you also need to add one of the following classes. Columns will stack if they no longer fit into the container.

ClassDescription
.uk-navbar-dropdown-width-2Add this class to double the dropdown’s width.
.uk-navbar-dropdown-width-3Add this class to triple the dropdown’s width.
.uk-navbar-dropdown-width-4Add this class to multiply the dropdown’s width by four.
.uk-navbar-dropdown-width-5Add this class to multiply the dropdown’s width by five.
<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>

Alignment

By default, the dropdowns are positioned below the navbar item and are aligned to the left. To change the alignment, set the align option to the uk-navbar attribute.

PositionDescription
leftAligns the dropdowns to the left.
rightAligns the dropdowns to the right.
centerAligns the dropdowns to the center.
<div uk-navbar="align: center"></div>

Target

By default, the dropdowns are aligned to their navbar item. To position the dropdown to a different element, just add target: SELECTOR option to the uk-navbar attribute.

<nav class="uk-navbar-container" uk-navbar="target: !.uk-navbar">…</nav>

Stretch

To stretch a dropdown, use the Drop component and its stretch option. In the following example the dropdown is aligned to the boundary of the parent navbar.

<div class="uk-navbar-dropdown" uk-drop="boundary: !.uk-navbar; stretch: x; flip: false">…</div>

Dropbar

A dropbar extends to the full width of the navbar and displays the dropdown without its default styling. To place dropdowns inside such a dropbar, add the dropbar: true option to the uk-navbar.

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

For a basic sticky navbar, wrap the navbar inside a container with the uk-sticky attribute from the Sticky component.

The navbar itself has a modifier class uk-navbar-sticky that ensures an optimized styling for the sticky state (for example, an additional box shadow). To let the sticky component dynamically add and remove that class, set cls-active: uk-navbar-sticky. To ensure that the class is added to the navbar container, set sel-target: .uk-navbar-container.

Note You can view more examples in the tests for the Sticky Navbar.

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

Instead of using a Dropdown, you can show a Dropbar, which means that the subnavigation is displayed in a full width below the navbar. Simply set dropbar: true inside the uk-navbar attribute.

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

Transparent sticky navbar

When you use a transparent navbar, your markup contains the .uk-navbar-transparent class together with .uk-light or .uk-dark. When the navbar is sticky, it is usually required to remove these classes and add them when the navbar returns to the non-sticky state. To do that, set cls-inactive: uk-navbar-transparent uk-light.

By default, the immediate toggling of classes does not look ideal. Instead, we can set start: 200 to let the navbar disappear and then re-appear when the user has scrolled 200px past the navbar. In that case you can also allow the navbar to slide in with an animation. Just set animation: uk-animation-slide-top.

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

Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

OptionValueDefaultDescription
alignStringleftDropdown alignment: left, right, center
stretchBoolean, x, ytrueStretch dropdown on both (true) or given axis.
modeclick, hoverclick, hoverComma-separated list of dropdown trigger behavior modes.
delay-showNumber0Delay time in hover mode before a dropdown is shown in ms.
delay-hideNumber800Delay time in hover mode before a dropdown is hidden in ms.
displaydynamic, staticdynamicDisable dynamic positioning while scrolling by setting this option to static.
boundaryCSS selectortrueThe area the dropdown can’t exceed causing it to flip and shift. By default, the nearest scrolling ancestor.
targetBoolean, CSS selectorfalseThe element the dropdown is positioned to (true for window).
target-xBoolean, CSS selectorfalseThe element’s X axis the dropdown is positioned to (true for window).
target-yBoolean, CSS selectorfalseThe element’s Y axis the dropdown is positioned to (true for window).
insetBooleanfalsePosition inside its target.
flipBooleanfalseFlips the dropdown along the main axis if it overflows the boundary.
shiftBooleantrueShifts the dropdown along the cross axis if it overflows the boundary.
offsetNumber0The dropdown offset.
animationStringuk-animation-fadeSpace-separated names of animations. Comma-separated for animation out.
animation-outBooleanfalseUse animation when closing the drop.
bg-scrollBooleantrueAllow background scrolling while dropdown is opened.
durationNumber200The animation duration.
containerBooleanfalseDefine a target container via a selector to specify where the dropdown should be appended in the DOM.

JavaScript

Learn more about JavaScript components.

Initialization

UIkit.navbar(element, options);

Events

The following events will be triggered on elements with this component attached:

NameDescription
beforeshowFires before an item is shown. Can prevent showing by calling preventDefault() on the event.
showFires after an item is shown.
shownFires after the item’s show animation has completed.
beforehideFires before an item is hidden. Can prevent hiding by calling preventDefault() on the event.
hideFires after an item’s hide animation has started.
hiddenFires after an item is hidden.