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

$navbar-padding-y:                  $spacer / 2 !default;
$navbar-padding-x:                  $spacer !default;

$navbar-nav-link-padding-x:         .5rem !default;

$navbar-brand-font-size:            $font-size-lg !default;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
// The default for $nav-link-padding-y is .5rem. Copied here for modularization
$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:            ($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'

Navbar

Basic Usage

Theme Variables (SCSS)

as

bg

collapseOnSelect

expand

expanded

fixed

onSelect

onToggle

role

sticky

variant

bsPrefix

as

href

bsPrefix

as

children

label

onClick

bsPrefix

bsPrefix

Guides

Foundations

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)