Documentation and examples for how to use Bootstrap’s included navigation components.
Navigation bits in Bootstrap all share a general
component and styles. Swap
variants to switch between each
style. The base
Nav component is built with flexbox and
provide a strong foundation for building all types of navigation
The basic, variant-less,
Nav component does not include any
active prop styling!
<Nav> markup is very flexible and styling is controlled via classes so you can
use whatever elements you like to build your navs. By default
<div>s instead of
<li> elements respectively.
This because it's possible (and common) to leave off the
<Nav.Link> directly, which would create invalid markup by default (
ul > a).
<ul> is appropriate you can render one via the
as prop; be sure to
also set your items to
<li> as well!
You can control the the direction and orientation of the
Nav by making use of the flexbox utility
classes. By default, navs are left-aligned, but that is easily changed to center or right-aligned.
Create stacked navs by changing the flex item direction with the
.flex-column class, or
your own css. You can even use the responsive versions to stack in some viewports but not
Visually represent nav items as "tabs". This style pairs nicely with tabbable regions created by our Tab components.
Note: creating a vertical nav (
.flex-column) with tabs styling is unsupported by Bootstrap's
Fill and justify
Force the contents of your nav to extend the full available width. To
proportionately fill the space use
fill. Notice that the
nav is the entire width but each nav item is a different size.
If you want each NavItem to be the same size use
You can mix and match the Dropdown components with the NavLink and NavItem components to create a Dropdown that plays well in a Nav component
The above demonstrates how flexible the component model can be. But if
you didn't want to roll your own versions we've included a
<NavDropdown> that works for most cases.