Orange navbar

Documentation and examples for Boosted’s exclusive responsive navbars.

On this page

Added in v5.2.0

How it works

Orange navbars are based on the navbar component. They add some display management and introduce the Supra bar component.

An Orange navbar will always be at the top of any page.

Structure

Orange navbar is basically a <header> that will contain your <nav> elements:

an optional Supra bar above the Global header
a mandatory Global header
an optional Navigation under below the Global header

Use our spacing and flex utility classes for controlling spacing and alignment within navbars.

For more details, please refer to the navbar supported content.

Behavior

Responsive behavior: Orange navbars are designed to be responsive on all devices.

.navbar-expand{-sm|-md|-lg|-xl|-xxl} on <nav> will allow:

Supra bar and Navigation under bar to be displayed starting at the indicated breakpoint
Global header to collapse its content behind the burger menu button. For more information, visit Navbar/Responsive behaviors

Behavior on scroll: Add either .fixed-top or .sticky-top to the <header> to change its behavior on scroll. Please see our dedicated part to have more details.

Example

For more examples, visit our examples page.

Supra bar

A Supra bar is a simple navigation bar used with .supra that can be displayed as a first part of an Orange navbar. This component should be:

visible only for the larger screens (lg to xxl breakpoints) using .navbar-expand-*.
displayed inside the burger menu for smaller screens. There it has to be split in 2 parts.

Refer to Responsive behavior to have more details.

Standard

html

<nav class="navbar navbar-dark navbar-expand-lg bg-dark supra" aria-label="Supra-navigation - Only left navbar example">
  <div class="container-xxl">
    <ul class="navbar-nav me-auto">
      <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Personal</a></li>
      <li class="nav-item"><a href="#" class="nav-link">Business</a></li>
    </ul>
  </div>
</nav>

An additional navbar (with text or icon items) can be added on the right of the Supra bar.

html

<nav class="navbar navbar-dark navbar-expand-lg bg-dark supra" aria-label="Supra navigation - With an additional languages navbar example">
  <div class="container-xxl">
    <ul class="navbar-nav me-auto">
      <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Personal</a></li>
      <li class="nav-item"><a href="#" class="nav-link">Business</a></li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item"><a class="nav-link active" href="#" aria-label="EN English version" aria-current="true">EN</a></li>
      <li class="nav-item"><a class="nav-link" href="#" aria-label="FR Version française" lang="fr" hreflang="fr">FR</a></li>
      <li class="nav-item"><a class="nav-link" href="#" aria-label="ES Versión en español" lang="es" hreflang="es">ES</a></li>
    </ul>
  </div>
</nav>

Responsive behavior

<header>
  <!-- Supra bar -->
  <nav class="navbar navbar-dark navbar-expand-lg bg-dark supra" aria-label="Supra navigation - Responsive behavior example">
    <div class="container-xxl">
      <!-- Left navbar of the Supra bar -->
      <ul class="navbar-nav me-auto">
        ...
      </ul>
      <!-- Right navbar of the Supra bar -->
      <ul class="navbar-nav">
        ...
      </ul>
    </div>
  </nav>

  <!-- Global header -->
  <nav class="navbar navbar-dark bg-dark navbar-expand-lg" aria-label="Global navigation - Responsive behavior with a supra bar example">
    <div class="container-xxl">

      <!-- Orange brand logo -->
      ...

      <!-- Burger menu (visible on small screens) -->
      ...

      <!-- Navbar with links -->
      <div id="global-header-0.1" class="navbar-collapse collapse me-lg-auto global-header-0">
        <!-- Left navbar of the Supra bar -->
        <ul class="navbar-nav border-top border-1 border-dark d-flex flex-row d-lg-none supra">
          <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Personal</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Business</a></li>
        </ul>

        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link active" href="#">Discover</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Shop</a></li>
        </ul>

        <!-- Right navbar of the Supra bar -->
        <ul class="navbar-nav border-top border-1 border-dark d-flex flex-row d-lg-none">
          <li class="nav-item"><a class="nav-link active" href="#" aria-label="EN English version" aria-current="true">EN</a></li>
          <li class="nav-item"><a class="nav-link" href="#" aria-label="FR Version française" lang="fr" hreflang="fr">FR</a></li>
          <li class="nav-item"><a class="nav-link" href="#" aria-label="ES Versión en español" lang="es" hreflang="es">ES</a></li>
        </ul>
      </div>

      <!-- Navbar with action icons -->
      ...
    </div>
  </nav>
