Documentation and examples for how to use Bootstrap’s included navigation components.
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.
The basic, variant-less, Nav component does not include any
active prop styling!
import Nav from 'react-bootstrap/Nav';
function BasicExample() {
return (
<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>
);
}
export default BasicExample;
<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!
import Nav from 'react-bootstrap/Nav';
function ListExample() {
return (
<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>
);
}
export default ListExample;
Available styles
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.
import Nav from 'react-bootstrap/Nav';
function AlignmentExample() {
return (
<>
<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>
</>
);
}
export default AlignmentExample;
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).
import Nav from 'react-bootstrap/Nav';
function StackedExample() {
return (
<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>
);
}
export default StackedExample;
Tabs
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
default stylesheet.
import Nav from 'react-bootstrap/Nav';
function TabsExample() {
return (
<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>
);
}
export default TabsExample;
Pills
import Nav from 'react-bootstrap/Nav';
function PillsExample() {
return (
<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>
);
}
export default PillsExample;
Underline
import Nav from 'react-bootstrap/Nav';
function UnderlineExample() {
return (
<Nav variant="underline" 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>
);
}
export default UnderlineExample;
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.
import Nav from 'react-bootstrap/Nav';
function FillExample() {
return (
<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>
);
}
export default FillExample;
If you want each NavItem to be the same size use justify.
import Nav from 'react-bootstrap/Nav';
function JustifiedExample() {
return (
<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>
);
}
export default JustifiedExample;
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
import Dropdown from 'react-bootstrap/Dropdown';
import NavItem from 'react-bootstrap/NavItem';
import NavLink from 'react-bootstrap/NavLink';
function DropdownImplExample() {
return (
<Dropdown as={NavItem}>
<Dropdown.Toggle as={NavLink}>Click to see more…</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item>Hello there!</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
);
}
export default DropdownImplExample;
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
straight-forward <NavDropdown> that works for most cases.
import Nav from 'react-bootstrap/Nav';
import NavDropdown from 'react-bootstrap/NavDropdown';
function NavDropdownExample() {
const handleSelect = (eventKey) => alert(`selected ${eventKey}`);
return (
<Nav variant="pills" activeKey="1" onSelect={handleSelect}>
<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>
);
}
export default NavDropdownExample;
API
Nav
NavItem
NavLink
NavDropdown