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