Navbar

Similar to Nav, Navbar is a base component used to create other horizontal navigation like bars (e.g., Navigation Bar, Management Bar, and Application Bar). Navbar on its own doesn't have any special color styling. Colors can be modified using a combination of Bootstrap 4's Navbar color utilities .navbar-light, .navbar-dark and background utilities. We don't recommend using color utilities as it's hard to keep track of the colors in large applications, rather we recommend scoping your color class to the component and using the clay-navbar-variant($map) mixin to customize colors that are not covered by any of the Navbar variants.

Navbar Expand Md

Navbar with Form

The class .navbar-form should be wrapped around your form. It adds the proper spacing between your form and other navbar components e.g. .navbar-nav.

The class .navbar-form-autofit should be added to .navbar-form to make the form expand to fill the remaining space.

Alternate Navbar Toggler Style

In mobile screen sizes, style the navbar toggler like a navbar navigation item with navbar-toggler-link. Also use this pattern when you want the search bar to be easily accessible in both mobile and desktop.

Navbar Expand

Use the .navbar-expand class on .navbar to preserve desktop navbar styles in mobile. It's useful when there are only one or two links in the navbar; where collapsing doesn't make sense.

Navbar-breakpoint-d-{block|inline-block|flex|none}

navbar-breakpoint-d-block is a helper class to show content at it's expand breakpoint e.g. for .navbar-expand-md, navbar-breakpoint-d-block will display: block !important; at screen widths greater than 767px.

Navbar-breakpoint-down-d-block, Navbar-breakpoint-down-d-inline-block, Navbar-breakpoint-down-d-flex, Navbar-d-breakpoint-down-none

navbar-breakpoint-down-d-none is a helper class to hide content at it's expand breakpoint e.g. for .navbar-expand-md, navbar-breakpoint-down-d-none will display: none; at screen widths less than or equal to 767px.

Navbar Toggler

navbar-toggler is the button that opens and closes the navbar in mobile, must be used with the collapse plugin.

Navbar Toggler Link

navbar-toggler-link styles the navbar-toggler like a navbar link.

Navbar Collapse

navbar-collapse is the container for all content that should be collapsed into a collapsible menu in mobile.

Navbar Collapse Absolute

Add navbar-collapse-absolute to navbar to turn navbar-collapse from a relative positioned menu into an absolutely positioned collapsible menu.