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

Deprecated in v5.3.3

Heads up! Dark variants for components are deprecated in Boosted v5.3.3. They are replaced by our contextual dark mode.

Add data-bs-theme="dark" to the .local-nav or any ancestor element to enable a component-specific color mode. Learn more about our color modes.

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};

Sass variables

scss/_variables.scss

$local-nav-padding-y:           $navbar-nav-link-padding-y;
$local-nav-color:               null;
$local-nav-bg:                  var(--#{$prefix}body-bg);
$local-nav-hover-color:         var(--#{$prefix}link-hover-color);
$local-nav-hover-bg:            var(--#{$prefix}secondary-bg);
$local-nav-active-color:        var(--#{$prefix}primary);
$local-nav-active-bg:           var(--#{$prefix}tertiary-active-bg);
$local-nav-active-marker-width: $spacer * .2;
$local-nav-border-color:        var(--#{$prefix}border-color-subtle);
$local-nav-border-width:        calc(var(--#{$prefix}border-width) * .5); // stylelint-disable-line function-disallowed-list