</header>

Standard

<header>
  <nav class="navbar navbar-dark bg-dark navbar-expand-lg" aria-label="Global navigation - Standard example">
    <div class="container-xxl">

      <!-- Orange brand logo -->
      <div class="navbar-brand me-auto me-lg-4">
        <a class="stretched-link" href="#">
          <img src="/docs/5.2/assets/brand/orange-logo.svg" width="50" height="50" alt="Boosted - Back to Home" loading="lazy">
        </a>
      </div>

      <!-- Burger menu (visible on small screens) -->
      <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target=".global-header-1" aria-controls="global-header-1.1 global-header-1.2" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <!-- Navbar with links -->
      <div id="global-header-1.1" class="navbar-collapse collapse me-lg-auto global-header-1">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link active" href="#" aria-current="page">Discover</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Shop</a></li>
        </ul>
      </div>

      <!-- Navbar with action icons -->
      <div id="global-header-1.2" class="navbar-collapse collapse d-sm-flex global-header-1">
        <ul class="navbar-nav flex-row">
          <li class="nav-item">
            <a href="#" class="nav-link nav-icon">
              <svg width="1.5rem" height="1.5rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
                <use xlink:href="/docs/5.2/assets/img/boosted-sprite.svg#search" />
              </svg>
              <span class="visually-hidden">Search</span>
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link nav-icon">
              <svg width="1.5rem" height="1.5rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
                <use xlink:href="/docs/5.2/assets/img/boosted-sprite.svg#buy" />
              </svg>
              <span class="visually-hidden">Basket</span>
              <span class="position-relative align-self-start">
                <span class="badge bg-info rounded-pill position-absolute top-0 fs-6 text-white translate-middle">
                  1
                  <span class="visually-hidden">shopping basket items</span>
                </span>
              </span>
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link nav-icon">
              <img src="/docs/5.2/assets/img/navbar-contact.png" width="25" height="25" role="img" alt="User" loading="lazy">
              <span class="visually-hidden">My account</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

With custom logo

Even though you should use the Master or Small logo, you can still replace it by an other one depending on your needs.

You should consider having a responsive SVG logo. In order to do so, you may set up a responsive rendering into your SVG, as we do with the Master logo.

If you do not intend to use your own SVG, you should explore the DOM solution and therefore do as if you had a title on one or two lines.

<header>
  <nav class="navbar navbar-dark bg-dark navbar-expand-lg" aria-label="Global navigation - With custom logo example">
    <div class="container-xxl">

      <!-- Orange brand logo -->
      <div class="navbar-brand me-auto">
        <a class="stretched-link" href="#">
          <img src="/docs/5.2/assets/brand/OBS-logo.svg" width="50" height="50" alt="Boosted - Back to Home" loading="lazy">
        </a>
      </div>

      <!-- Burger menu (visible on small screens) -->
      ...

      <!-- Navbar with links -->
      ...

      <!-- Navbar with action icons -->
      ...
    </div>
  </nav>
</header>

With title

Next to the brand logo, you can add a title that can be displayed on one or two lines.

