Nav

Add lists of links to your pages with various navigation components—tabs, pills, underline—and plenty of options to customize.

Idea React provides the Nav wrapper for these examples. It always renders a semantic <nav> element, so the examples below use NavLink children directly instead of list items.

Base nav

Navigation available in Bootstrap share general markup and styles, from the base .nav class to the active and disabled states. Swap modifier classes to switch between each style.

The base .nav component is built with flexbox and provides a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.

To convey the active state to assistive technologies, use the aria-current attribute—using the page value for current page, or true for the current item in a set.

Where appropriate, you can also use buttons instead of links for the nav items. You can even mix and match—for example, by using menus. See Using menus below.

Available styles

Change the style of navs with modifiers and utilities. Mix and match as needed, or build your own.

Tabs

Add variant="tabs" to generate a tabbed interface.

Pills

Use variant="pills" for a more themed appearance.

Pill navigation can also go vertical with the vertical prop, which adds .nav-pills-vertical.

Underline

Use variant="underline" for an underlined navigation.

Alignment

Change the alignment of your nav with flexbox utilities. By default, navs are horizontal and left-aligned, but you can easily modify them to center or right-aligned, and even stack vertically.

Horizontal

Centered with .justify-content-center:

Right-aligned with .justify-content-end:

Vertical

Stack your navigation by setting the vertical prop. With pills the wrapper uses .nav-pills-vertical; other variants use the .flex-column utility.

Fill and justify

Force your nav's contents to extend the full available width with the fill or justified props. To proportionately fill all available space with your nav items, use fill. Notice that all horizontal space is occupied, but not every nav item has the same width.

For equal-width elements, use justified. All horizontal space will be occupied by nav links, but unlike fill, every nav link will be the same width.

Working with flex utilities

If you need responsive nav variations, consider using a series of flexbox utilities. While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.

Regarding accessibility

If you're using navs to provide a navigation bar, wrap a <nav> element around the whole navigation—the Nav wrapper always does. Note that navigation bars, even if visually styled as tabs with variant="tabs", should not be given role="tablist", role="tab" or role="tabpanel" attributes. These are only appropriate for dynamic tabbed interfaces, as described in the ARIA Authoring Practices Guide tabs pattern. The aria-current attribute is not necessary on dynamic tabbed interfaces since their JavaScript handles the selected state with aria-selected.

Using menus

Add menus with the Menu wrapper and the nav-link toggle class.

Tabs with menus

Pills with menus

CSS

Nav styles are driven by Bootstrap's .nav, .nav-tabs, .nav-pills, and .nav-underline modifier classes. See the upstream nav CSS for the variable reference.