Navigation
Getting Started
Fundamentals
Components
Utilities
Documentation

Navigation

Code Examples

Spark-Core

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.

Angular Information

The sprk-wide-navigation component expects an input called 'links', that contains an array of link objects that describe each link to render. The sprk-narrow-navigation-item and sprk-secondary-navigation-item also accept an input called 'subNav' that expects the same format.

Links Input Object Format

See below for the expected link data object keys:

Key Type Description
text string The text that is rendered on the page for the link.
href string The value assigned to the href attribute for that link.
analyticsString string The value assigned to the data-analytics attribute for that link.
active boolean Can be 'true' or 'false', determines whether that link represents the current page.
subNav array<object> Contains another set of links. The format for this sub object is the same. Represents sub-navigation tied to this link.

Wide

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>
          
<sprk-wide-navigation [links]="links"></sprk-wide-navigation>
const links = [ { text: 'Item 1', href: '/alerts', analyticsString: 'Link to Item 1', active: false, subNav: [ { text: 'Item 1', href: '/alerts', analyticsString: 'Link to Sub Item 1' }, { text: 'Item 2', href: '/alerts' }, { text: 'Item 3', href: '/alerts' }, ] }, { text: 'Item 2', href: '/icons', active: false, subNav: [ { text: 'Item 1', href: '#nogo' }, { text: 'Item 2', href: '#nogo' }, { text: 'Item 3', href: '#nogo' } ] }, { text: 'Item 3', href: '/links', active: false }, { text: 'Item 4', href: '/buttons', active: false, subNav: [ { text: 'Item 1', href: '#nogo' }, { text: 'Item 2', href: '#nogo' }, { text: 'Item 3', href: '#nogo' } ] }, { text: 'Item 5', href: '#nogo', active: false }, ];

Information

See below for available customization options:

Input Type Description
links array<object> Expects an array containing objects that define the links presented in the wide navigation. See the table above for the expected data format.
additionalClasses string Expects a space-separated list of class names to append to the class attribute of the component.

Narrow

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

Angular

The sprk-narrow-navigation component in spark-core-angular consists of two Angular components:

  • sprk-narrow-navigation
  • sprk-narrow-navigation-item

The component expects you to put sprk-narrow-navigation-item components inside it. Any other content will render, but is not supported.

<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>
          
<sprk-narrow-navigation>
  <sprk-narrow-navigation-item *ngFor="let link of links" [subNav]="link.subNav" [analyticsString]="link.analyticsString" [href]="link.href" [text]="link.text">
  </sprk-narrow-navigation-item>
</sprk-narrow-navigation>
const links = [ { text: 'Item 1', href: '/alerts', analyticsString: 'Link to Item 1', active: false, subNav: [ { text: 'Item 1', href: '/alerts', analyticsString: 'Link to Sub Item 1' }, { text: 'Item 2', href: '/alerts' }, { text: 'Item 3', href: '/alerts' }, ] }, { text: 'Item 2', href: '/icons', active: false, subNav: [ { text: 'Item 1', href: '#nogo' }, { text: 'Item 2', href: '#nogo' }, { text: 'Item 3', href: '#nogo' } ] }, { text: 'Item 3', href: '/links', active: false }, { text: 'Item 4', href: '/buttons', active: false, subNav: [ { text: 'Item 1', href: '#nogo' }, { text: 'Item 2', href: '#nogo' }, { text: 'Item 3', href: '#nogo' } ] }, { text: 'Item 5', href: '#nogo', active: false }, ];

Information

See below for available customization options:

Component Input Type Description
sprk-narrow-navigation additionalClasses string Expects a space-separated list of class names to append to the class attribute of sprk-narrow-navigation.
sprk-narrow-navigation-item additionalClasses string Expects a space-separated list of class names to append to the class attribute of sprk-narrow-navigation-item.
sprk-narrow-navigation-item analyticsString string The text that is assigned to the data-analytics attribute of the spark-narrow-navigation-item.
sprk-narrow-navigation-item href string The text that is assigned to the href attribute of the link.
sprk-narrow-navigation-item isOpen string The default open state of the nav item. This is overridden by the internal state once the item is interacted with.
sprk-narrow-navigation-item subNav string Expects an array containing objects that define the links presented in sub-navigation. See the table above for the expected data format.
sprk-narrow-navigation-item text string The text that gets rendered in the link.

Secondary

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

Angular

The sprk-secondary-navigation component in spark-core-angular consists of two Angular components:

  • sprk-secondary-navigation
  • sprk-secondary-navigation-item

The component expects you to put sprk-secondary-navigation-item components inside it. Any other content will render, but is not supported.

<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>
          
<sprk-secondary-navigation>
  <sprk-secondary-navigation-item *ngFor="let link of links" [analyticsString]="link.analyticsString" [href]="link.href" [text]="link.text">
  </sprk-secondary-navigation-item>
</sprk-secondary-navigation>
const links = [ { text: 'Item 1', href: '/alerts', analyticsString: 'Link to Item 1', active: false, subNav: [ { text: 'Item 1', href: '/alerts', analyticsString: 'Link to Sub Item 1' }, { text: 'Item 2', href: '/alerts' }, { text: 'Item 3', href: '/alerts' }, ] }, { text: 'Item 2', href: '/icons', active: false, subNav: [ { text: 'Item 1', href: '#nogo' }, { text: 'Item 2', href: '#nogo' }, { text: 'Item 3', href: '#nogo' } ] }, { text: 'Item 3', href: '/links', active: false }, { text: 'Item 4', href: '/buttons', active: false, subNav: [ { text: 'Item 1', href: '#nogo' }, { text: 'Item 2', href: '#nogo' }, { text: 'Item 3', href: '#nogo' } ] }, { text: 'Item 5', href: '#nogo', active: false }, ];

Information

See below for available customization options:

Component Input Type Description
sprk-secondary-navigation additionalClasses string Expects a space-separated list of class names to append to the class attribute of the list element inside of sprk-secondary-navigation.
sprk-secondary-navigation additionalNavClasses string Expects a space-separated list of class names to append to the class attribute of the nav element inside of sprk-secondary-navigation.
sprk-secondary-navigation-item additionalClasses string Expects a space-separated list of class names to append to the class attribute of sprk-secondary-navigation-item.
sprk-secondary-navigation-item analyticsString string The text that is assigned to the data-analytics attribute of the spark-secondary-navigation-item.
sprk-secondary-navigation-item href string The text that is assigned to the href attribute of the link.
sprk-secondary-navigation-item spacing string Determines which predefined space size is set between the secondary navigation items. The available values are: 'tiny', 'small', 'large', and 'huge'. The default value is 'medium'.
sprk-secondary-navigation-item text string The text that gets rendered in the link.
sparkdesignsystem@quickenloans.com