Nav

Edit this page Leave feedback

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

Show editable code example

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

() => {
  const handleSelect = (eventKey) => alert(`selected ${eventKey}`);

  return (
    <Nav variant="pills" activeKey="1" onSelect={handleSelect}>
      <Nav.Item>
        <Nav.Link eventKey="1" href="#/home">
          NavLink 1 content
        </Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link eventKey="2" title="Item">
          NavLink 2 content
        </Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link eventKey="3" disabled>
          NavLink 3 content
        </Nav.Link>
      </Nav.Item>
      <NavDropdown title="Dropdown" id="nav-dropdown">
        <NavDropdown.Item eventKey="4.1">Action</NavDropdown.Item>
        <NavDropdown.Item eventKey="4.2">Another action</NavDropdown.Item>
        <NavDropdown.Item eventKey="4.3">Something else here</NavDropdown.Item>
        <NavDropdown.Divider />
        <NavDropdown.Item eventKey="4.4">Separated link</NavDropdown.Item>
      </NavDropdown>
    </Nav>
  );
}

() => {
  const handleSelect = (eventKey) => alert(`selected ${eventKey}`);

  return (
    <Nav variant="pills" activeKey="1" onSelect={handleSelect}>
      <Nav.Item>
        <Nav.Link eventKey="1" href="#/home">
          NavLink 1 content
        </Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link eventKey="2" title="Item">
          NavLink 2 content
        </Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link eventKey="3" disabled>
          NavLink 3 content
        </Nav.Link>
      </Nav.Item>
      <NavDropdown title="Dropdown" id="nav-dropdown">
        <NavDropdown.Item eventKey="4.1">Action</NavDropdown.Item>
        <NavDropdown.Item eventKey="4.2">Another action</NavDropdown.Item>
        <NavDropdown.Item eventKey="4.3">Something else here</NavDropdown.Item>
        <NavDropdown.Divider />
        <NavDropdown.Item eventKey="4.4">Separated link</NavDropdown.Item>
      </NavDropdown>
    </Nav>
  );
}

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.

NavLink Props API

onSelect string
Callback fired when the active item changes.
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.

Usage Insights#

Nav

Project Name	Paragon Version	Instance Count
frontend-app-admin-portal	20.46.3	2
frontend-app-communications	20.46.2	1
frontend-app-discussions	20.46.3	1
frontend-component-header-edx	21.5.6	2
frontend-component-header	21.5.6	2

NavItem

	Project Name	Paragon Version	Instance Count
	frontend-app-communications	20.46.2	1
	frontend-app-discussions	20.46.3	1

NavLink

Project Name	Paragon Version	Instance Count
frontend-app-admin-portal	20.46.3	1
frontend-app-communications	20.46.2	1
frontend-app-discussions	20.46.3	1

Edit this page Leave feedback

Paragon Design System

Theme

Nav

Basic Usage

Theme Variables (SCSS)#

Props API#

Usage Insights#

Nav

NavItem

NavLink

All components (A-Z)

Theme

Nav

Basic Usage#

Theme Variables (SCSS)#

Props API#

Usage Insights#

Nav

NavItem

NavLink

All components (A-Z)

Basic Usage