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> 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!

    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.

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

    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.

    Pills

    An alternative visual variant.

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

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

    API

    Nav

    import Nav from 'react-bootstrap/Nav'
    NameTypeDefaultDescription
    activeKey
    string | number

    Marks the NavItem with a matching eventKey (or href if present) as active.

    as
    elementType

    You can use a custom element type for this component.

    cardHeaderBsPrefix
    string
    fill
    boolean
    		false

    Have all NavItems proportionately fill all available width.

    justify
    boolean
    		false

    Have all NavItems 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
    navbarScroll
    boolean

    Enable vertical scrolling within the toggleable contents of a collapsed Navbar.

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

    import Nav from 'react-bootstrap/Nav'
    NameTypeDefaultDescription
    as
    elementType
    		<div>

    You can use a custom element type for this component.

    bsPrefix required
    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.Link

    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
    string | number

    Uniquely identifies the NavItem amongst its siblings, used to determine and control the active state of the 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.

    NavDropdown

    import NavDropdown from 'react-bootstrap/NavDropdown'
    NameTypeDefaultDescription
    active
    boolean

    Style the toggle NavLink as active

    disabled
    boolean

    Disables the toggle NavLink

    id required
    string|number

    An html id attribute for the Toggle button, necessary for assistive technologies, such as screen readers.

    menuRole
    string

    An ARIA accessible role applied to the Menu component. When set to 'menu', The dropdown

    menuVariant
    'dark'

    Menu color variant.

    Omitting this will use the default light color.

    onClick
    function

    An onClick handler passed to the Toggle component

    renderMenuOnMount
    boolean

    Whether to render the dropdown menu in the DOM before the first time it is shown

    rootCloseEvent
    string

    Which event when fired outside the component will cause it to be closed.

    see DropdownMenu for more details

    title required
    node

    The content of the non-toggle Button.

    bsPrefix
    string

    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.