<header>
  <nav class="navbar navbar-dark bg-dark navbar-expand-lg" aria-label="Global navigation - With one line title example">
    <div class="container-xxl">

      <!-- Orange brand logo -->
      <div class="navbar-brand me-auto me-lg-4">
        <a class="stretched-link" href="#">
          <img src="/docs/5.2/assets/brand/orange-logo.svg" width="50" height="50" alt="Boosted - Back to Home" loading="lazy">
        </a>
        <h1 class="title">Title</h1>
      </div>

      <!-- Burger menu (visible on small screens) -->
      ...

      <!-- Navbar with links -->
      ...

      <!-- Navbar with action icons -->
      ...
    </div>
  </nav>
</header>

<header>
  <nav class="navbar navbar-dark bg-dark navbar-expand-lg" aria-label="Global navigation - With two lines title example">
    <div class="container-xxl">

      <!-- Orange brand logo -->
      <div class="navbar-brand me-auto me-lg-4">
        <a class="stretched-link" href="#">
          <img src="/docs/5.2/assets/brand/orange-logo.svg" width="50" height="50" alt="Boosted - Back to Home" loading="lazy">
        </a>
        <h1 class="two-lined">
          Title Line 1
          <br>
          Title Line 2
        </h1>
      </div>

      <!-- Burger menu (visible on small screens) -->
      ...

      <!-- Navbar with links -->
      ...

      <!-- Navbar with action icons -->
      ...
    </div>
  </nav>
</header>

You can add a search input into your Global header.

<header>
  <nav class="navbar navbar-dark bg-dark navbar-expand-lg" aria-label="Global navigation - With search box example">
    <div class="container-xxl">

      <!-- Orange brand logo -->
      ...

      <!-- Burger menu (visible on small screens) -->
      ...

      <!-- Navbar with links -->
      ...

      <!-- Navbar with action icons -->
      <form class="d-flex d-none d-lg-flex nav-item" role="search">
        <!-- todo : reforge when .dark-input -->
        <input class="form-control bg-transparent text-white border border-2 border-dark" type="search" placeholder="Search" aria-label="Search">
      </form>
      <div id="global-header-5.2" class="navbar-collapse collapse d-sm-flex global-header-5">
        <ul class="navbar-nav flex-row">
          <li class="nav-item d-lg-none">
            <a href="#" class="nav-link nav-icon">
              <svg width="1.5rem" height="1.5rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
                <use xlink:href="/docs/5.2/assets/img/boosted-sprite.svg#search" />
              </svg>
              <span class="visually-hidden">Search</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

Minimizing behavior

When scrolling the page, for breakpoints from md to xxl, the Global header’s height decreases when .sticky-top is used on <header>.

You can see a full example of the minimizing Orange navbar behavior in action here.

The minimized global header will always use the small Master logo.

Be careful when using .fixed-top, the collapsed content should be escapable easily.

If you don’t use the sticky top version you can optimize your JavaScript by not importing this component. Refer to Lean JavaScript for more information.

A Navigation under bar is a simple navigation bar, different than a Supra bar. It can be used as a last part of an Orange navbar whenever your header may have too many items to stand on one line.

It should be visible only for the larger screens (lg to xxl breakpoints) using .navbar-expand-*.

<header>
  <nav class="navbar navbar-dark bg-dark navbar-expand-lg" aria-label="Global navigation - Standard example with nav-under">
    <div class="container-xxl">

      <!-- Orange brand logo -->
      ...

      <!-- Burger menu (visible on small screens) -->
      ...

      <!-- Navbar with links -->
      ...

      <!-- Navbar with action icons -->
      ...
    </div>
  </nav>

  <nav class="navbar navbar-dark bg-dark navbar-expand-lg" aria-label="Global navigation - Nav-under example">
    <div class="container-xxl">
      <div id="global-header-6.1" class="navbar-collapse collapse m-0 global-header-6">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link active" href="#" aria-current="page">Label</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>

CSS

Variables

Added in v5.2.0

