Paragon Design System

Technical Documentation

npm_version
Changelog
GitHub

Navbar

A powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more.

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

Basic Usage

Theme Variables (SCSS)#

$navbar-padding-y:                   calc($spacer / 2) !default;
$navbar-padding-x:                   $spacer !default;
$navbar-nav-link-padding-x:          .5rem !default;
$navbar-brand-font-size:             $font-size-lg !default;
$nav-link-height:                    $font-size-base * $line-height-base + .5rem * 2 !default;
$navbar-brand-height:                $navbar-brand-font-size * $line-height-base !default;
$navbar-brand-padding-y:             calc(($nav-link-height - $navbar-brand-height) / 2) !default;
$navbar-toggler-padding-y:           .25rem !default;
$navbar-toggler-padding-x:           .75rem !default;
$navbar-toggler-font-size:           $font-size-lg !default;
$navbar-toggler-border-radius:       $btn-border-radius !default;
$navbar-nav-scroll-max-height:       75vh !default;
$navbar-dark-color:                  rgba($white, .5) !default;
$navbar-dark-hover-color:            rgba($white, .75) !default;
$navbar-dark-active-color:           $white !default;
$navbar-dark-disabled-color:         rgba($white, .25) !default;
$navbar-dark-toggler-icon-bg:        str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default;
$navbar-dark-toggler-border-color:   rgba($white, .1) !default;
$navbar-light-color:                 rgba($black, .5) !default;
$navbar-light-hover-color:           rgba($black, .7) !default;
$navbar-light-active-color:          rgba($black, .9) !default;
$navbar-light-disabled-color:        rgba($black, .3) !default;
$navbar-light-toggler-icon-bg:       str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default;
$navbar-light-toggler-border-color:  rgba($black, .1) !default;
$navbar-light-brand-color:                 $navbar-light-active-color !default;
$navbar-light-brand-hover-color:           $navbar-light-active-color !default;
$navbar-dark-brand-color:                  $navbar-dark-active-color !default;
$navbar-dark-brand-hover-color:            $navbar-dark-active-color !default;
Navbar Props API
  • as elementType

    Set a custom element for this component.

    Default'nav'
  • bg string

    A convenience prop for adding bg-* utility classes since they are so commonly used here. light and dark are common choices but any bg-* class is supported, including any custom ones you might define.

    Pairs nicely with the variant prop.

  • collapseOnSelect bool

    Toggles expanded to false after the onSelect event of a descendant of a child <Nav> fires. Does nothing if no <Nav> or <Nav> descendants exist.

    Manually controlling expanded via the onSelect callback is recommended instead, for more complex operations that need to be executed after the select event of <Nav> descendants.

    Defaultfalse
  • expand enumtrue | 'sm' | 'md' | 'lg' | 'xl'

    The breakpoint, below which, the Navbar will collapse. When true the Navbar will always be expanded regardless of screen size.

    Defaulttrue
  • expanded bool

    Controls the visibility of the navbar body

  • fixed enum'top' | 'bottom'

    Create a fixed navbar along the top or bottom of the screen, that scrolls with the page. A convenience prop for the fixed-* positioning classes.

  • onSelect func

    A callback fired when a descendant of a child <Nav> is selected.

    Default() => {}
  • onToggle func

    A callback fired when the <Navbar> body collapses or expands. Fired when a <Navbar.Toggle> is clicked and called with the new expanded boolean value.

    Controls expanded.

    Default() => {}
  • role string

    The ARIA role for the navbar, will default to 'navigation' for Navbars whose as is something other than <nav>.

    Default'navigation'
  • sticky enum'top'

    Position the navbar at the top of the viewport, but only after scrolling past it. A convenience prop for the sticky-top positioning class.

  • variant enum'light' | 'dark'

    The general visual variant a the Navbar. Use in combination with the bg prop, background-color utilities, or your own background styles.

    Default'light'
  • bsPrefix string

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

    Default'navbar'
NavbarBrand Props API
  • as elementType

    Set a custom element for this component.

    Default'nav'
  • href string

    An href, when provided the Brand will render as an <a> element (unless as is provided).

  • bsPrefix string

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

    Default'navbar'
NavbarToggle Props API
  • as elementType

    Set a custom element for this component.

    Default'button'
  • children node

    The toggle content. When empty, the default toggle will be rendered.

  • label string

    An accessible ARIA label for the toggler button.

    Default'Toggle navigation'
  • onClick func

    Specifies the callback function when the toggle is clicked.

    Default() => {}
  • bsPrefix string

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

    Default'navbar-toggler'
NavbarCollapse Props API
  • bsPrefix string

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

    Default'navbar-collapse'

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)