Navigation
ready

Introduction

The navigation block.

Examples

Default nav

<nav class="nav">
      <ul class="nav__list">
          <li class="nav__list-item">
              <a href="#" class="nav__link">Link 1</a>
          </li>
          <li class="nav__list-item">
              <a href="#" class="nav__link">Link 2</a>
          </li>
          <li class="nav__list-item">
              <a href="#" class="nav__link">Link 3</a>
          </li>
      </ul>
    </nav>

Horizontal nav (always)

<nav class="nav">
      <ul class="nav__list">
          <li class="nav__list-item nav__list-item--x">
              <a href="#" class="nav__link">Link 1</a>
          </li>
          <li class="nav__list-item nav__list-item--x">
              <a href="#" class="nav__link">Link 2</a>
          </li>
          <li class="nav__list-item nav__list-item--x">
              <a href="#" class="nav__link">Link 3</a>
          </li>
      </ul>
    </nav>

Horizontal nav spaced (always)

<nav class="nav">
      <ul class="nav__list">
          <li class="nav__list-item nav__list-item--x nav__list-item--x-space">
              <a href="#" class="nav__link">Link 1</a>
          </li>
          <li class="nav__list-item nav__list-item--x nav__list-item--x-space">
              <a href="#" class="nav__link">Link 2</a>
          </li>
          <li class="nav__list-item nav__list-item--x nav__list-item--x-space">
              <a href="#" class="nav__link">Link 3</a>
          </li>
      </ul>
    </nav>

Horizontal nav spaced at large breakpoint <span class'text-small'>(Can be applied to all breakpoints)</span>

<nav class="nav">
      <ul class="nav__list">
          <li class="nav__list-item nav__list-item--x-large nav__list-item--x-space">
              <a href="#" class="nav__link">Link 1</a>
          </li>
          <li class="nav__list-item nav__list-item--x-large nav__list-item--x-space">
              <a href="#" class="nav__link">Link 2</a>
          </li>
          <li class="nav__list-item nav__list-item--x-large nav__list-item--x-space">
              <a href="#" class="nav__link">Link 3</a>
          </li>
      </ul>
    </nav>

Chrome nav

<nav class="nav nav--chrome">
      <ul class="nav__list">
          <li class="nav__list-item">
              <a href="#" class="nav__link nav__link--chrome">Basic link</a>
          </li>
          <li class="nav__list-item">
              <a href="#" class="nav__link nav__link--chrome is-selected">Selected Link</a>
          </li>
          <li class="nav__list-item">
              <a href="#" class="nav__link nav__link--chrome is-disabled">Disabled Link</a>
          </li>
          <li class="nav__list-item">
              <a href="#" class="nav__link nav__link--chrome">Basic link</a>
          </li>
          <li class="nav__list-item">
              <a href="#" class="nav__link nav__link--chrome is-disabled is-selected">Disabled & Selected Link</a>
          </li>
          <li class="nav__list-item">
              <a href="#" class="nav__link nav__link--chrome">Basic link</a>
          </li>
      </ul>
    </nav>

Showroom nav

<nav class="nav">
      <ul class="nav__list">
          <li class="nav__list-item nav__list-item--x-large nav__list-item--x-space nav__list-item--x-showroom">
              <a href="#" class="nav__link link--alt text-caps text-small text-bold">Get a loan</a>
          </li>
          <li class="nav__list-item nav__list-item--x-large nav__list-item--x-space nav__list-item--x-showroom">
              <a href="#" class="nav__link link--alt text-caps text-small text-bold">Prospective investor</a>
          </li>
          <li class="nav__list-item nav__list-item--x-large nav__list-item--x-space nav__list-item--x-showroom fly-out is-open"
              data-js="fly-out"
              data-fly-out-event-type="hover">
                <span class="nav__link link--alt text-caps text-small text-bold"
                      data-js="fly-out-toggle">Resources</span>
                <nav class="nav nav--showroom fly-out__content" data-js="fly-out-content">
                  <ul class="nav__list">
                      <li class="nav__list-item">
                          <a href="#" class="nav__link nav__link--showroom">Blog</a>
                      </li>
                      <li class="nav__list-item">
                          <a href="#" class="nav__link nav__link--showroom">FAQs</a>
                      </li>
                  </ul>
                </nav>
          </li>
          <li class="nav__list-item nav__list-item--x-large nav__list-item--x-space nav__list-item--x-showroom fly-out"
              data-js="fly-out"
              data-fly-out-event-type="hover">
                <span class="nav__link link--alt text-caps text-small text-bold"
                      data-js="fly-out-toggle">Community</span>
                <nav class="nav nav--showroom fly-out__content" data-js="fly-out-content">
                  <ul class="nav__list">
                      <li class="nav__list-item">
                          <a href="#" class="nav__link nav__link--showroom">Scholarship</a>
                      </li>
                      <li class="nav__list-item">
                          <a href="#" class="nav__link nav__link--showroom">Our Ambassadors</a>
                      </li>
                  </ul>
                </nav>
          </li>
          <li class="nav__list-item nav__list-item--x-large nav__list-item--x-space nav__list-item--x-showroom fly-out"
              data-js="fly-out"
              data-fly-out-event-type="hover">
                <span class="nav__link link--alt text-caps text-small text-bold"
                      data-js="fly-out-toggle">About us</span>
                <nav class="nav nav--showroom fly-out__content" data-js="fly-out-content">
                  <ul class="nav__list">
                      <li class="nav__list-item">
                          <a href="#" class="nav__link nav__link--showroom">The Company</a>
                      </li>
                      <li class="nav__list-item">
                          <a href="#" class="nav__link nav__link--showroom">Press</a>
                      </li>
                  </ul>
                </nav>
          </li>
      </ul>
    </nav>

Dependencies

  • src/styles/base/*.scss
  • src/styles/components/blocks/_nav.scss
  • src/styles/base/_shame.scss

Usage

Class/JavaScript Hook Description Required?
.notice Creates a notice element that can have a wide range of children as content. Required
.nav Placed on the outer-most tag that will contain the navigation list and items Required.
.nav__list Placed on the tag that will contain the navigation items Required.
.nav__list-item Placed on the tag that will be a navigation item Required.
.nav__list-item--x[-BREAKPOINT] Make the item appear inline. Applied to all items makes a horizontal nav. Optional. Can add a breakpoint name so style only works at specific sizes.
.nav__list-item--x-space[-BREAKPOINT] Creates space between the horizontal nav items. Applied to all items. Optional. Can only be used with .nav__list-item--x. Can add a breakpoint name so style only works at specific sizes.
.nav__btn--max-BREAKPOINT Makes nav link look like a button up to specific breakpoint. Optional.
.nav--right Right aligns the text inside a nav. Optional.
.nav--legal Adds a bottom margin to the nav. Optional.
.nav--chrome Adds some fancier styling to a nav. Optional.
.nav__link--chrome Adds some fancier styling to a nav link. Optional.