Defines different styles for the navigation bar.

\n\n

Usage

\n\n

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

\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
ClassDescription
.uk-navbarAdd this class to a <nav> element to define the Navbar component.
.uk-navbar-navAdd this class to a <ul> element to create a navigation. Use <a> elements as menu items within the list.
.uk-activeAdd this class to a list item to apply an active state.
.uk-parentAdd this class to indicate a parent menu item.
\n
\n\n

Example

\n\n \n\n

Markup

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

Navbar flip

\n\n

Add the .uk-navbar-flip class to a <div> element to group and align navigations and items to the right.

\n\n

Example

\n\n \n\n

Markup

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

Navbar subtitle

\n\n

Add the .uk-navbar-nav-subtitle class to an <a> element in the list item to indicate that it has a subtitle. Use a <div> element for the subtitle itself.

\n\n

Example

\n\n \n\n

Markup

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

Content

\n\n

You can also add custom content to the navbar, like text, icons, buttons, forms or even a toggle. By default, there is no JavaScript attached to the toggle. As an example, you can add an off-canvas navigation from the Off-canvas component.

\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
ClassDescription
.uk-navbar-contentAdd this class to a <div> element, which serves as a container for your custom content. The content will be centered vertically.
.uk-navbar-brandAdd this class to an <a> or <div> element to indicate your brand.
.uk-navbar-centerAdd this class to center your navbar content or brand. The element needs to be the last child in the navbar.
.uk-navbar-toggleAdd this class to an <a> or <div> element to create an icon as a toggle.
.uk-navbar-toggle-altAdd this class to create an alternative icon as a toggle.
\n
\n\n

Example

\n\n
\n\n \n\n
\n\n
\n\n \n\n
\n\n
\n\n \n\n
\n\n

Markup

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

Responsive visibility

\n\n

To hide or display certain navbar items, just add one of the responsive visibility classes from the Utility component. This comes in handy, if you want to use a toggle to trigger a mobile navigation for example.

\n\n

Example

\n\n

Resize your browser window to see it in action.

\n\n \n\n
\n\n
\n\n
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
\n\n
\n\n
\n\n

Markup

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

NOTE In this example we added an off-canvas sidebar fron the Off-canvas component.

\n\n
\n\n

Modifiers

\n\n

To display the navbar in a different style, just add modifier classes. These modifiers can be combined with each other

\n\n

Navbar attached

\n\n

Add the .uk-navbar-attached class to optimize the navbar’s styling to be attached to the top of the viewport. For example, rounded corners will be removed.

\n\n

Example

\n\n \n\n

Markup

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

A navbar can contain a dropdown from the Dropdown component. Just add the .uk-dropdown-navbar modifier to the dropdown, so it fits perfectly into the navbar’s styling.

\n\n

Example

\n\n \n