Navbar

Basic example

Navbars require a wrapping <Navbar> with expand = {sm|md|lg|xl|xxl} props for responsive collapsing and color scheme classes.

Brand

The <Navbar.Brand> can be applied to most elements, but an anchor works best, as some elements might require utility classes or custom styles.

Image

You can replace the text within the .navbar-brand with an <img>.

Forms

Immediate child elements of <Navbar> use flex layout and will default to justify-content: space-between. Use additional flex utilities as needed to adjust this behavior.

Text

Loose text and links can be wrapped Navbar.Text in order to correctly align it vertically.

Navbar dark

Theming the navbar has never been easier thanks to the combination of theming classes and background-color utilities. Choose from .navbar-light for use with light background colors, or .navbar-dark for dark background colors. Then, customize with .bg-* utilities.

External content

Sometimes you want to use the collapse plugin to trigger hidden content elsewhere on the page.

Offcanvas

Transform your expanding and collapsing navbar into an offcanvas drawer with the offcanvas component. We extend both the offcanvas default styles and use the expand prop to create a dynamic and flexible navigation sidebar.

In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints, set the expand prop to false.