Skip to main content

Navbars

A powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more.

Overview

Here’s what you need to know before getting started with the Navbar:

  • Use the expand prop to allow for collapsing the Navbar at lower breakpoints.
  • Navbars and their contents are fluid by default. Use optional containers to limit their horizontal width.
  • Use spacing and flex utilities to size and position content

A responsive navigation header, including support for branding, navigation, and more. Here’s an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the lg (large) breakpoint.

Result
Loading...
Live Editor

Brand

A simple flexible branding component. Images are supported but will likely require custom styling to work well.

Result
Loading...
Live Editor

Forms

Use <Form inline> and your various form controls within the Navbar. Align the contents as needed with utility classes.

Result
Loading...
Live Editor

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

Result
Loading...
Live Editor

Color schemes

Theming the navbar has never been easier thanks to the combination of theming classes and background-color utilities. Choose from variant="light" for use with light background colors, or variant="dark" for dark background colors. Then, customize with the bg prop or any custom css!

Result
Loading...
Live Editor

Containers

While not required, you can wrap the Navbar in a <Container> component to center it on a page, or add one within to only center the contents of a fixed or static top navbar.

Result
Loading...
Live Editor

When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified expand={'sm' | 'md' | 'lg' | 'xl' | 'xxl'} prop. This ensures we’re not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.

Result
Loading...
Live Editor

Placement

You can use Bootstrap's position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the <body>) to prevent overlap with other elements. Also note that .sticky-top uses position: sticky, which isn’t fully supported in every browser.

Since these positioning needs are so common for Navbars, we've added convenience props for them.

Fixed top

<Navbar fixed="top" />

Fixed bottom

<Navbar fixed="bottom" />

Sticky top

<Navbar sticky="top" />

Scrolling

You can use the navbarScroll prop in a <Nav> to enable vertical scrolling within the toggleable contents of a collapsed navbar. See the Bootstrap docs for more information.

Result
Loading...
Live Editor

Responsive behaviors

Use the expand prop as well as the Navbar.Toggle and Navbar.Collapse components to control when content collapses behind a button.

Set the defaultExpanded prop to make the Navbar start expanded. Set collapseOnSelect to make the Navbar collapse automatically when the user selects an item. You can also finely control the collapsing behavior by using the expanded and onToggle props.

Result
Loading...
Live Editor

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.

Result
Loading...
Live Editor

API