Navbar

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

The Navbar component consists of brand container and one or more navigations. Navigation menu can use the standard RapidWeaver or the Menu Builder, allowing for greater flexibility and use of text and buttons.

Multiple navigations

Invert modifier with Navbar and Sticky stacks

Automatically display alternative logo and navigation for light and dark backgrounds.
  • Place the Navbar into a Sticky stack
  • Set the Container ID to match the scrollable container
Sticky container disabler

Centered logo

This option display the logo centered in the Navbar container, with left and right navigations.

Subtitles

Justify

Content and animated toggle in Navbar

Use the Empty item to add content to a Navbar in Menu Builder mode. For the animated toggle add the following classes and attribute to a Navbar parent item:
  • Classes: uk-navbar-toggle uk-navbar-toggle-animate
  • Attribute: uk-navbar-toggle-icon

Search component

Enable Search in Navbar, with layout options for overlay, drop and modal. For the search results use the built-in engine or any 3rd-party search stack. See more examples at the Search stack page and watch the video tutorial.