Navbar

Powerful, flexible navigation components for creating headers, menus, and application navigation interfaces with Chassis CSS.

Overview

Navbars are versatile navigation components that serve as the primary navigation interface for your website or application. With Chassis CSS, you can create responsive, accessible, and visually consistent navigation experiences.

Key features

Chassis CSS navbars offer a range of features to enhance your navigation experience:

Automatically collapses into a mobile-friendly menu at your chosen breakpoint
Supports branding, navigation links, forms, and more
Proper ARIA attributes and keyboard navigation support
Easily customize with Chassis CSS's theming system using data-cx-theme
Works seamlessly with dropdowns, offcanvas, and other Chassis components

Basic structure

A complete navbar combines several key components to create a functional navigation system that automatically adapts to different screen sizes:

A container (.navbar with .navbar-expand-* for responsive behavior)
Branding (.navbar-brand)
Navigation links (.navbar-nav)
Optional toggle button for smaller screens (.navbar-toggler)
Collapsible content (.collapse.navbar-collapse)

Here's a basic navbar with these components:

html

<nav class="navbar large:navbar-expand bg-evident">
  <div class="container fluid">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-cx-toggle="collapse" data-cx-target="#navbarBasic" aria-controls="navbarBasic" aria-expanded="false" aria-label="Toggle navigation">
      <span class="icon icon-bars-solid icon-default"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarBasic">
      <ul class="navbar-nav me-auto mb-xsmall large:mb-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-cx-toggle="dropdown" aria-expanded="false">Dropdown</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-separator"></li>
            <li><a class="dropdown-item" href="#">Something else</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-input me-xsmall" type="search" placeholder="Search" aria-label="Search"/>
        <button class="button outline primary" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

This example uses background (bg-evident) and spacing utility classes for layout refinement.

Accessibility

Ensuring your navbars are accessible to all users requires proper semantic markup, ARIA attributes, and keyboard navigation support.

For proper accessibility:

Use a <nav> element with role="navigation" when using other elements like <div>
Add aria-current="page" to indicate the current page in the navigation
Include aria-label="Toggle navigation" on toggle buttons
Add aria-expanded attributes that correctly reflect the state of collapsible elements

Chassis CSS respects user accessibility preferences by automatically disabling animations when the prefers-reduced-motion media query is detected. See the reduced motion guidelines in our accessibility documentation for implementation details.

Content components

Navbars support various content elements that can be combined to build complete navigation experiences for any type of site or application.

Branding

The .navbar-brand class creates a visually distinct area for your logo or product name. It can be applied to links, headings, or other elements.

Text branding

Use .navbar-brand to create a text-based brand identifier:

html

<!-- As a link -->
<nav class="navbar bg-evident">
  <div class="container fluid">
    <a class="navbar-brand" href="#">Brand</a>
  </div>
</nav>

<!-- As a heading -->
<nav class="navbar bg-evident">
  <div class="container fluid">
    <span class="navbar-brand mb-0 h1">Brand</span>
  </div>
</nav>

Logo image

Use an image within .navbar-brand for a logo.

html

<nav class="navbar bg-evident">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/static/images/site-logo.svg" alt="Chassis CSS Logo" height="24">
    </a>
  </div>
</nav>

Combined image and text

Use both an image and text for a more complete branding element. Use the d-inline-block and align-text-top classes to align the image with the text.

html

<nav class="navbar bg-evident">
  <div class="container fluid">
    <a class="navbar-brand" href="#">
      <img src="/static/images/site-logo.svg" alt="Logo" height="24" class="d-inline-block align-text-top">
      <span class="font-strong ms-xsmall">CSS</span>
    </a>
  </div>
</nav>

Navbar navigation links use the .nav-link class within a .navbar-nav container and support active states, disabled states, and dropdowns.

html

<nav class="navbar large:navbar-expand bg-evident">
  <div class="container fluid">
    <a class="navbar-brand" href="#">Navigation</a>
    <button class="navbar-toggler" type="button" data-cx-toggle="collapse" data-cx-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Alternative markup

