Navigation

These components represent the types of navigation available. Spark separates Wide and Narrow Navigation patterns. We do this because we've found that in practice, a lot of elements need to be added to the narrow navigation and not to the wide navigation. For example, chat links, secondary navigation contents, legal links, etc.

Wide Navigation

This component is intended for wider viewports. On narrow viewports, you should use the Narrow Navigation component.

<nav role="navigation">
  <ul class="sprk-c-WideNavigation" data-sprk-navigation="wide">
    <li class="sprk-c-WideNavigation__item">
      <a class="sprk-c-WideNavigation__link" href="#nogo">Item 1</a>
    </li>
    <li class="sprk-c-WideNavigation__item" aria-haspopup="true" aria-expanded="false">
      <a class="sprk-c-WideNavigation__link" href="#nogo">Item 2
          <svg class="sprk-c-Icon sprk-c-WideNavigation__arrow" viewBox="0 0 100 100">
            <use xlink:href="#chevron-down" />
          </svg>
      </a>
      <ul class="sprk-c-WideNavigation sprk-c-WideNavigation--sub sprk-u-Display--none">
        <li class="sprk-c-WideNavigation__item sprk-c-WideNavigation__item--sub"><a class="sprk-c-WideNavigation__link sprk-c-WideNavigation__link--sub" href="#nogo">Item 1</a></li>
        <li class="sprk-c-WideNavigation__item sprk-c-WideNavigation__item--sub"><a class="sprk-c-WideNavigation__link sprk-c-WideNavigation__link--sub" href="#nogo">Item 2</a></li>
        <li class="sprk-c-WideNavigation__item sprk-c-WideNavigation__item--sub"><a class="sprk-c-WideNavigation__link sprk-c-WideNavigation__link--sub" href="#nogo">Item 3</a></li>
      </ul>
    </li>
    <li class="sprk-c-WideNavigation__item">
      <a class="sprk-c-WideNavigation__link" href="#nogo">Item 3</a>
    </li>
    <li class="sprk-c-WideNavigation__item" aria-haspopup="true" aria-expanded="false">
      <a class="sprk-c-WideNavigation__link" href="#nogo">Item 4
        <svg class="sprk-c-Icon sprk-c-WideNavigation__arrow" viewBox="0 0 100 100">
          <use xlink:href="#chevron-down" />
        </svg>
      </a>
      <ul class="sprk-c-WideNavigation sprk-c-WideNavigation--sub sprk-u-Display--none">
        <li class="sprk-c-WideNavigation__item sprk-c-WideNavigation__item--sub"><a class="sprk-c-WideNavigation__link sprk-c-WideNavigation__link--sub" href="#nogo">Item 1</a></li>
        <li class="sprk-c-WideNavigation__item sprk-c-WideNavigation__item--sub"><a class="sprk-c-WideNavigation__link sprk-c-WideNavigation__link--sub" href="#nogo">Item 2</a></li>
        <li class="sprk-c-WideNavigation__item sprk-c-WideNavigation__item--sub"><a class="sprk-c-WideNavigation__link sprk-c-WideNavigation__link--sub" href="#nogo">Item 3</a></li>
      </ul>
    </li>
    <li class="sprk-c-WideNavigation__item">
      <a class="sprk-c-WideNavigation__link" href="#nogo">Item 5</a>
    </li>
  </ul>
  <span class="sprk-c-Divider sprk-u-man"></span>
</nav>

Narrow Navigation

This component is intended for narrow viewports. On wide viewports, you should use the Wide Navigation component.

<nav role="navigation">
  <ul class="sprk-c-Accordion sprk-c-Accordion--navigation sprk-b-List sprk-b-List--bare">
    <li class="sprk-c-Accordion__item " data-sprk-toggle="container">
      <a aria-controls="details1" class="sprk-c-Accordion__summary " data-sprk-toggle="trigger" data-sprk-toggle-type="accordion" href="#">
        <span class="sprk-b-TypeBodyTwo sprk-c-Accordion__heading ">
          Item 1
        </span>

        <svg class="sprk-c-Icon sprk-c-Accordion__icon" data-sprk-toggle="icon" viewBox="0 0 448 512">
          <use xlink:href="#chevron-down"></use>
        </svg>
      </a>
      <ul class="sprk-b-List sprk-b-List--bare sprk-c-Accordion__details sprk-u-HideWhenJs" data-sprk-toggle="content">
        <li>
          <a class="sprk-b-Link sprk-b-Link--standalone sprk-u-pam" href="">Item 1</a>
        </li>
        <li>
          <a class="sprk-b-Link sprk-b-Link--standalone sprk-u-pam" href="">Item 2</a>
        </li>
        <li>
          <a class="sprk-b-Link sprk-b-Link--standalone sprk-u-pam" href="">Item 3</a>
        </li>
      </ul>
    </li>

    <li class="sprk-c-Accordion__item ">
      <a aria-controls="details1" class="sprk-c-Accordion__summary " href="#">
        <span class="sprk-b-TypeBodyTwo sprk-c-Accordion__heading ">
          Item 2
        </span>
      </a>
    </li>

    <li class="sprk-c-Accordion__item " data-sprk-toggle="container">
      <a aria-controls="details1" class="sprk-c-Accordion__summary " data-sprk-toggle="trigger" data-sprk-toggle-type="accordion" href="#">
        <span class="sprk-b-TypeBodyTwo sprk-c-Accordion__heading ">
          Item 3
        </span>

        <svg class="sprk-c-Icon sprk-c-Accordion__icon" data-sprk-toggle="icon" viewBox="0 0 448 512">
          <use xlink:href="#chevron-down"></use>
        </svg>
      </a>
      <ul class="sprk-b-List sprk-b-List--bare sprk-c-Accordion__details sprk-u-HideWhenJs" data-sprk-toggle="content">
        <li>
          <a class="sprk-b-Link sprk-b-Link--standalone sprk-u-pam" href="">Item 1</a>
        </li>
        <li>
          <a class="sprk-b-Link sprk-b-Link--standalone sprk-u-pam" href="">Item 2</a>
        </li>
        <li>
          <a class="sprk-b-Link sprk-b-Link--standalone sprk-u-pam" href="">Item 3</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Secondary Navigation

This component is intended for navigation that is not considered part of the main site navigation.

<nav role="navigation">
  <ul class="sprk-o-HorizontalList sprk-o-HorizontalList--spacing-medium">
    <li><a class="sprk-b-Link sprk-b-Link--standalone" href="#nogo">Item 1</a></li>
    <li><a class="sprk-b-Link sprk-b-Link--standalone" href="#nogo">Item 2</a></li>
    <li><a class="sprk-b-Link sprk-b-Link--standalone" href="#nogo">Item 3</a></li>
  </ul>
</nav>