Base Nav

Navigation bits in Bootstrap all share a general Nav 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 components.

<Nav
  activeKey="/home"
  onSelect={selectedKey => alert(`selected ${selectedKey}`)}
>
  <Nav.Item>
    <Nav.Link href="/home">Active</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey="link-1">Link</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey="link-2">Link</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey="disabled" disabled>
      Disabled
    </Nav.Link>
  </Nav.Item>
</Nav>;

Press esc to disable tab trapping

<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 <Nav> and <Nav.Item> both render <div>s instead of <ul> and <li> elements respectively. This because it's possible (and common) to leave off the <Nav.Item>'s and render a <Nav.Link> directly, which would create invalid markup by default (ul > a).

When a <ul> is appropriate you can render one via the as prop; be sure to also set your items to <li> as well!

<Nav defaultActiveKey="/home" as="ul">
  <Nav.Item as="li">
    <Nav.Link href="/home">Active</Nav.Link>
  </Nav.Item>
  <Nav.Item as="li">
    <Nav.Link eventKey="link-1">Link</Nav.Link>
  </Nav.Item>
  <Nav.Item as="li">
    <Nav.Link eventKey="link-2">Link</Nav.Link>
  </Nav.Item>
</Nav>;

Press esc to disable tab trapping

Alignment and orientation

You can control the the direction and orientation of the Nav by making use of the flexbox layout utility classes. By default, navs are left-aligned, but that is easily changed to center or right-aligned.

Or right-aligned

<>
  <Nav className="justify-content-center" activeKey="/home">
    <Nav.Item>
      <Nav.Link href="/home">Active</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link eventKey="link-1">Link</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link eventKey="link-2">Link</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link eventKey="disabled" disabled>
        Disabled
      </Nav.Link>
    </Nav.Item>
  </Nav>
  <p className="text-center mt-4 mb-4">Or right-aligned</p>
  <Nav className="justify-content-end" activeKey="/home">
    <Nav.Item>
      <Nav.Link href="/home">Active</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link eventKey="link-1">Link</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link eventKey="link-2">Link</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link eventKey="disabled" disabled>
        Disabled
      </Nav.Link>
    </Nav.Item>
  </Nav>
</>;

Press esc to disable tab trapping

Vertical

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 others (e.g. .flex-sm-column).

Active Link Link Disabled

<Nav defaultActiveKey="/home" className="flex-column">
  <Nav.Link href="/home">Active</Nav.Link>
  <Nav.Link eventKey="link-1">Link</Nav.Link>
  <Nav.Link eventKey="link-2">Link</Nav.Link>
  <Nav.Link eventKey="disabled" disabled>
    Disabled
  </Nav.Link>
</Nav>;

Press esc to disable tab trapping

Tabs

Visually represent nav items as "tabs". This style pairs nicely with tabbable regions created by our Tab components

Active

Option 2

Disabled

<Nav variant="tabs" defaultActiveKey="/home">
  <Nav.Item>
    <Nav.Link href="/home">Active</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey="link-1">Option 2</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey="disabled" disabled>
      Disabled
    </Nav.Link>
  </Nav.Item>
</Nav>;

Press esc to disable tab trapping

Pills

An alternative visual variant.

Active

Option 2

Disabled

<Nav variant="pills" defaultActiveKey="/home">
  <Nav.Item>
    <Nav.Link href="/home">Active</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey="link-1">Option 2</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey="disabled" disabled>
      Disabled
    </Nav.Link>
  </Nav.Item>
</Nav>;

Press esc to disable tab trapping

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.

<Nav fill variant="tabs" defaultActiveKey="/home">
  <Nav.Item>
    <Nav.Link href="/home">Active</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey="link-1">Loooonger NavLink</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey="link-2">Link</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey="disabled" disabled>
      Disabled
    </Nav.Link>
  </Nav.Item>
</Nav>;

Press esc to disable tab trapping

If you want each NavItem to be the same size use justify.

<Nav justify variant="tabs" defaultActiveKey="/home">
  <Nav.Item>
    <Nav.Link href="/home">Active</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey="link-1">Loooonger NavLink</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey="link-2">Link</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey="disabled" disabled>
      Disabled
    </Nav.Link>
  </Nav.Item>
