Masthead

CSS file | JS file

The masthead is the top section of the page that contains Certify’s main navigation, high-level contextual information, and a tab set for secondary-level navigation.

The three main sections include:

Mobile heading (required on all pages)
Top navigation (required on all pages)
Search form (required if user can access)
Notifications drawer (required if user can access)
High-level contextual info
Tabs for secondary-level navigation

You can find more information about each of the sections below the main example.

Example

You can interact with every part of this example.

<header class="sba-c-masthead ">
  <div class="sba-c-mobile-header">
    <div class="sba-c-mobile-header__logo-container">
      <a href="/">
        <img alt="certify.SBA.gov logo" class="sba-c-mobile-header__logo" src="/certify-design-system-documentation/assets/img/certify-sba-gov-logo_on-dark.png" />
      </a>
    </div>
    <ul class="sba-c-mobile-header__list">
      <li class="sba-c-mobile-header__list-item">
        <button class="sba-c-button sba-c-button--icon-only sba-c-button--transparent sba-js-visibility-trigger sba-js-search-button" type="button" aria-expanded="false" aria-controls="topnav-search" title="Search">
          <svg aria-hidden="true" class="sba-c-icon">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#search"></use>
          </svg>
        </button>
      </li>
      <li class="sba-c-mobile-header__list-item">
        <!-- Only include the pip if there are unread notifications -->
        <span class="sba-c-badge sba-c-badge--warn sba-c-badge--generic sba-js-notifications-pip"></span>
        <button class="sba-c-mobile-header__toggle sba-c-button sba-c-button--icon-only sba-c-button--transparent sba-js-visibility-trigger sba-js-notifications-toggle" id="" type="button" aria-expanded="false" aria-controls="topnav-notifications-drawer" title="Notifications">
          <svg aria-hidden="true" class="sba-c-icon">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#bell"></use>
          </svg>
        </button>
      </li>
    </ul>
    <button type="button" class="sba-c-mobile-header__button" id="mobile_menu_button" aria-controls="top_navigation">Menu</button>
  </div>
  <nav id="top_navigation" class="sba-c-topnav" role="navigation">
    <div class="sba-c-topnav__inner">
      <a href="#" class="sba-c-topnav__logo-link">
        <img class="sba-c-topnav__logo" alt="certify.SBA.gov logo" src="/certify-design-system-documentation/assets/img/certify-sba-gov-logo_on-dark.png" />
      </a>
      <button class="sba-c-button sba-c-button--transparent sba-c-topnav__close" id="close_menu_button">
        <svg aria-hidden="true" class="sba-c-icon">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#times"></use>
        </svg><span class="sba-u-visibility--screen-reader">Close menu</span>
      </button>
      <ul class="sba-c-topnav__list sba-c-topnav__list--left-side">
        <li class="sba-c-topnav__list-item ">
          <a class="sba-c-topnav__link" href="dashboard.html">Dashboard</a>
        </li>
        <li class="sba-c-topnav__list-item ">
          <a class="sba-c-topnav__link" href="all-cases.html">Cases</a>
        </li>
        <li class="sba-c-topnav__list-item ">
          <a class="sba-c-topnav__link" href="manage.html">Management</a>
        </li>
        <li class="sba-c-topnav__list-item ">
          <button class="sba-c-topnav__subnav-toggle sba-js-visibility-trigger" type="button" aria-expanded="false" aria-controls="topnav-Requirements">
            <span>Requirements</span>
          </button>
          <ul id="topnav-Requirements" class="sba-c-topnav__subnav" hidden>
            <li class="sba-c-topnav__subnav-item">
              <a href="new-requirement.html" class="sba-c-topnav__subnav__link">New Requirement(s)</a>
            </li>
            <li class="sba-c-topnav__subnav-item">
              <a href="all-requirements.html" class="sba-c-topnav__subnav__link">All Requirements</a>
            </li>
            <li class="sba-c-topnav__subnav-item">
              <a href="my-requirements.html" class="sba-c-topnav__subnav__link">My Requirements</a>
            </li>
          </ul>
        </li>
      </ul>
      <ul class="sba-c-topnav__list sba-c-topnav__list--right-side">
        <li class="sba-c-topnav__list-item sba-c-topnav__list-item--search">
          <button class="sba-c-topnav__subnav-toggle sba-c-button sba-c-button--icon-only sba-c-button--transparent sba-js-visibility-trigger sba-js-search-button" type="button" aria-expanded="false" aria-controls="topnav-search" title="Search">
            <svg aria-hidden="true" class="sba-c-icon">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#search"></use>
            </svg>
          </button>
        </li>
        <li class="sba-c-topnav__list-item sba-c-topnav__list-item--notifications " aria-role="region" aria-live="polite">
          <!-- Only include the pip if there are unread notifications -->
          <span class="sba-c-badge sba-c-badge--warn sba-c-badge--generic sba-js-notifications-pip" title="You have new notifications"></span>
          <button class="sba-c-topnav__subnav-toggle sba-c-button sba-c-button--icon-only sba-c-button--transparent sba-js-visibility-trigger sba-js-notifications-toggle" type="button" aria-expanded="false" aria-controls="topnav-notifications-drawer" title="Notifications">
            <svg aria-hidden="true" class="sba-c-icon">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#bell"></use>
            </svg>
          </button>
        </li>
        <li class="sba-c-topnav__list-item ">
          <a class="sba-c-topnav__link" href="admin.html">Admin</a>
        </li>
        <li class="sba-c-topnav__list-item ">
          <button class="sba-c-topnav__subnav-toggle sba-js-visibility-trigger" type="button" aria-expanded="false" aria-controls="topnav-MyAccount">
            <span>My Account</span>
          </button>
          <ul id="topnav-MyAccount" class="sba-c-topnav__subnav" hidden>
            <li class="sba-c-topnav__subnav-item">
              <a href="my-account.html" class="sba-c-topnav__subnav__link">My Account</a>
            </li>
            <li class="sba-c-topnav__subnav-item">
              <a href="javascript:void(0);" class="sba-c-topnav__subnav__link">Log Out</a>
            </li>
          </ul>
        </li>
        <li class="sba-c-topnav__list-item ">
          <a class="sba-c-topnav__link" href="training.html">Training</a>
        </li>
      </ul>
    </div>
  </nav>
  <-- Search bar -->
  <div class="sba-c-top-nav__search-outer-container" id="topnav-search" hidden>
    <div class="sba-c-top-nav__search-container" >
      <div class="sba-l-container">
        <form class="sba-c-top-nav__search-form" role="search">
          <label class="sba-u-visibility--screen-reader" for="topnav_search_query">Search</label>
          <input class="sba-c-input" id="topnav_search_query" type="search" name="topnav_search_query" placeholder="Search firms">
          <button class="sba-c-button sba-c-button--transparent" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
  <-- Notifications drawer -->
  <div id="topnav-notifications-drawer" hidden>
    <div class="sba-c-top-nav__notifications-drawer-outer-container sba-l-container">
      <div class="sba-c-top-nav__notifications-drawer-container">
        <div class="sba-c-top-nav__notifications-drawer">
          <ul class="sba-c-top-nav__notifications-drawer__list" tabindex="0">
            <li class="sba-c-top-nav__notifications-drawer__list-item">
              <a href="#" class="sba-c-top-nav__notifications-drawer__link">
                <p class="sba-c-top-nav__notifications-drawer__message">Mike’s Garage added a contributor to its 8(a) Initial Application.</p>
                <p class="sba-c-top-nav__notifications-drawer__timestamp">July 13, 2018 2:18pm</p>
              </a>
            </li>
            <li class="sba-c-top-nav__notifications-drawer__list-item">
              <a href="#" class="sba-c-top-nav__notifications-drawer__link">
                <p class="sba-c-top-nav__notifications-drawer__message">Terrycloth, LLC submitted information for its 8(a) Initial Application.</p>
                <p class="sba-c-top-nav__notifications-drawer__timestamp">July 13, 2018 2:15pm</p>
              </a>
            </li>
            <li class="sba-c-top-nav__notifications-drawer__list-item">
              <a href="#" class="sba-c-top-nav__notifications-drawer__link">
                <p class="sba-c-top-nav__notifications-drawer__message">Please review the 8(a) Initial Application for Hammertime, LLC. </p>
                <p class="sba-c-top-nav__notifications-drawer__timestamp">July 13, 2018 2:03pm</p>
              </a>
            </li>
            <li class="sba-c-top-nav__notifications-drawer__list-item">
              <a href="#" class="sba-c-top-nav__notifications-drawer__link">
                <p class="sba-c-top-nav__notifications-drawer__message">Please review the 8(a) Initial Application for MASTERWERKS. </p>
                <p class="sba-c-top-nav__notifications-drawer__timestamp">July 13, 2018 1:11pm</p>
              </a>
            </li>
          </ul>
          <a href="#" class="sba-c-top-nav__notifications-drawer__view-all">View all notifications</a>
        </div>
      </div>
    </div>
  </div>
  <!-- This the content in the gray area-->
  <div class="sba-c-masthead__body sba-l-container sba-u-flex-direction--column">
    <div class="sba-u-padding-x--2">
      <div class="sba-u-border--0">
        <h1 class="sba-c-masthead__primary-heading">
          <a href="firm-overview.html">
            Mike’s Garage
          </a>
          <span class="sba-c-masthead__primary-heading--l2">8(a) 2017 Annual Review</span>
        </h1>
      </div>
      <div class="sba-c-masthead__body__info sba-u-margin-y--1 sba-u-display--flex sba-u-flex-direction--column sba-u-md-flex-direction--row">
          <div class="sba-u-sm-padding-right--2 sba-u-lg-padding-right--7 sba-u-display--flex sba-u-md-flex-direction--column sba-l-col">
            <strong class="sba-u-margin-right--1">Owner:</strong>
            <span class="sba-u-display--flex">
              <span>Mike Jones (703-555-1234)</span>
          </div>
          <div class="sba-u-sm-padding-right--2 sba-u-lg-padding-right--7 sba-u-display--flex sba-u-md-flex-direction--column sba-l-col">
            <strong class="sba-u-margin-right--1">Program year:</strong>
            <span class="sba-u-display--flex">
              <span>3</span>
          </div>
          <div class="sba-u-sm-padding-right--2 sba-u-lg-padding-right--7 sba-u-display--flex sba-u-md-flex-direction--column sba-l-col">
            <strong class="sba-u-margin-right--1">District office:</strong>
            <span class="sba-u-display--flex">
              <span>Seattle</span>
              <a href="district-office/1.html" title="Change" class="sba-u-margin-left--1">
                <svg aria-hidden="true" class="sba-c-icon sba-c-icon--blue">
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#edit"></use>
                  <span class="sba-u-visibility--screen-reader">Change</span>
                </svg>
              </a>
            </span>
          </div>
          <div class="sba-u-sm-padding-right--2 sba-u-lg-padding-right--7 sba-u-display--flex sba-u-md-flex-direction--column sba-l-col">
            <strong class="sba-u-margin-right--1">Servicing BOS:</strong>
            <span class="sba-u-display--flex">
              <span>Allen Smith</span>
              <a href="servicing-bos/1.html" title="Change" class="sba-u-margin-left--1">
                <svg aria-hidden="true" class="sba-c-icon sba-c-icon--blue">
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#edit"></use>
                  <span class="sba-u-visibility--screen-reader">Change</span>
                </svg>
              </a>
            </span>
          </div>
          <div class="sba-u-sm-padding-right--2 sba-u-lg-padding-right--7 sba-u-display--flex sba-u-md-flex-direction--column sba-l-col">
            <strong class="sba-u-margin-right--1">Program end date:</strong>
            <span class="sba-u-display--flex">
              <span>July 23, 2019</span>
              <a href="change-program-date/1.html" title="Change" class="sba-u-margin-left--1">
                <svg aria-hidden="true" class="sba-c-icon sba-c-icon--blue">
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#edit"></use>
                  <span class="sba-u-visibility--screen-reader">Change</span>
                </svg>
              </a>
            </span>
          </div>
      </div>
    </div>
  </div>
  <!-- Tabs -->
  <div class="sba-l-container">
    <div class="sba-u-padding-x--2 sba-c-tabs-wrapper sba-js-priority-nav-tabs" role="navigation">
      <ul class="sba-c-tabs__list">
        <!-- List items are not closed to avoid spacing issues with inline-block display -->
        <li class="sba-c-tabs__item">
          <a class="sba-c-tabs__link  current " href="overview.html">Overview</a>
        <li class="sba-c-tabs__item">
          <button class="sba-c-tabs__link sba-js-visibility-trigger " type="button" aria-expanded="false" aria-controls="dropdown-Documents">
            <span>Documents</span>
          </button>
          <ul id="dropdown-Documents" class="sba-c-tabs__submenu" hidden>
            <li class="sba-c-tabs__submenu__item">
              <a class="sba-c-tabs__submenu__link" href="firm-documents.html">Firm Documents</a>
            </li>
            <li class="sba-c-tabs__submenu__item">
              <a class="sba-c-tabs__submenu__link" href="analyst-documents.html">Analyst Documents</a>
            </li>
          </ul>
        <li class="sba-c-tabs__item">
          <a class="sba-c-tabs__link " href="sba-notes.html">SBA Notes</a>
        <li class="sba-c-tabs__item">
          <a class="sba-c-tabs__link " href="messages.html">Messages</a>
        <li class="sba-c-tabs__item">
          <a class="sba-c-tabs__link " href="activity-log.html">Activity Log</a>
      </ul>
    </div>
  </div>