As part of Boosted’s evolving CSS variables approach, orange navbars now use local CSS variables on .navbar for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

  --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
  --#{$prefix}navbar-padding-y: 0; // Boosted mod: no padding in small breakpoints
  --#{$prefix}navbar-font-weight: #{$navbar-font-weight}; // Boosted mod
  --#{$prefix}navbar-border-width: #{$navbar-border-width}; // Boosted mod
  --#{$prefix}navbar-border-color: #{$navbar-border-color}; // Boosted mod
  --#{$prefix}navbar-color: #{$navbar-light-color};
  --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
  --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
  --#{$prefix}navbar-brand-margin-y: #{$navbar-brand-margin-y-xs}; // Boosted mod
  --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
  --#{$prefix}navbar-brand-logo-size: #{$navbar-brand-logo-size-xs}; // Boosted mod
  --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size-xs}; // Boosted mod
  --#{$prefix}navbar-brand-letter-spacing: #{$navbar-brand-letter-spacing-xs}; // Boosted mod
  --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
  --#{$prefix}navbar-nav-padding-top: 0; // Boosted mod
  --#{$prefix}navbar-nav-padding-x: 0; // Boosted mod
  --#{$prefix}navbar-nav-padding-bottom: 0; // Boosted mod
  --#{$prefix}navbar-nav-font-size: #{$font-size-base}; // Boosted mod
  --#{$prefix}navbar-nav-line-height: #{$line-height-base}; // Boosted mod
  --#{$prefix}navbar-nav-letter-spacing: #{$letter-spacing-base}; // Boosted mod
  --#{$prefix}navbar-nav-link-padding-y: #{$navbar-nav-link-padding-y}; // Boosted mod
  --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x-xs}; // Boosted mod
  --#{$prefix}navbar-nav-icon-padding-y: #{$navbar-nav-icon-padding-y-xs}; // Boosted mod
  --#{$prefix}navbar-nav-icon-padding-x: #{$navbar-nav-icon-padding-x-xs}; // Boosted mod
  --#{$prefix}navbar-nav-icon-size: #{$navbar-icon-size-xs}; // Boosted mod
  --#{$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-xs}; // Boosted mod
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg-small)}; // Boosted mod
  --#{$prefix}navbar-toggler-icon-filter: none; // Boosted mod
  --#{$prefix}navbar-toggler-border-color: #{$navbar-light-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};

For orange navbars, we added a responsive behavior on medium breakpoints and over.

  @include media-breakpoint-up(md) {
    --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
    --#{$prefix}navbar-brand-margin-y: #{$navbar-brand-margin-y};
    --#{$prefix}navbar-brand-logo-size: #{$navbar-brand-logo-size};
    --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
    --#{$prefix}navbar-brand-letter-spacing: #{$navbar-brand-letter-spacing};
    --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
    --#{$prefix}navbar-nav-icon-padding-y: #{$navbar-nav-icon-padding-y};
    --#{$prefix}navbar-nav-icon-padding-x: #{$navbar-nav-icon-padding-x};
    --#{$prefix}navbar-nav-icon-size: #{$navbar-icon-size};
    --#{$prefix}navbar-toggler-padding-y: #{$navbar-nav-icon-padding-y};
    --#{$prefix}navbar-toggler-padding-x: #{$navbar-nav-icon-padding-x};
    --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
    --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
  }

Supra bars just override some variables.

  --#{$prefix}navbar-padding-y: 0px; /* stylelint-disable-line length-zero-no-unit */
  --#{$prefix}navbar-nav-font-size: #{$font-size-sm};
  --#{$prefix}navbar-nav-line-height: #{$line-height-sm};
  --#{$prefix}navbar-nav-link-padding-y: #{$navbar-supra-link-padding-y};
  --#{$prefix}navbar-nav-link-padding-x: #{$navbar-supra-link-padding-x};
  --#{$prefix}navbar-nav-icon-padding-y: #{$navbar-supra-icon-padding-y};
  --#{$prefix}navbar-nav-icon-padding-x: #{$navbar-supra-icon-padding-x};
  --#{$prefix}navbar-nav-icon-size: #{$navbar-supra-icon-size};

