Masthead

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">
  <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" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100">
            <g>
              <path class="sprk-c-Hamburger__line sprk-c-Hamburger__line--one" d="M5 13h90v14H5z" />
              <path class="sprk-c-Hamburger__line sprk-c-Hamburger__line--two" d="M5 43h90v14H5z" />
              <path class="sprk-c-Hamburger__line sprk-c-Hamburger__line--three" d="M5 73h90v14H5z" />
            </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">
          <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>

      </div>
      <div class="sprk-c-Masthead__search">
        <div class="sprk-b-InputContainer sprk-u-mbn  ">
          <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>

      </div>
    </div>
    <div class="sprk-c-Masthead__secondary">
      <p class="sprk-u-mbn sprk-b-TypeBodyTwo">Hello, Fellow Human</p>
      <p class="sprk-b-TypeBodyTwo">Loan #1234567890</p>
    </div>
  </div>
  <div class="sprk-c-Masthead__navigation">
    <div class="sprk-c-Masthead__wide-navigation-container">

      <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>

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

      <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>

    </div>
  </div>
</header>

<sprk-masthead additionalClasses="angular-docs-u-Masthead-docs" greetingName="Hello, Fellow Human" [wideNavLinks]="links" [secondaryNavLinks]="linksSecondary" [narrowNavLinks]="links">
  <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.

Getting Started

Fundamentals

Components

Utilities

Documentation

Base

Information

Angular

Information