You can use a non-list structure for your navigation when preferred:

html

<nav class="navbar large:navbar-expand bg-evident">
  <div class="container fluid">
    <a class="navbar-brand" href="#">Navigation</a>
    <button class="navbar-toggler" type="button" data-cx-toggle="collapse" data-cx-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Link</a>
        <a class="nav-link" href="#">About</a>
        <a class="nav-link disabled" aria-disabled="true">Disabled</a>
      </div>
    </div>
  </div>
</nav>

With dropdowns

Dropdowns in navbars need proper nesting to work correctly:

html

<nav class="navbar large:navbar-expand bg-evident">
  <div class="container fluid">
    <a class="navbar-brand" href="#">Navigation</a>
    <button class="navbar-toggler" type="button" data-cx-toggle="collapse" data-cx-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-cx-toggle="dropdown" aria-expanded="false">Dropdown</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-separator"></li>
            <li><a class="dropdown-item" href="#">Something else</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Forms

Navbars can include forms for search functionality or other input needs:

html

<nav class="navbar bg-evident">
  <div class="container fluid">
    <form class="d-flex" role="search">
      <input class="form-input me-xsmall" type="search" placeholder="Search" aria-label="Search"/>
      <button class="button outline primary" type="submit">Search</button>
    </form>
  </div>
</nav>

You can combine forms with other navbar elements:

html

<nav class="navbar bg-evident">
  <div class="container fluid">
    <a class="navbar-brand">Brand</a>
    <form class="d-flex" role="search">
      <input class="form-input me-xsmall" type="search" placeholder="Search" aria-label="Search"/>
      <button class="button outline primary" type="submit">Search</button>
    </form>
  </div>
</nav>

Input groups are also supported:

html

<nav class="navbar bg-evident">
  <form class="container fluid">
    <div class="input-group">
      <span class="input-addon" id="basic-addon1">@</span>
      <input type="text" class="form-input" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"/>
    </div>
  </form>
</nav>

Text content

For simple text elements, use .navbar-text:

html

<nav class="navbar bg-evident">
  <div class="container fluid">
    <span class="navbar-text">
      Simple navbar text content
    </span>
  </div>
</nav>

You can combine text with other navbar components:

html

<nav class="navbar large:navbar-expand bg-evident">
  <div class="container fluid">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-cx-toggle="collapse" data-cx-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav me-auto mb-xsmall large:mb-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
      </ul>
      <span class="navbar-text">
        Navbar text element
      </span>
    </div>
  </div>
</nav>

Theming

Customize the appearance of your navbars with Chassis CSS's powerful theming system, including dark mode and contextual color variants.

Dark mode

Use data-cx-theme="dark" to apply dark mode styling to your navbar:

<nav class="navbar large:navbar-expand bg-main fg-main" data-cx-theme="dark">
  <!-- Navbar content -->
</nav>

Context variants

Apply contextual colors to your navbar using the context class with color variants:

<nav class="navbar large:navbar-expand context primary solid" data-cx-theme="dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar large:navbar-expand context primary bg-even" data-cx-theme="light">
  <!-- Navbar content -->
</nav>

Layout options

Control how your navbar is positioned, sized, and contained within your page layout using flexible container and positioning options.

Containers

Wrap your navbar in a container to control its width and positioning:

html

<div class="container">
  <nav class="navbar large:navbar-expand bg-evident">
    <div class="container fluid">
      <a class="navbar-brand" href="#">Contained Navbar</a>
    </div>
  </nav>
</div>

You can also use responsive containers within the navbar:

html

<nav class="navbar large:navbar-expand bg-evident">
  <div class="container medium">
    <a class="navbar-brand" href="#">Medium Width</a>
  </div>
</nav>

Positioning

Use Chassis position utilities to create fixed, sticky, or static navbars:

html

<nav class="navbar bg-evident">
  <div class="container fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>

html

<nav class="navbar fixed-top bg-evident">
  <div class="container fluid">
    <a class="navbar-brand" href="#">Fixed Top</a>
  </div>
