Innovation Cup navbar

Documentation and examples for Boosted Innovation Cup’s exclusive responsive navbars.

On this page

How it works

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

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

Structure

Innovation Cup 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: Innovation Cup 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 Innovation Cup 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="English version" aria-current="true">EN</a></li>
      <li class="nav-item"><a class="nav-link" href="#" aria-label="Version française" lang="fr" hreflang="fr">FR</a></li>
      <li class="nav-item"><a class="nav-link" href="#" aria-label="Version 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">

      <!-- Innovation Cup 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="English version">EN</a></li>
          <li class="nav-item"><a class="nav-link" href="#" aria-label="Version française" lang="fr" hreflang="fr">FR</a></li>
          <li class="nav-item"><a class="nav-link" href="#" aria-label="Version 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">

      <!-- Innovation Cup brand logo -->
      <div class="navbar-brand me-auto me-lg-4">
        <a class="stretched-link" href="#">
          <img src="/innovation-cup/docs/0.2/assets/brand/boosted-innovation-cup-logo.png" width="50" height="50" alt="Boosted Innovation Cup - 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="#">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="/innovation-cup/docs/0.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="/innovation-cup/docs/0.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="/innovation-cup/docs/0.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 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">

      <!-- Innovation Cup brand logo -->
      <div class="navbar-brand me-auto me-lg-4">
        <a class="stretched-link" href="#">
          <img src="/innovation-cup/docs/0.2/assets/brand/boosted-innovation-cup-logo.png" width="50" height="50" alt="Boosted Innovation Cup - 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">

      <!-- Innovation Cup brand logo -->
      <div class="navbar-brand me-auto me-lg-4">
        <a class="stretched-link" href="#">
          <img src="/innovation-cup/docs/0.2/assets/brand/boosted-innovation-cup-logo.png" width="50" height="50" alt="Boosted Innovation Cup - 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">

      <!-- Innovation Cup 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="/innovation-cup/docs/0.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 Innovation Cup navbar behavior in action here.

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 Innovation Cup 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">

      <!-- Innovation Cup 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="#">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

As part of Boosted Innovation Cup’s evolving CSS variables approach, Innovation Cup 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 Innovation Cup 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;

Innovation Cup navbar

How it works

Structure

Behavior

Example

Supra bar

Standard

With additional navbar

Responsive behavior

Global header

Standard

With title

With search box

Minimizing behavior

Navigation under

CSS

Variables

Sass variables