Theme

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.

  • 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-portal20.46.32
frontend-app-communications20.46.21
frontend-app-discussions20.46.31
frontend-component-header-edx21.5.62
frontend-component-header21.5.62

NavItem

Project NameParagon VersionInstance Count
frontend-app-communications20.46.21
frontend-app-discussions20.46.31

NavLink

Project NameParagon VersionInstance Count
frontend-app-admin-portal20.46.31
frontend-app-communications20.46.21
frontend-app-discussions20.46.31