</Nav>;

Press esc to disable tab trapping

Using dropdowns

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

<Dropdown as={NavItem}>
  <Dropdown.Toggle as={NavLink}>Click to see more…</Dropdown.Toggle>
  <Dropdown.Menu>
    <Dropdown.Item>Hello there!</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>;

The above demostrates how flexible the component model can be. But if you didn't want to roll your own versions we've included a straight-forward <NavDropdown> that works for most cases.

NavLink 1 content

NavLink 2 content

NavLink 3 content

class NavDropdownExample extends React.Component {
  handleSelect(eventKey) {
    alert(`selected ${eventKey}`);
  }

  render() {
    return (
      <Nav variant="pills" activeKey="1" onSelect={k => this.handleSelect(k)}>
        <Nav.Item>
          <Nav.Link eventKey="1" href="#/home">
            NavLink 1 content
          </Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="2" title="Item">
            NavLink 2 content
          </Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="3" disabled>
            NavLink 3 content
          </Nav.Link>
        </Nav.Item>
        <NavDropdown title="Dropdown" id="nav-dropdown">
          <NavDropdown.Item eventKey="4.1">Action</NavDropdown.Item>
          <NavDropdown.Item eventKey="4.2">Another action</NavDropdown.Item>
          <NavDropdown.Item eventKey="4.3">
            Something else here
          </NavDropdown.Item>
          <NavDropdown.Divider />
          <NavDropdown.Item eventKey="4.4">Separated link</NavDropdown.Item>
        </NavDropdown>
      </Nav>
    );
  }
}

render(<NavDropdownExample />);

Press esc to disable tab trapping

API

Navview source file

import Nav from 'react-bootstrap/Nav'

Name	Type	Default	Description
activeKey	string		Marks the NavItem with a matching `eventKey` (or `href` if present) as active.
as	elementType	`<div>`	You can use a custom element type for this component.
fill	boolean	`false`	Have all `NavItem`s to proportionatly fill all available width.
justify	boolean	`false`	Have all `NavItem`s to evenly fill all available width.
navbar	boolean		Apply styling an alignment for use in a Navbar. This prop will be set automatically when the Nav is used inside a Navbar.
onSelect	function		A callback fired when a NavItem is selected. `function ( Any eventKey, SyntheticEvent event? )`
role	string		ARIA role for the Nav, in the context of a TabContainer, the default will be set to "tablist", but can be overridden by the Nav when set explicitly. When the role is "tablist", NavLink focus is managed according to the ARIA authoring practices for tabs: https://www.w3.org/TR/2013/WD-wai-aria-practices-20130307/#tabpanel
variant	`'tabs'` \| `'pills'`		The visual variant of the nav items.
bsPrefix	string	`'nav'`	Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

Nav.Itemview source file

import Nav from 'react-bootstrap/Nav'

Name	Type	Default	Description
as	elementType	`<div>`	You can use a custom element type for this component.
role	string		The ARIA role of the component
bsPrefix	string	`'nav-item'`	Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

Nav.Linkview source file

import Nav from 'react-bootstrap/Nav'

Name	Type	Default	Description
active	boolean		The active state of the NavItem item.
as	elementType	`<a>`	You can use a custom element type for this component.
disabled	boolean	`false`	The disabled state of the NavItem item.
eventKey	any		Uniquely idenifies the `NavItem` amoungst its siblings, used to determine and control the active state ofthe parent `Nav`
href	string		The HTML href attribute for the `NavLink`
onSelect	function		A callback fired when the `NavLink` is selected. `function (eventKey: any, event: SyntheticEvent) {}`
role	string		The ARIA role for the `NavLink`, In the context of a 'tablist' parent Nav, the role defaults to 'tab'
bsPrefix	string	`'nav-link'`	Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

Base Nav

Alignment and orientation#

Vertical#

Tabs#

Pills#

Fill and justify#

Using dropdowns#

API#

Nav#view source file

Nav.Item#view source file

Nav.Link#view source file

Alignment and orientation

Vertical

Tabs

Pills

Fill and justify

Using dropdowns

API

Navview source file

Nav.Itemview source file

Nav.Linkview source file