</header>

Guidance

The notifications pip only appears when there are unread notifications
The notifications pip disappears after the user opens the notifications drawer

Mobile heading and top navigation

The mobile heading appears at narrower screen widths. When the screen width is wider (the Sass varaible name for this breakpoint is $nav-width), the mobile nav is hidden from view.

The top navigation appears as a fly-out menu at narrower screen widths and then appears as a standard nav bar at the $nav-width breakpoint.

The $nav-width breakpoint is a unique breakpoint that is set when the menu perspective with the most links, which is a government user with a supervisor role, becomes too tight to properly contain its content.

Perspectives

Government users and business users receive a slightly different variation of the navigation bars. Government users are dark blue and business users are black.

Government user

Business user

Aside from the menu options, the only difference between the navigation bars is the color, which is changed with a modifier class sba-c-masthead--vendor to the masthead block.

<header class="sba-c-masthead sba-c-masthead--vendor"></header>

Search bar and notifications drawer

The search bar and notifications will be available to all users who have the capability to search for content or receive notifications. Both of these items should receive focus when opened from the top navigation.

In the top navigation, the icon adds a "pip" when a notification is received. The "pip" is removed when the user clicks the icon to view the notifications drawer.

Masthead body

The masthead body is an optional segment that contains high-level contextual information about the page, or more commonly, about a particular section. There are two sections of the masthead body:

Primary heading - This can also contain a level 2 heading, which is typically used for application titles. When a level 2 heading is present, the main section should be linked. This serves a dual purpose as a "breadcrumb."
Additional information - small bits of information that can fit in a narrow column

Masthead body with primary and level 2 headings, additional information section

Masthead body with primary and level 2 heading

Masthead body with primary heading only

When to use

When consistent heading applies to multiple pages
From the government user perspective, any page or application related to a firm (business profile, application and pages within)
Pages that show filtered sets of information (all cases)

When to consider something else

One-off pages where a simple heading on the page body will suffice