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 (SCSS)#

$nav-link-padding-y: .5rem !default;
$nav-link-padding-x: 1rem !default;
$nav-link-color: $gray-700 !default;
$nav-link-disabled-color: $gray-300 !default;
$nav-link-font-weight: 500 !default;
$nav-tabs-border-color: $light-400 !default;
$nav-tabs-border-width: 2px !default;
$nav-tabs-border-radius: 0 !default;
$nav-tabs-hover-bg: transparent !default;
$nav-tabs-focus-border-color: $nav-tabs-hover-bg !default;
$nav-tabs-disabled-bg: $nav-tabs-hover-bg !default;
$nav-tabs-link-hover-border-color: transparent transparent $nav-tabs-border-color !default;
$nav-tabs-link-hover-bg: $light-400 !default;
$nav-tabs-link-active-color: $primary-500 !default;
$nav-tabs-link-active-border-color: $nav-tabs-link-active-color !default;
$nav-tabs-link-active-bg: transparent !default;
$nav-tabs-link-focus-border-color: $nav-tabs-link-active-color !default;
$nav-tabs-link-distance-to-border: 4px !default;
$nav-tabs-link-border-color: transparent !default;
$nav-tabs-link-disabled-border-color: $nav-tabs-link-border-color !default;
$nav-pills-border-radius: $border-radius !default;
$nav-pills-link-active-color: $component-active-color !default;
$nav-pills-link-active-bg: $component-active-bg !default;
$nav-pills-link-active-border-color: $white !default;
$nav-pills-link-border-color: $nav-tabs-border-color !default;
$nav-pills-link-border-width: 1px !default;
$nav-inverse-pills-link-color: $white !default;
$nav-inverse-pills-link-border-color: $dark-300 !default;
$nav-inverse-pills-link-hover-bg: $nav-inverse-pills-link-border-color !default;
$nav-inverse-pills-link-focus-color: $nav-inverse-pills-link-color !default;
$nav-inverse-pills-link-active-bg: $nav-inverse-pills-link-color !default;
$nav-inverse-pills-link-active-color: $primary-500 !default;
$nav-inverse-pills-link-active-border-color: $nav-inverse-pills-link-color !default;
$nav-inverse-pills-link-active-hover-bg: $nav-inverse-pills-link-border-color !default;
$nav-inverse-pills-link-active-hover-color: $nav-inverse-pills-link-color !default;
$nav-inverse-pills-link-active-hover-border-color: $nav-inverse-pills-link-border-color !default;
$nav-inverse-pills-link-active-focus-hover-bg: $nav-inverse-pills-link-color !default;
$nav-inverse-pills-link-active-focus-color: $nav-inverse-pills-link-active-color !default;
$nav-inverse-pills-link-active-focus-border-color: $primary !default;
$nav-inverse-pills-link-active-focus-hover-border-color: $nav-inverse-pills-link-active-focus-border-color !default;
$nav-inverse-pills-link-border-width: $nav-pills-link-border-width !default;
$nav-inverse-pills-tab-content-color: $nav-inverse-pills-link-color !default;
$nav-inverse-tabs-link-color: $white !default;
$nav-inverse-tabs-link-border-bottom-color: $dark-300 !default;
$nav-inverse-tabs-link-hover-bg: $nav-inverse-tabs-link-border-bottom-color !default;
$nav-inverse-tabs-link-active-hover-bg: transparent !default;
$nav-inverse-tabs-link-focus-bg: $nav-inverse-tabs-link-color !default;
$nav-inverse-tabs-link-active-border-color: $nav-inverse-tabs-link-color !default;
$nav-inverse-tabs-link-active-bg: $nav-inverse-tabs-link-hover-bg !default;
$nav-inverse-tabs-link-active-border-bottom-width: $nav-tabs-border-width !default;
$nav-inverse-tabs-tab-content-color: $nav-inverse-tabs-link-color !default;
$nav-inverse-tabs-dropdown-border-color: $nav-inverse-tabs-link-active-hover-bg !default;

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-portal21.13.12
frontend-app-communications22.0.01
frontend-app-discussions22.1.11
frontend-component-header-edx21.11.42
frontend-component-header22.6.13

NavItem

Project NameParagon VersionInstance Count
frontend-app-communications22.0.01
frontend-app-discussions22.1.11

NavLink

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