Added in v5.3

Local navigation

Use local navigation to add a navigation that will nicely wrap on small viewports.

On this page

Example

Resize your browser to see the behavior of this component.

Since the component is supposed to be rendered on a full-size page, there are some slight rendering issues in the mobile viewport in the context of this documentation page.

html

<nav class="local-nav" aria-label="Basic local navigation">
  <button class="local-nav-button collapsed d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLocalNav" aria-expanded="false" aria-controls="collapseLocalNav">
    <span class="container-xxl">Shop</span>
  </button>
  <div id="collapseLocalNav" class="container-xxl local-nav-collapse d-lg-block collapse">
      <div class="navbar navbar-expand-lg">
        <ul class="navbar-nav w-100">
          <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Discover</span></a></li>
          <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><span class="container-xxl">Shop</span></a></li>
          <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Services</span></a></li>
          <li class="nav-item"><a class="nav-link disabled" aria-disabled="true"><span class="container-xxl">Contact</span></a></li>
        </ul>
      </div>
  </div>
</nav>

Dark variant

Add .local-nav-dark to the .local-nav for a dark variant. Don’t forget to add .navbar-dark to the navbar.

html

<nav class="local-nav local-nav-dark" aria-label="Local navigation on dark">
  <button class="local-nav-button collapsed d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLocalNavDark" aria-expanded="false" aria-controls="collapseLocalNavDark">
    <span class="container-xxl">Shop</span>
  </button>
  <div id="collapseLocalNavDark" class="container-xxl local-nav-collapse d-lg-block collapse">
      <div class="navbar navbar-dark navbar-expand-lg">
        <ul class="navbar-nav w-100">
          <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Discover</span></a></li>
          <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><span class="container-xxl">Shop</span></a></li>
          <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Services</span></a></li>
          <li class="nav-item"><a class="nav-link disabled" aria-disabled="true"><span class="container-xxl">Contact</span></a></li>
        </ul>
      </div>
  </div>
</nav>

CSS

Variables

Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

scss/_local-navigation.scss

--#{$prefix}local-nav-padding-y: #{$local-nav-padding-y};
--#{$prefix}local-nav-color: #{$local-nav-color};
--#{$prefix}local-nav-bg: #{$local-nav-bg};
--#{$prefix}local-nav-hover-color: #{$local-nav-hover-color};
--#{$prefix}local-nav-hover-bg: #{$local-nav-hover-bg};
--#{$prefix}local-nav-active-color: #{$local-nav-active-color};
--#{$prefix}local-nav-active-bg: #{$local-nav-active-bg};
--#{$prefix}local-nav-active-marker-width: #{$local-nav-active-marker-width};
--#{$prefix}local-nav-border-color: #{$local-nav-border-color};
--#{$prefix}local-nav-border-width: #{$local-nav-border-width};

Customization through CSS variables can be seen on the .local-nav-dark class where we override specific values without adding duplicate CSS selectors.

scss/_local-navigation.scss

--#{$prefix}local-nav-color: #{$local-nav-dark-color};
--#{$prefix}local-nav-bg: #{$local-nav-dark-bg};
--#{$prefix}local-nav-hover-color: #{$local-nav-dark-hover-color};
--#{$prefix}local-nav-hover-bg: #{$local-nav-dark-hover-bg};
--#{$prefix}local-nav-active-color: #{$local-nav-dark-active-color};
--#{$prefix}local-nav-active-bg: #{$local-nav-dark-active-bg};
--#{$prefix}local-nav-border-color: #{$local-nav-dark-border-color};

Sass variables

Variables for all local navigations:

scss/_variables.scss

$local-nav-padding-y:           $navbar-nav-link-padding-y;
$local-nav-color:               var(--#{$prefix}body-color);
$local-nav-bg:                  var(--#{$prefix}body-bg);
$local-nav-hover-color:         $local-nav-color;
$local-nav-hover-bg:            $gray-300;
$local-nav-active-color:        $accessible-orange;
$local-nav-active-bg:           $gray-400;
$local-nav-active-marker-width: $spacer * .2;
$local-nav-border-color:        $gray-500;
$local-nav-border-width:        calc(var(--#{$prefix}border-width) * .5); // stylelint-disable-line function-disallowed-list

Variables for the dark local navigation:

scss/_variables.scss

$local-nav-dark-color:          $white;
$local-nav-dark-bg:             $black;
$local-nav-dark-hover-color:    $brand-orange;
$local-nav-dark-hover-bg:       $gray-900;
$local-nav-dark-active-color:   $local-nav-dark-hover-color;
$local-nav-dark-active-bg:      $gray-700;
$local-nav-dark-border-color:   $gray-700;