npm_versionnpm Paragon package page

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.

This is a pass through component from React-Bootstrap.

See React-Bootstrap for additional documentation.

Basic Usage

Any Paragon component or export may be added to the code example.

Theme Variables#

CSS VariableComputed Value










Props API#

Nav Props API

This is a pass through component from React-Bootstrap; see original props documentation here. You can also pass any HTML attributes, such as onClick, role, etc. Which attributes are available depends on whether or not you have overriden the underlying HTML element using the as property.

  • cardHeaderBsPrefix string

    Change the underlying component CSS base class name and modifier class names prefix.

  • defaultActiveKey string | number

    Specifies default active nav (uncontrolled usage).

  • activeKey string | number

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

  • as elementType

    Set a custom element for this component.

  • fill bool

    Have all NavItems proportionately fill all available width.

  • justify bool

    Have all NavItems evenly fill all available width.

  • navbar bool

    Apply styling an alignment for use in a Navbar. This prop will be set automatically when the Nav is used inside a Navbar.

  • onKeyDown func

    Callback fired when a key is pressed.

  • onSelect func

    A callback fired when a NavItem is selected.

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

  • variant enum'tabs' | 'pills'

    The visual variant of the nav items.

  • bsPrefix string

    Change the underlying component CSS base class name and modifier class names prefix.

NavItem Props API
  • role string

    The ARIA role for the NavItem

  • as elementType

    Set a custom element for this component.

  • bsPrefix string

    Change the underlying component CSS base class name and modifier class names prefix.

NavDropdown Props API
  • id string Required

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

  • title node Required

    The content of the non-toggle Button.

  • active bool

    Style the toggle NavLink as active

  • disabled bool

    Disables the toggle NavLink

  • menuRole string

    An ARIA accessible role applied to the Menu component.

  • menuVariant enum'dark'

    Menu color variant. Omitting this will use the default light color.

  • onClick func

    An onClick handler passed to the Toggle component

  • renderMenuOnMount bool

    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.

  • bsPrefix string

    Change the underlying component CSS base class name and modifier class names prefix.

Usage Insights#

Nav

Project NameParagon VersionInstance Count
frontend-app-admin-portal21.13.12
frontend-app-communications22.7.01
frontend-app-discussions22.7.01
frontend-component-header-edx21.13.12
frontend-component-header22.10.03

NavItem

Project NameParagon VersionInstance Count
frontend-app-communications22.7.01
frontend-app-discussions22.7.01

NavLink

Project NameParagon VersionInstance Count
frontend-app-admin-portal21.13.11
frontend-app-communications22.7.01
frontend-app-discussions22.7.01