Minimized bars just override some variables.

  @include media-breakpoint-up(md){
    --#{$prefix}navbar-padding-y: 0px; /* stylelint-disable-line length-zero-no-unit */
    --#{$prefix}navbar-brand-margin-y: #{$navbar-minimized-brand-margin-y};
    --#{$prefix}navbar-brand-logo-size: #{$navbar-brand-logo-size-xs};
    --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size-xs};
    --#{$prefix}navbar-brand-letter-spacing: #{$navbar-brand-letter-spacing-xs};
    --#{$prefix}navbar-nav-icon-padding-y: #{$navbar-minimized-nav-icon-padding-y};
    --#{$prefix}navbar-toggler-padding-y: #{$navbar-minimized-toggler-padding-y};

    .two-lined {
      --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size-two-lined-xs};
      --#{$prefix}navbar-brand-letter-spacing: #{$navbar-brand-letter-spacing-two-lined-xs};
    }
  }

Sass variables

For more details, please have a look at the exhaustive list of available variables:

$navbar-transition-duration:                $transition-duration;
$navbar-transition-timing-function:         $transition-timing;
$navbar-transition:                         padding-top $navbar-transition-duration $navbar-transition-timing-function, padding-bottom $navbar-transition-duration $navbar-transition-timing-function, $transition-focus;
$navbar-brand-transition:                   margin $navbar-transition-duration $navbar-transition-timing-function, $transition-focus;
$navbar-brand-logo-transition:              width $navbar-transition-duration $navbar-transition-timing-function, height $navbar-transition-duration $navbar-transition-timing-function;
$navbar-active-transition:                  bottom $navbar-transition-duration $navbar-transition-timing-function;

$navbar-border-width:                       $border-width * .5;
$navbar-border-color:                       $gray-500;

$navbar-brand-margin-y-xs:                  $spacer * .5;
$navbar-brand-logo-size-xs:                 $spacer * 1.5;
$navbar-brand-font-size-xs:                 1.3125rem;
$navbar-brand-letter-spacing-xs:            $letter-spacing-base * 5;
$navbar-brand-font-size-two-lined-xs:       1.0625rem;
$navbar-brand-letter-spacing-two-lined-xs:  $letter-spacing-base * 4;

$navbar-brand-margin-y:                     $spacer * .95;
$navbar-brand-logo-size:                    $spacer * 2.5;
$navbar-brand-letter-spacing:               $letter-spacing-base * 10;
$navbar-brand-font-size-two-lined:          1.8125rem;
$navbar-brand-letter-spacing-two-lined:     $letter-spacing-base * 8;

$navbar-icon-size-xs:                       $spacer * 1.25;
$navbar-icon-size:                          $spacer * 1.5;

$navbar-nav-icon-padding-y-xs:              $spacer * .6;
$navbar-nav-icon-padding-x-xs:              $spacer * .75;
$navbar-nav-icon-padding-y:                 $navbar-brand-margin-y;
$navbar-nav-icon-padding-x:                 $spacer;

$navbar-supra-link-padding-y:               $spacer * .6;
$navbar-supra-link-padding-x:               .46875rem;
$navbar-supra-icon-padding-y:               $spacer * .25;
$navbar-supra-icon-padding-x:               $navbar-nav-icon-padding-x-xs;
$navbar-supra-icon-size:                    $navbar-icon-size-xs;

$navbar-minimized-brand-margin-y:           $spacer * .75;
$navbar-minimized-nav-icon-padding-y:       $navbar-minimized-brand-margin-y;
$navbar-minimized-toggler-padding-y:        $navbar-minimized-brand-margin-y;

$navbar-badge-padding-y:                    .125rem;
$navbar-badge-padding-x:                    .375rem;
$navbar-badge-margin-top:                   .375rem;

Orange navbar

How it works

Structure

Behavior

Example

Supra bar

Standard

With additional navbar

Responsive behavior

Global header

Standard

With custom logo

With title

With search box

Minimizing behavior

Navigation under

CSS

Variables

Sass variables