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.

    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!

    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.

    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).

    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

    Press esc to disable tab trapping

    Pills

    An alternative visual variant.

    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.

    Press esc to disable tab trapping

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

    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.

    Press esc to disable tab trapping

    API

    Navview source file

    import Nav from 'react-bootstrap/Nav'
    NameTypeDefaultDescription
    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.

    cardHeaderBsPrefix
    string
    fill
    boolean
    		false

    Have all NavItems to proportionatly fill all available width.

    justify
    boolean
    		false

    Have all NavItems 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.

    navbarBsPrefix
    string
    onKeyDown
    function
    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'
    NameTypeDefaultDescription
    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'
    NameTypeDefaultDescription
    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

    innerRef
    any
    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.