Masthead

Code Examples

The components and variants here have been updated for consistency's sake, but will be changed significantly very soon. For guidance reach out to the Spark Team.

Base

The Masthead is the first component on a page and includes navigation elements.

Information

  • The secondary navigation, search field, and additional information sections are optional.
  • You should set the variable $main-nav-breakpoint to the point that your app needs to switch from mobile navigation to wide navigation.
  • You should also set the variable $mobile-masthead-height so that the mobile nav scrolling has enough room.
  • In Internet Explorer 11, the narrow masthead will not be fixed in place.

Angular

The Masthead component in spark-core-angular has several normal Inputs, seen below, as well as two 'slots' for use in specific use cases defined by the consuming app.

  • upper-slot - This is used for patterns in the top right of the masthead. Typically this is used for a search input.
  • lower-slot - This is used for pattens in the lower right of the masthead. Typically used for a selector.
  • logo-slot - This is used for the logo in the top left of the masthead. Typically used for a selector.

The Masthead component makes use of the sprk-wide-navigation component and the sprk-narrow-navigaiton component. The 'links' input that those components expect should be supplied at the sprk-masthead level.

<header class="sprk-c-Masthead" role="banner" idString="masthead-1">
  <div class="sprk-c-Masthead__content">
    <div class="sprk-c-Masthead__top-row">
      <div class="sprk-c-Masthead__hamburger">
        <button class="sprk-c-Hamburger" type="button" aria-expanded="false" data-sprk-mobile-nav-trigger="mobileNav">
          <span class="sprk-u-ScreenReaderText">Toggle Navigation</span>
          <svg class="sprk-c-Icon sprk-c-Icon--l sprk-c-Hamburger__icon" aria-hidden="true" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
            <g>
              <path class="sprk-c-Hamburger__line sprk-c-Hamburger__line--two" d="m8 32h48" />
              <path class="sprk-c-Hamburger__line sprk-c-Hamburger__line--one" d="m8 18.68h48" />
              <path class="sprk-c-Hamburger__line sprk-c-Hamburger__line--three" d="m8 45.32h48" />
            </g>
          </svg>
        </button>
      </div>
      <div class="sprk-c-Masthead__logo">
        <a href="#nogo">
          <div class="drizzle-c-Logo-placeholder"></div>
          <span class="sprk-u-ScreenReaderText">Go to the home page</span>
        </a>
      </div>
      <div class="sprk-c-Masthead__secondary-nav">

        <nav role="navigation" data-id="navigation-secondary-1">
          <ul class="sprk-c-SecondaryNavigation 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>

      </div>
    </div>
    <div class="sprk-c-Masthead__secondary">
      <div class="sprk-c-Masthead__search">
        <div class="sprk-b-InputContainer">
          <div class="sprk-b-TextInputIconContainer">
            <svg class="sprk-c-Icon sprk-c-Icon--m sprk-b-InlineSearch__icon" viewBox="0 0 64 64">
              <use xlink:href="#search" />
            </svg>
            <input class="sprk-b-TextInput sprk-b-TextInput--with-icon sprk-u-pll sprk-u-Width-100" id="search-normal" data-id="search-normal" type="text" placeholder="Search" aria-describedby="search-normal--error-container" data-sprk-input="text">
            <div class="sprk-b-InputContainer__input-border"></div>
            <label for="search-normal" class="sprk-b-Label sprk-b-Label--with-icon sprk-u-ScreenReaderText">Search</label>
          </div>
          <div class="sprk-b-ErrorContainer" id="search-normal--error-container">
          </div>
        </div>

      </div>
    </div>
  </div>
  <div class="sprk-c-Masthead__navigation">
    <div class="sprk-c-Masthead__wide-navigation-container">

      <nav role="navigation" data-id="navigation-wide-1">
        <ul class="sprk-c-WideNavigation" data-sprk-navigation="wide">
          <li class="sprk-c-WideNavigation__item sprk-c-WideNavigation__item--active">
            <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</a>
            <div class="sprk-c-WideNavigation__sub-menu-container sprk-u-Display--none">
              <ul class="sprk-c-WideNavigation sprk-c-WideNavigation--sub">
                <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>
            </div>
          </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</a>
            <div class="sprk-c-WideNavigation__sub-menu-container sprk-u-Display--none">
              <ul class="sprk-c-WideNavigation sprk-c-WideNavigation--sub">
                <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>
            </div>
          </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>

    </div>
    <div class="sprk-c-Masthead__narrow-navigation-container sprk-u-Display--none" data-sprk-mobile-nav="mobileNav">

      <nav role="navigation" data-id="navigation-narrow-1">
        <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-Icon--l sprk-c-Accordion__icon" data-sprk-toggle="icon" viewBox="0 0 64 64">
          <use xlink:href="#chevron-down"></use>
        </svg>
      </a>
            <ul class="sprk-b-List sprk-b-List--bare sprk-c-Accordion__details" 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 sprk-c-Accordion__item--active ">
            <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-Icon--l sprk-c-Accordion__icon" data-sprk-toggle="icon" viewBox="0 0 64 64">
          <use xlink:href="#chevron-down"></use>
        </svg>
      </a>
            <ul class="sprk-b-List sprk-b-List--bare sprk-c-Accordion__details" 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>

    </div>
  </div>
</header>
          
<sprk-masthead additionalClasses="angular-docs-u-Masthead-docs" greetingName="Hello, Fellow Human" [wideNavLinks]="links" [secondaryNavLinks]="linksSecondary" [narrowNavLinks]="links" idString="masthead-1">
  <img alt="Provide useful alternative text" src="https://sparkdesignsystem.com/assets/toolkit/images/flower.jpg" logo-slot>
  <div class="sprk-b-InputContainer" upper-slot>
    <label for="inline-search" class="sprk-u-ScreenReaderText">Search</label>
    <input placeholder="Search" class="sprk-b-TextInput sprk-u-Width-100" id="inline-search" type="search" role="search" aria-describedby="inline-search--error-container">
    <div class="sprk-b-ErrorText" id="inline-search--error-container">
    </div>
  </div>
  <p lower-slot>Loan Number: #1234567890</p>
</sprk-masthead>

Information

See below for available customization options:

Input Type Description
additionalClasses string Allows a space-separated string of classes to add, in addition to the spark classes. Intended for overrides.
isNarrowNavOpen boolean Determines the initial state of the narrow nav. Defaulted to 'false'
greetingName string The client name to be used in the greeting.
logoHref string The text that will be applied to the href attribute on the link surrounding the logo.
logoLinkScreenReaderText string The text that screen readers will read when parsing the logo.
narrowNavLinks array<object> Expects an array containing objects that define the links presented in the narrow navigation. See the navigation component for details about these objects.
secondaryNavLinks array<object> Expects an array containing objects that define the links presented in the secondary navigation. See the navigation component for details about these objects.
secondaryNavSpacing string Determines the spacing between items in secondary navigation. Same as the 'spacing' input for the secondary navigation variant. See the navigation component for details.
wideNavLinks array<object> Expects an array containing objects that define the links presented in the wide navigation. See the navigation component for details about these objects.
idString string The value supplied will be assigned to the 'data-id' attribute on the component. This is intended to be used as a selector for automated tools. This value should be unique per page.