Paragon Design System

Technical Documentation

npm_version
Changelog
GitHub

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.

This is a pass through component from React-Bootstrap.
See React-Bootstrap for additional documentation.

Basic Usage

Theme Variables (SCSS)#

// Navs


$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-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-bg:           $body-bg !default;
$nav-tabs-link-active-border-color: transparent transparent $primary-500 !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-divider-color:                 theme-color("gray", "background") !default;
$nav-divider-margin-y:              calc($spacer / 2) !default;
Nav Props API
  • 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
  • onSelect string

    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
  • as elementType

    Set a custom element for this component.

  • bsPrefix string

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

NavLink Props API
  • active bool

    The active state of the NavItem item.

  • as elementType

    You can use a custom element type for this component.

  • disabled bool

    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

  • role string

    The ARIA role for the NavLink, In the context of a 'tablist' parent Nav, the role defaults to 'tab'

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

Contents

Guides

Foundations

PlaygroundBeta

  • A drag-and-drop UI builder for prototyping with Paragon components.

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)