Defines different styles for the navigation bar.
Usage
The Navbar component consists of the navbar itself and one or more navigations.
| Class | Description |
|---|---|
.uk-navbar |
Add this class to a <nav> element to define the Navbar component. |
.uk-navbar-nav |
Add this class to a <ul> element to create a navigation. Use <a> elements as menu items within the list. |
.uk-active |
Add this class to a list item to apply an active state. |
.uk-parent |
Add this class to indicate a parent menu item. |
Example
Markup
<nav class="uk-navbar">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="">...</a></li>
<li><a href="">...</a></li>
<li class="uk-parent"><a href="">...</a></li>
</ul>
</nav>Navbar flip
Add the .uk-navbar-flip class to a <div> element to group and align navigations and items to the right.
Example
Markup
<nav class="uk-navbar">
<div class="uk-navbar-flip">
<ul class="uk-navbar-nav">
<li><a href="">...</a></li>
</ul>
</div>
</nav>Navbar subtitle
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.
Example
Markup
<nav class="uk-navbar">
<ul class="uk-navbar-nav">
<li><a href="" class="uk-navbar-nav-subtitle">
...
<div>...</div>
</a></li>
</ul>
</nav>Content
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.
| Class | Description |
|---|---|
.uk-navbar-content |
Add this class to a <div> element, which serves as a container for your custom content. The content will be centered vertically. |
.uk-navbar-brand |
Add this class to an <a> or <div> element to indicate your brand. |
.uk-navbar-center |
Add this class to center your navbar content or brand. The element needs to be the last child in the navbar. |
.uk-navbar-toggle |
Add this class to an <a> or <div> element to create an icon as a toggle. |
.uk-navbar-toggle-alt |
Add this class to create an alternative icon as a toggle. |
Example
Markup
<nav class="uk-navbar">
<a href="" class="uk-navbar-brand">...</a>
<ul class="uk-navbar-nav">...</ul>
<div class="uk-navbar-content">...</div>
<div class="uk-navbar-content uk-navbar-center">...</div>
<a href="" class="uk-navbar-toggle"></a>
</nav>Responsive visibility
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.
Example
Resize your browser window to see it in action.
Markup
<nav class="uk-navbar">
<ul class="uk-navbar-nav uk-hidden-small">...</ul>
<a href="#my-id" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>
</nav>
<div id="my-id" class="uk-offcanvas">
...
</div>NOTE In this example we added an off-canvas sidebar fron the Off-canvas component.
Modifiers
To display the navbar in a different style, just add modifier classes. These modifiers can be combined with each other
Navbar attached
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.
Example
Markup
<nav class="uk-navbar uk-navbar-attached">...</nav>Navbar with dropdowns
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.