</nav>

html

<nav class="navbar fixed-bottom bg-evident">
  <div class="container fluid">
    <a class="navbar-brand" href="#">Fixed Bottom</a>
  </div>
</nav>

html

<nav class="navbar sticky-top bg-evident">
  <div class="container fluid">
    <a class="navbar-brand" href="#">Sticky Top</a>
  </div>
</nav>

html

<nav class="navbar sticky-bottom bg-evident">
  <div class="container fluid">
    <a class="navbar-brand" href="#">Sticky Bottom</a>
  </div>
</nav>

Advanced features

Extend your navbar's functionality with scrollable navigation, external content control, offcanvas integration, and other specialized features.

Scrollable content

For navbars with many items, add .navbar-nav-scroll to enable scrolling:

html

<nav class="navbar large:navbar-expand bg-evident">
  <div class="container fluid">
    <a class="navbar-brand" href="#">Scrollable Nav</a>
    <button class="navbar-toggler" type="button" data-cx-toggle="collapse" data-cx-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav me-auto my-xsmall large:my-0 navbar-nav-scroll" style="--cx-scroll-height: 100px;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 1</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-cx-toggle="dropdown" aria-expanded="false">Dropdown</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-separator"></li>
            <li><a class="dropdown-item" href="#">Something else</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 3</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 4</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-input me-xsmall" type="search" placeholder="Search" aria-label="Search"/>
        <button class="button outline primary" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Responsive behavior

Control when your navbar collapses with the .{breakpoint}:navbar-expand classes:

.small:navbar-expand - Collapses below the small breakpoint
.medium:navbar-expand - Collapses below the medium breakpoint
.large:navbar-expand - Collapses below the large breakpoint
.xlarge:navbar-expand - Collapses below the extra large breakpoint
.2xlarge:navbar-expand - Collapses below the 2x large breakpoint
.navbar-expand - Never collapses
No .navbar-expand class - Always collapsed

Toggle button placement

The position of the toggle button depends on the order of elements in your markup:

html

<nav class="navbar large:navbar-expand bg-evident">
  <div class="container fluid">
    <button class="navbar-toggler" type="button" data-cx-toggle="collapse" data-cx-target="#navbarTogglePosition1" aria-controls="navbarTogglePosition1" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Brand on Right</a>
    <div class="collapse navbar-collapse" id="navbarTogglePosition1">
      <ul class="navbar-nav me-auto mb-xsmall large:mb-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-input me-xsmall" type="search" placeholder="Search" aria-label="Search"/>
        <button class="button outline primary" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

External content control

The navbar toggler can control content outside the navbar:

External content panel

This content is outside the navbar but controlled by it.

html

<div class="collapse bg-evident" id="navbarToggleExternalContent">
  <div class="p-large">
    <h5 class="fg-main h4">External content panel</h5>
    <span class="fg-subtle">This content is outside the navbar but controlled by it.</span>
  </div>
</div>
<nav class="navbar bg-evident">
  <div class="container fluid">
    <button class="navbar-toggler" type="button" data-cx-toggle="collapse" data-cx-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

Offcanvas integration

Transform your navbar into an offcanvas drawer for a modern interface pattern:

html

<nav class="navbar bg-evident fixed-top">
  <div class="container fluid">
    <a class="navbar-brand" href="#">Offcanvas Navbar</a>
    <button class="navbar-toggler" type="button" data-cx-toggle="offcanvas" data-cx-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon icon-main"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Navigation Menu</h5>
        <button type="button" class="close-button" data-cx-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-medium">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-cx-toggle="dropdown" aria-expanded="false">Dropdown</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li>
                <hr class="dropdown-separator">
              </li>
              <li><a class="dropdown-item" href="#">Something else</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex mt-medium" role="search">
          <input class="form-input me-xsmall" type="search" placeholder="Search" aria-label="Search"/>
          <button class="button outline primary" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

CSS

This component can be customized using CSS variables, allowing for styles to be modified dynamically on the page. These CSS variables are part of Chassis CSS's design token system, giving design teams control over component appearance. See the design tokens page for more details.

Custom properties

These CSS variables control the component's appearance and can be modified dynamically on the page. Components use cascading variables, allowing seamless variations in size, color, and style without redundant style declarations through component inheritance and the context class system.

scss/_navbar.scss

--#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
--#{$prefix}navbar-padding-y: #{$navbar-padding-y};
--#{$prefix}navbar-fg-color: #{$navbar-fg-color};
--#{$prefix}navbar-link-main-color: #{$navbar-link-main-color};
--#{$prefix}navbar-link-hover-color: #{$navbar-link-hover-color};
--#{$prefix}navbar-link-active-color: #{$navbar-link-active-color};
--#{$prefix}navbar-link-disabled-color: #{$navbar-link-disabled-color};
--#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
--#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
--#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
--#{$prefix}navbar-brand-line-height: #{$navbar-brand-line-height};
--#{$prefix}navbar-brand-fg-color: #{$navbar-brand-fg-color};
--#{$prefix}navbar-brand-hover-color: #{$navbar-brand-hover-color};
--#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
--#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
--#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
--#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
--#{$prefix}navbar-toggler-icon: #{$navbar-toggler-icon};
--#{$prefix}navbar-toggler-icon-color: #{$navbar-toggler-icon-color};
--#{$prefix}navbar-toggler-border-color: #{$navbar-toggler-border-color};
--#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
--#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
--#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};
@if $navbar-link-font {
  --#{$prefix}navbar-link-font-family: #{map-get($nav-link-font, font-family)};
  --#{$prefix}navbar-link-font-weight: #{map-get($nav-link-font, font-weight)};
  @include rfs(map-get($navbar-link-font, font-size), --#{$prefix}navbar-link-font-size);
  @include rfs(map-get($navbar-link-font, line-height), --#{$prefix}navbar-link-line-height);
}

Additional CSS variables for .navbar-nav:

scss/_navbar.scss

--#{$prefix}link-padding-x: 0;
--#{$prefix}link-padding-y: #{$nav-link-padding-y};
--#{$prefix}link-main-color: var(--#{$prefix}navbar-link-main-color);
--#{$prefix}link-hover-color: var(--#{$prefix}navbar-link-hover-color);
--#{$prefix}link-active-color: var(--#{$prefix}navbar-link-active-color);
--#{$prefix}link-disabled-color: var(--#{$prefix}navbar-link-disabled-color);
@if $navbar-link-font {
  --#{$prefix}link-font-family: var(--#{$prefix}navbar-link-font-family);
  --#{$prefix}link-font-weight: var(--#{$prefix}navbar-link-font-weight);
  --#{$prefix}link-font-size: var(--#{$prefix}navbar-link-font-size);
  --#{$prefix}link-line-height: var(--#{$prefix}navbar-link-line-height);
  // @include map-font($nav-link-font, nav);
}

Sass variables

These Sass variables are also exposed as CSS custom properties using the --cx- prefix. A Sass variable $variable-name becomes available as --cx-variable-name in CSS, allowing for styles to be modified dynamically on the page. See the context components page for more details.

scss/_variables.scss

$navbar-padding-y:                  $spacer * .5;
$navbar-padding-x:                  null;

$navbar-link-font:                  null; //$cx-font-text-medium-normal;
$navbar-fg-color:                   #{to-opacity(var(--#{$prefix}fg-main), .65)};
$navbar-link-main-color:            $navbar-fg-color;
$navbar-link-hover-color:           #{to-opacity(var(--#{$prefix}fg-main), .85)};
$navbar-link-active-color:          #{to-opacity(var(--#{$prefix}fg-main), 1)};
$navbar-link-disabled-color:        #{to-opacity(var(--#{$prefix}fg-main), var(--#{$prefix}opacity-fg-slight))};

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

$navbar-brand-fg-color:             $navbar-link-active-color;
$navbar-brand-hover-color:          $navbar-link-active-color;

$navbar-brand-font-size:            $font-size-text-xlarge;
$navbar-brand-line-height:          $line-height-text-xlarge;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$navbar-link-height:                null; //$font-size-text-medium * $line-height-text-medium + $nav-link-padding-y * 2;
$navbar-brand-height:               null; //$navbar-brand-font-size * $navbar-brand-line-height;
// $navbar-brand-padding-y:            null; //($navbar-link-height - $navbar-brand-height) * .5;
$navbar-brand-padding-y:            #{calc((($nav-link-padding-y * 2 + var(--#{$prefix}nav-link-line-height, var(--#{$prefix}line-height))) - $navbar-brand-line-height) * .5)}; //($navbar-link-height - $navbar-brand-height) * .5;
$navbar-brand-margin-end:           1rem;

$navbar-toggler-padding-y:          .25rem;
$navbar-toggler-padding-x:          .75rem;
$navbar-toggler-font-size:          $font-size-text-large;
$navbar-toggler-border-radius:      $button-medium-border-radius;
$navbar-toggler-focus-width:        $button-focus-width;
$navbar-toggler-transition:         box-shadow .15s ease-in-out;
$navbar-toggler-icon:               svg-icon("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='currentcolor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-toggler-icon-color:         $navbar-fg-color;
$navbar-toggler-border-color:       #{to-opacity(var(--#{$prefix}fg-main), var(--#{$prefix}opacity-border-subtle))};

Responsive classes

Navbar expand/collapse classes are generated via these breakpoints:

scss/_navbar.scss

// Responsive expansion system for navbars
//
// Generates a series of `.navbar-expand-*` responsive classes that control
// at which breakpoint the navbar switches between collapsed and expanded states.
// These classes modify navbar layout, positioning, and visibility of components.
//
// Example: .navbar-expand-lg will be collapsed on screens smaller than 'lg'
// and expanded on 'lg' screens and above.
@each $breakpoint in map-keys($grid-breakpoints) {
  $next: breakpoint-next($breakpoint, $grid-breakpoints);
  $prefix-bp: breakpoint-prefix($next, $grid-breakpoints);

  .#{$prefix-bp}navbar-expand {
    @include media-breakpoint-up($next) {
      flex-wrap: nowrap;
      justify-content: flex-start;

      .navbar-nav {
        flex-direction: row;

        .dropdown-menu {
          position: absolute;
        }

        .nav-link {
          padding-right: var(--#{$prefix}navbar-nav-link-padding-x);
          padding-left: var(--#{$prefix}navbar-nav-link-padding-x);
          &::after {
            margin-right: #{calc(-.5 * var(--#{$prefix}caret-spacing))};
            margin-left: #{calc(.5 * var(--#{$prefix}caret-spacing))};
          }
        }
      }

      .navbar-nav-scroll {
        overflow: visible;
      }

      .navbar-collapse {
        display: flex !important; // stylelint-disable-line declaration-no-important
        flex-basis: auto;
      }

      .navbar-toggler {
        display: none;
      }

      .offcanvas {
        // stylelint-disable declaration-no-important
        position: static;
        z-index: auto;
        flex-grow: 1;
        width: auto !important;
        height: auto !important;
        visibility: visible !important;
        background-color: transparent !important;
        border: 0 !important;
        transform: none !important;
        @include box-shadow(none);
        @include transition(none);
        // stylelint-enable declaration-no-important

        .offcanvas-header {
          display: none;
        }

        .offcanvas-body {
          display: flex;
          flex-grow: 0;
          padding: 0;
          overflow-y: visible;
        }
      }
    }
  }
}

Navbar

Overview

Key features

Basic structure

Accessibility

Content components

Branding

Text branding

Logo image

Combined image and text

Navigation links

Alternative markup

With dropdowns

Forms

Text content

Theming

Dark mode

Context variants

Layout options

Containers

Positioning

Advanced features

Scrollable content

Responsive behavior

Toggle button placement

External content control

External content panel

Offcanvas integration

CSS

Custom properties

Sass variables

Responsive classes