Header

A header is the section at the top of a screen to display a company logo and global navigation for direct access to a site's most important and relevant pages.

Also known as: app bar, global header, main nav, masthead, page header, toolbar, top bar, top menu, top nav bar, top navigation, top section

Variations

At minimum, the header provides only a responsive logo that links to the site's base url by default. This link can be changed or removed using the logohref parameter.

Default

Code

<bolt-header></bolt-header>

Slots are used to place additional content within the layout of the header. Aside from the logo, any slot may be omitted from the header. There is no functional limit on the number of items that may be placed in each slot.

Slot layout

Main action

Panel 1 main content

Panel 1 footer content
Panel 2 main content

Panel 2 footer content
Panel 3 main content

Panel 3 footer content
Panel 4 main content

Panel 4 footer content

Nav action

Code

<bolt-header>
  <ul slot="external-links">
    <li><a href="">External link</a></li>
    <li><a href="">External link</a></li>
    <li><a href="">External link</a></li>
  </ul>
  <ul slot="utility-links">
    <li class="bolt-header-mobile-only"><a href="">Mobile-only utility link</a></li>
    <li><a href="">Utility link</a></li>
    <li><a href="">Utility link</a></li>
  </ul>
  <div slot="search">
    <bolt-textfield iconalt="Submit Search" iconname="search" optionaltext="hide" arialabel="Search"></bolt-textfield>
  </div>
  <div slot="main-actions">
    <bolt-button type="solid" color="secondary">Main action</bolt-button>
  </div>
  <ul slot="navigation-primary">
    <li>
      <button>Menu item</button>
      <div class="bolt-header-panel">
        <div class="bolt-header-panel-main">
          <div class="bolt-header-container">
            Panel 1 main content
          </div>
        </div>
        <div class="bolt-header-panel-footer">
          <div class="bolt-header-container">
            Panel 1 footer content
          </div>
        </div>
      </div>
    </li>
    <li>
      <button>Menu item</button>
      <div class="bolt-header-panel">
        <div class="bolt-header-panel-main">
          <div class="bolt-header-container">
            Panel 2 main content
          </div>
        </div>
        <div class="bolt-header-panel-footer">
          <div class="bolt-header-container">
            Panel 2 footer content
          </div>
        </div>
      </div>
    </li>
    <li>
      <button>Menu item</button>
      <div class="bolt-header-panel">
        <div class="bolt-header-panel-main">
          <div class="bolt-header-container">
            Panel 3 main content
          </div>
        </div>
        <div class="bolt-header-panel-footer">
          <div class="bolt-header-container">
            Panel 3 footer content
          </div>
        </div>
      </div>
    </li>
    <li>
      <button>Menu item</button>
      <div class="bolt-header-panel">
        <div class="bolt-header-panel-main">
          <div class="bolt-header-container">
            Panel 4 main content
          </div>
        </div>
        <div class="bolt-header-panel-footer">
          <div class="bolt-header-container">
            Panel 4 footer content
          </div>
        </div>
      </div>
    </li>
  </ul>
  <div slot="nav-actions">
    <bolt-button type="solid">Nav action</bolt-button>
    <bolt-button type="solid">Nav action</bolt-button>
  </div>
</bolt-header>

The secondary navigation includes slots for external-links and utility-links. These are shown above the main header on desktop, and are included in the primary navigation menu on mobile.

Code

<bolt-header>
<ul slot="external-links">
    <li><a href="">External link</a></li>
    <li><a href="">External link</a></li>
    <li><a href="">External link</a></li>
  </ul>
  <ul slot="utility-links">
    <li class="bolt-header-mobile-only"><a href="">Mobile-only utility link</a></li>
    <li><a href="">Utility link</a></li>
    <li><a href="">Utility link</a></li>
  </ul>
</bolt-header>

Main header area

The main area of the header includes slots for the logo, search, and main-actions.

Main header area

Main action

Code

<bolt-header>
  <div slot="search">
    <bolt-textfield iconalt="Submit Search" iconname="search" optionaltext="hide" arialabel="Search"></bolt-textfield>
  </div>
  <div slot="main-actions">
    <bolt-button type="solid" color="secondary">Main action</bolt-button>
  </div>
</bolt-header>

If providing alternate logo assets using the logo slot, links must be included in the slot content. Separate assets for mobile and desktop can be configured by using the bolt-header-mobile-only and bolt-header-desktop-only utility classes.

For dark mode compatibility, custom logos may need to make use of theme display utilities.

Alternate logos

Code

<bolt-header>
  <div slot="logo">
    <a href="" title="">
      <img src="images/placeholder-logo-horizontal.svg" class="bolt-header-desktop-only" alt="Placeholder logo">
      <img src="images/placeholder-logo-vertical.svg" class="bolt-header-mobile-only" alt="Placeholder logo">
    </a>
  </div>
</bolt-header>

Alternate logos

Code

<bolt-header>
  <div slot="logo">
    <bolt-logo href="/" class="bolt-header-desktop-only"></bolt-logo>
    <bolt-logo href="/" class="bolt-header-mobile-only" type="nw-mark"></bolt-logo>
    <span class="divider"></span>
    <a href="" title="">
      <img src="images/placeholder-logo-horizontal.svg" class="bolt-header-desktop-only" alt="Placeholder logo">
      <img src="images/placeholder-logo-vertical.svg" class="bolt-header-mobile-only" alt="Placeholder logo">
    </a>
  </div>
</bolt-header>

The menu bar appears below the main header area on desktop, and inside a hamburger menu on mobile. It includes the navigation-primary and nav-actions slots.

To accommodate longer or shorter menu content, the responsive breakpoint of the header can be customized using the breakpoint parameter.

Primary navigation items can either open a menu panel, or act as simple navigation links.

Claims

Pay a bill

Code

<bolt-header breakpoint="884">
  <ul slot="navigation-primary">
    <li><a href="">Vehicle</a></li>
    <li><a href="">Property</a></li>
    <li><a href="">Personal</a></li>
    <li><a href="">Business</a></li>
    <li><a href="">Investments</a></li>
  </ul>
  <div slot="nav-actions">
    <bolt-button type="solid">Claims</bolt-button>
    <bolt-button type="solid">Pay a bill</bolt-button>
  </div>
</bolt-header>

Panel 1 main content

Panel 1 footer content
Panel 2 main content

Panel 2 footer content
Panel 3 main content

Panel 3 footer content
Panel 4 main content

Panel 4 footer content

Claims

Pay a bill

Code

<bolt-header breakpoint="884">
  <ul slot="navigation-primary">
    <li>
      <button>Menu item</button>
      <div class="bolt-header-panel">
        <div class="bolt-header-panel-main">
          <div class="bolt-header-container">
            Panel 1 main content
          </div>
        </div>
        <div class="bolt-header-panel-footer">
          <div class="bolt-header-container">
            Panel 1 footer content
          </div>
        </div>
      </div>
    </li>
    <li>
      <button>Menu item</button>
      <div class="bolt-header-panel">
        <div class="bolt-header-panel-main">
          <div class="bolt-header-container">
            Panel 2 main content
          </div>
        </div>
        <div class="bolt-header-panel-footer">
          <div class="bolt-header-container">
            Panel 2 footer content
          </div>
        </div>
      </div>
    </li>
    <li>
      <button>Menu item</button>
      <div class="bolt-header-panel">
        <div class="bolt-header-panel-main">
          <div class="bolt-header-container">
            Panel 3 main content
          </div>
        </div>
        <div class="bolt-header-panel-footer">
          <div class="bolt-header-container">
            Panel 3 footer content
          </div>
        </div>
      </div>
    </li>
    <li>
      <button>Menu item</button>
      <div class="bolt-header-panel">
        <div class="bolt-header-panel-main">
          <div class="bolt-header-container">
            Panel 4 main content
          </div>
        </div>
        <div class="bolt-header-panel-footer">
          <div class="bolt-header-container">
            Panel 4 footer content
          </div>
        </div>
      </div>
    </li>
  </ul>
  <div slot="nav-actions">
    <bolt-button type="solid">Claims</bolt-button>
    <bolt-button type="solid">Pay a bill</bolt-button>
  </div>
</bolt-header>

Example patterns

Basic styling is provided for the example markup shown, but other content may be included within the slots and styled as needed.

Nationwide.com

Code

<bolt-header id="header" breakpoint="884">

  <!-- Secondary navigation -->
  <ul slot="external-links">
    <li><a href="">Agents</a></li>
    <li><a href="">Financial professionals</a></li>
    <li><a href="">Partners</a></li>
  </ul>
  <ul slot="utility-links">
    <li class="bolt-header-mobile-only"><a href="">Log in</a></li>
    <li><a href="" lang="es">En Español</a></li>
    <li><a href="">Contact us</a></li>
  </ul>

  <!-- Main header area -->
  <div slot="search">
    <bolt-textfield iconalt="Submit Search" iconname="search" optionaltext="hide" arialabel="Search"></bolt-textfield>
  </div>
  <div slot="main-actions">
    <bolt-button type="solid" color="secondary" class="bolt-header-desktop-only">Log in</bolt-button>
    <bolt-button type="solid" color="secondary" size="sm" class="bolt-header-mobile-only">Log in</bolt-button>
  </div>

  <!-- Menu bar -->
  <ul slot="navigation-primary">
    <!-- Menu item 1 -->
    <li>
      <button>Vehicle</button>
      <!-- Panel 1 -->
      <div class="bolt-header-panel">
        <div class="bolt-header-panel-main">
          <div class="bolt-header-container">
            <span class="bolt-header-panel-links-all bolt-header-desktop-only">
              <a href=""><bolt-icon name="grid" decorative></bolt-icon>All vehicle insurance</a>
            </span>
            <div class="bolt-header-panel-links">
              <div class="bolt-header-panel-links-list">
                <h2 class="bolt-header-panel-links-title">Vehicle products</h2>
                <ul class="bolt-text-columns-3">
                  <li><a href="">Auto</a></li>
                  <li><a href="">Motorcycle</a></li>
                  <li><a href="">Snowmobile</a></li>
                  <li><a href="">Classic Car</a></li>
                  <li><a href="">ATV</a></li>
                  <li><a href="">RV</a></li>
                  <li><a href="">Boat</a></li>
                  <li><a href="">Personal watercraft</a></li>
                  <li><a href="">Scooter</a></li>
                  <li><a href="">Golf cart</a></li>
                </ul>
              </div>
              <span class="bolt-header-panel-links-all bolt-header-mobile-only">
                <a href=""><bolt-icon name="grid" decorative></bolt-icon>All vehicle insurance</a>
              </span>
              <div class="bolt-header-panel-links-list">
                <h2 class="bolt-header-panel-links-title">Related links</h2>
                <ul class="bolt-text-columns-2">
                  <li><a href="">Start an auto claim</a></li>
                  <li><a href="">Find an agent</a></li>
                  <li><a href="">Get insurance card</a></li>
                  <li><a href="">Vehicle insurance FAQ</a></li>
                  <li><a href="">Vehicle loans</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!-- Panel 1 footer -->
        <div class="bolt-header-panel-footer">
          <div class="bolt-header-container">
            <div class="bolt-header-panel-promos">
              <a class="bolt-header-promo-tile" href="">
                <div class="bolt-header-promo-image">
                  <img src="images/placeholder-icon.svg" width="40px" height="40px" alt="">
                </div>
                <div class="bolt-header-promo-content">
                  <div class="bolt-header-promo-title">SmartRide | SmartMiles</div>
                  <div class="bolt-header-promo-text">Save with usage-based insurance</div>
                </div>
              </a>
              <a class="bolt-header-promo-tile" href="">
                <div class="bolt-header-promo-image">
                  <img src="images/placeholder-icon.svg" width="40px" height="40px" alt="">
                </div>
                <div class="bolt-header-promo-content">
                  <div class="bolt-header-promo-title">Roadside Assistance&reg;</div>
                  <div class="bolt-header-promo-text">We're here to help with a tow, jump start, and more</div>
                </div>
              </a>
              <a class="bolt-header-promo-tile" href="">
                <div class="bolt-header-promo-image">
                  <img src="images/placeholder-icon.svg" width="40px" height="40px" alt="">
                </div>
                <div class="bolt-header-promo-content">
                  <div class="bolt-header-promo-title">BonusDrive</div>
                  <div class="bolt-header-promo-text">Get up to $500 when buying a new car</div>
                </div>
              </a>
              <a class="bolt-header-promo-tile" href="">
                <div class="bolt-header-promo-image">
                  <img src="images/placeholder-icon.svg" width="40px" height="40px" alt="">
                </div>
                <div class="bolt-header-promo-content">
                  <div class="bolt-header-promo-title">Teen driving</div>
                  <div class="bolt-header-promo-text">Tips when adding a young driver to your car insurance</div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </li>
    <!-- Menu item 2 -->
    <li>
      <button>Property</button>
      <!-- Panel 2 -->
      <div class="bolt-header-panel">
        <div class="bolt-header-panel-main">
          <div class="bolt-header-container">
            <span class="bolt-header-panel-links-all bolt-header-desktop-only">
              <a href=""><bolt-icon name="grid" decorative></bolt-icon>All property insurance</a>
            </span>
            <div class="bolt-header-panel-links">
              <div class="bolt-header-panel-links-list">
                <h2 class="bolt-header-panel-links-title">Property products</h2>
                <ul class="bolt-text-columns-1">
                <li><a href="">Homeowners</a></li>
                <li><a href="">Renters</a></li>
                <li><a href="">Condo</a></li>
                <li><a href="">Flood</a></li>
                </ul>
              </div>
              <span class="bolt-header-panel-links-all bolt-header-mobile-only">
                <a href=""><bolt-icon name="grid" decorative></bolt-icon>All property insurance</a>
              </span>
              <div class="bolt-header-panel-links-list">
                <h2 class="bolt-header-panel-links-title">Related links</h2>
                <ul class="bolt-text-columns-2">
                  <li><a href="">Find an agent</a></li>
                  <li><a href="">Renters insurance FAQ</a></li>
                  <li><a href="">Property insurance FAQ</a></li>
                  <li><a href="">Home financing</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!-- Panel 2 footer -->
        <div class="bolt-header-panel-footer">
          <div class="bolt-header-container">
            <div class="bolt-header-panel-promos">
              <a class="bolt-header-promo-tile" href="">
                <div class="bolt-header-promo-image">
                  <img src="images/placeholder-icon.svg" width="40px" height="40px" alt="">
                </div>
                <div class="bolt-header-promo-content">
                  <div class="bolt-header-promo-title">Start a claim</div>
                  <div class="bolt-header-promo-text">Home, condo or rental, we're always here</div>
                </div>
              </a>
              <a class="bolt-header-promo-tile" href="">
                <div class="bolt-header-promo-image">
                  <img src="images/placeholder-icon.svg" width="40px" height="40px" alt="">
                </div>
                <div class="bolt-header-promo-content">
                  <div class="bolt-header-promo-title">Combine and save</div>
                  <div class="bolt-header-promo-text">Bundle your property and auto insurance</div>
                </div>
              </a>
              <a class="bolt-header-promo-tile" href="">
                <div class="bolt-header-promo-image">
                  <img src="images/placeholder-icon.svg" width="40px" height="40px" alt="">
                </div>
                <div class="bolt-header-promo-content">
                  <div class="bolt-header-promo-title">Brand New Belongings</div>
                  <div class="bolt-header-promo-text">Repair or replace items</div>
                </div>
              </a>
              <a class="bolt-header-promo-tile" href="">
                <div class="bolt-header-promo-image">
                  <img src="images/placeholder-icon.svg" width="40px" height="40px" alt="">
                </div>
                <div class="bolt-header-promo-content">
                  <div class="bolt-header-promo-title">Buying your first home</div>
                  <div class="bolt-header-promo-text">What you need to know</div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </li>
    <!-- Menu item 3 -->
    <li>
      <button>Personal</button>
      <!-- Panel 3 -->
      <div class="bolt-header-panel">
        <div class="bolt-header-panel-main">
          <div class="bolt-header-container">
            <span class="bolt-header-panel-links-all bolt-header-desktop-only">
              <a href=""><bolt-icon name="grid" decorative></bolt-icon>All personal insurance</a>
            </span>
            <div class="bolt-header-panel-links">
              <div class="bolt-header-panel-links-list">
                <h2 class="bolt-header-panel-links-title">Personal products</h2>
                <ul class="bolt-text-columns-3">
                  <li><a href="">Life</a></li>
                  <li><a href="">Pet</a></li>
                  <li><a href="">Dental</a></li>
                  <li><a href="">Umbrella</a></li>
                  <li><a href="">Identity theft</a></li>
                  <li><a href="">Accidental medical</a></li>
                  <li><a href="">Special liability</a></li>
                  <li><a href="">Travel</a></li>
                  <li><a href="">Wedding</a></li>
                  <li><a href="">Private client</a></li>
                </ul>
              </div>
              <span class="bolt-header-panel-links-all bolt-header-mobile-only">
                <a href=""><bolt-icon name="grid" decorative></bolt-icon>All personal insurance</a>
              </span>
              <div class="bolt-header-panel-links-list">
                <h2 class="bolt-header-panel-links-title">Related links</h2>
                <ul class="bolt-text-columns-2">
                  <li><a href="">Find an agent</a></li>
                  <li><a href="">Pet insurance FAQ</a></li>
                  <li><a href="">Travel insurance FAQ</a></li>
                  <li><a href="">Personal loans</a></li>
                  <li><a href="">Personal banking</a></li>
                  <li><a href="">Learning center</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!-- Panel 3 footer -->
        <div class="bolt-header-panel-footer">
          <div class="bolt-header-container">
            <div class="bolt-header-panel-promos">
              <a class="bolt-header-promo-tile" href="">
                <div class="bolt-header-promo-image">
                  <img src="images/placeholder-icon.svg" width="40px" height="40px" alt="">
                </div>
                <div class="bolt-header-promo-content">
                  <div class="bolt-header-promo-title">Protect your pet</div>
                  <div class="bolt-header-promo-text">Get a no-obligation pet insurance quote</div>
                </div>
              </a>
              <a class="bolt-header-promo-tile" href="">
                <div class="bolt-header-promo-image">
                  <img src="images/placeholder-icon.svg" width="40px" height="40px" alt="">
                </div>
                <div class="bolt-header-promo-content">
                  <div class="bolt-header-promo-title">Personal info organizer</div>
                  <div class="bolt-header-promo-text">Prepare for emergencies</div>
                </div>
              </a>
              <a class="bolt-header-promo-tile" href="">
                <div class="bolt-header-promo-image">
                  <img src="images/placeholder-icon.svg" width="40px" height="40px" alt="">
                </div>
                <div class="bolt-header-promo-content">
                  <div class="bolt-header-promo-title">Cyber protection services</div>
                  <div class="bolt-header-promo-text">Protect your personal data</div>
                </div>
              </a>
              <a class="bolt-header-promo-tile" href="">
                <div class="bolt-header-promo-image">
                  <img src="images/placeholder-icon.svg" width="40px" height="40px" alt="">
                </div>
                <div class="bolt-header-promo-content">
                  <div class="bolt-header-promo-title">Make time to travel</div>
                  <div class="bolt-header-promo-text">Get smart vacation planning tips</div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </li>
    <!-- Menu item 4 -->
    <li>
      <button>Business</button>
      <!-- Panel 4 -->
      <div class="bolt-header-panel">
        <div class="bolt-header-panel-main">
          <div class="bolt-header-container">
            <span class="bolt-header-panel-links-all bolt-header-desktop-only">
              <a href=""><bolt-icon name="grid" decorative></bolt-icon>All business</a>
            </span>
            <div class="bolt-header-panel-links">
              <div class="bolt-header-panel-links-list">
                <h2 class="bolt-header-panel-links-title">Insurance</h2>
                <ul class="bolt-text-columns-1">
                  <li><a href="">Businessowners policy</a></li>
                  <li><a href="">Business auto</a></li>
                  <li><a href="">Business property</a></li>
                  <li><a href="">Excess & surplus</a></li>
                </ul>
              </div>
              <div class="bolt-header-panel-links-list">
                <h2 class="bolt-header-panel-links-title">Small business</h2>
                <ul class="bolt-text-columns-1">
                  <li><a href="">Retail</a></li>
                  <li><a href="">Wholesale</a></li>
                  <li><a href="">Photography</a></li>
                  <li><a href="">Professional offices</a></li>
                  <li><a href="">Consulting</a></li>
                  <li><a href="">Food & beverage</a></li>
                  <li><a href="">Farm & ranch</a></li>
                  <li><a href="">Contractors</a></li>
                  <li><a href="">Veterinarians</a></li>
                  <li><a href="" aria-label="See all small business">See all ...</a></li>
                </ul>
              </div>
              <div class="bolt-header-panel-links-list">
                <h2 class="bolt-header-panel-links-title">Large business</h2>
                <ul class="bolt-text-columns-1">
                  <li><a href="">Agribusiness</a></li>
                  <li><a href="">Construction</a></li>
                  <li><a href="">Breweries</a></li>
                  <li><a href="">Senior living</a></li>
                  <li><a href="">Specialty care</a></li>
                  <li><a href="">Churches</a></li>
                  <li><a href="">Real estate</a></li>
                  <li><a href="">Manufacturing</a></li>
                  <li><a href="" aria-label="See all large business">See all ...</a></li>
                </ul>
              </div>
              <div class="bolt-header-panel-links-list">
                <h2 class="bolt-header-panel-links-title">Benefits</h2>
                <ul class="bolt-text-columns-1">
                  <li><a href="">Employee retirement plans</a></li>
                  <li><a href="">Nationwide Simplified</a></li>
                  <li><a href="">Key personal benefits</a></li>
                  <li><a href="">Medical stop loss</a></li>
                  <li><a href="">MedPair supplemental health</a></li>
                  <li><a href="">Worker's compensation</a></li>
                  <li><a href="" aria-label="See all benefits">See all ...</a></li>
                </ul>
              </div>
              <span class="bolt-header-panel-links-all bolt-header-mobile-only">
                <a href=""><bolt-icon name="grid" decorative></bolt-icon>All business</a>
              </span>
              <div class="bolt-header-panel-links-list">
                <h2 class="bolt-header-panel-links-title">Related links</h2>
                <ul class="bolt-text-columns-1">
                  <li><a href="">Find an agent</a></li>
                  <li><a href="">Small business FAQ</a></li>
                  <li><a href="">Farm & agribusiness FAQ</a></li>
                  <li><a href="">Business banking</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!-- Panel 4 footer -->
        <div class="bolt-header-panel-footer">
          <div class="bolt-header-container">
            <div class="bolt-header-panel-promos">
              <a class="bolt-header-promo-tile" href="">
                <div class="bolt-header-promo-image">
                  <img src="images/placeholder-icon.svg" width="40px" height="40px" alt="">
                </div>
                <div class="bolt-header-promo-content">
                  <div class="bolt-header-promo-title">SmartRide&reg;</div>
                  <div class="bolt-header-promo-text">The more safely you drive,</div>
                </div>
              </a>
              <a class="bolt-header-promo-tile" href="">
                <div class="bolt-header-promo-image">
                  <img src="images/placeholder-icon.svg" width="40px" height="40px" alt="">
                </div>
                <div class="bolt-header-promo-content">
                  <div class="bolt-header-promo-title">SmartMiles&reg;</div>
                  <div class="bolt-header-promo-text">A flexible monthly rate based on how many miles you drive.</div>
                </div>
              </a>
              <a class="bolt-header-promo-tile" href="">
                <div class="bolt-header-promo-image">
                  <img src="images/placeholder-icon.svg" width="40px" height="40px" alt="">
                </div>
                <div class="bolt-header-promo-content">
                  <div class="bolt-header-promo-title">SmartRide&reg;</div>
                  <div class="bolt-header-promo-text">The more safely you drive,</div>
                </div>
              </a>
              <a class="bolt-header-promo-tile" href="">
                <div class="bolt-header-promo-image">
                  <img src="images/placeholder-icon.svg" width="40px" height="40px" alt="">
                </div>
                <div class="bolt-header-promo-content">
                  <div class="bolt-header-promo-title">SmartMiles&reg;</div>
                  <div class="bolt-header-promo-text">A flexible monthly rate based on how many miles you drive.</div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </li>
    <!-- Menu item 5 -->
    <li>
      <button>Investments</button>
      <!-- Panel 5 -->
      <div class="bolt-header-panel">
        <div class="bolt-header-panel-main">
          <div class="bolt-header-container">
            <span class="bolt-header-panel-links-all bolt-header-desktop-only">
              <a href=""><bolt-icon name="grid" decorative></bolt-icon>All investment products</a>
            </span>
            <div class="bolt-header-panel-links">
              <div class="bolt-header-panel-links-list">
                <h2 class="bolt-header-panel-links-title">Investment products</h2>
                <ul class="bolt-text-columns-2">
                  <li><a href="">Personal Retirement Plans</a></li>
                  <li><a href="">Annuities</a></li>
                  <li><a href="">Mutual Funds</a></li>
                  <li><a href="">Exchange traded funds</a></li>
                  <li><a href="">Life insurance</a></li>
                </ul>
              </div>
              <span class="bolt-header-panel-links-all bolt-header-mobile-only">
                <a href=""><bolt-icon name="grid" decorative></bolt-icon>All investment products</a>
              </span>
              <div class="bolt-header-panel-links-list">
                <h2 class="bolt-header-panel-links-title">Related links</h2>
                <ul class="bolt-text-columns-2">
                  <li><a href="">Find a financial professional</a></li>
                  <li><a href="">Personal finance FAQ</a></li>
                  <li><a href="">Investing & retirement FAQ</a></li>
                  <li><a href="">Personal banking</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!-- Panel 5 footer -->
        <div class="bolt-header-panel-footer">
          <div class="bolt-header-container">
            <div class="bolt-header-panel-promos">
              <a class="bolt-header-promo-tile" href="">
                <div class="bolt-header-promo-image">
                  <img src="images/placeholder-icon.svg" width="40px" height="40px" alt="">
                </div>
                <div class="bolt-header-promo-content">
                  <div class="bolt-header-promo-title">Retirement Income</div>
                  <div class="bolt-header-promo-text">Debunk the myths that may impact your money-saving ability today</div>
                </div>
              </a>
              <a class="bolt-header-promo-tile" href="">
                <div class="bolt-header-promo-image">
                  <img src="images/placeholder-icon.svg" width="40px" height="40px" alt="">
                </div>
                <div class="bolt-header-promo-content">
                  <div class="bolt-header-promo-title">Social Security solvency</div>
                  <div class="bolt-header-promo-text">Let a financial professional address your concerns</div>
                </div>
              </a>
              <a class="bolt-header-promo-tile" href="">
                <div class="bolt-header-promo-image">
                  <img src="images/placeholder-icon.svg" width="40px" height="40px" alt="">
                </div>
                <div class="bolt-header-promo-content">
                  <div class="bolt-header-promo-title">Free Will</div>
                  <div class="bolt-header-promo-text">Give your loved ones peace of mind - for free</div>
                </div>
              </a>
              <a class="bolt-header-promo-tile" href="">
                <div class="bolt-header-promo-image">
                  <img src="images/placeholder-icon.svg" width="40px" height="40px" alt="">
                </div>
                <div class="bolt-header-promo-content">
                  <div class="bolt-header-promo-title">My Medicare Matters</div>
                  <div class="bolt-header-promo-text">Make informed decisions on your coverage to get the most benefits</div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </li>
  </ul>
  <div slot="nav-actions">
    <bolt-button type="solid">Claims</bolt-button>
    <bolt-button type="solid">Pay a bill</bolt-button>
  </div>

</bolt-header>

Code

<bolt-header logohref=""></bolt-header>

Code reference

The bolt-header component primarily acts as a container that provides layout for specific slots, as well as preset styles for certain HTML patterns within them.

Parameters

breakpoint (optional):
- Screen width, in pixels, at which the header should switch from desktop to mobile display.
- Default: 768.
logohref (optional):
- The url for a link to be applied to the logo.
- Defaults to the base url ("/")
- May be overwritten by another href value, or to a blank string to remove the link entirely.
- If alternate logo(s) are provided using the logo slot, links should be included in the slotted content instead.
layout (optional):
- fixed (default) will align the header content with a fixed grid container, which restricts content to a fixed width at each responsive breakpoint.
- fluid will align header content to the edges of its parent element, matching the layout of a fluid grid container.
sticky (optional): defines whether mobile header appears fixed to the top of the viewport.
- on: mobile header always appears sticky.
- off: mobile header never appears sticky.
- auto: (default) sticky behavior is toggled based on scrolling.
  - scrolling down disables sticky appearance, allowing more page content to be visible.
  - scrolling up enables sticky appearance, allowing access to navigation from anywhere on the page.
noautoclose (optional): If present, the primary navigation menu will remain open when a link (<a> tag) within it is clicked.
- Bolt 6.5.0+

Slots

navigation-primary (optional): The primary navigation items in the menu bar. For basic links, provide an href value. For navigation panels, see the HTML patterns in the variations tab. Styles are provided for these patterns, but the content inside the dropdown panels may be modified and styled as needed.
external-links (optional): Part of secondary navigation, appears above the main header on the left on desktop, and at the bottom of the menu on mobile.
utility-links (optional): Part of secondary navigation, appears above the main header on the right on desktop, and above external-links on mobile.
logo (optional): The default Nationwide logo can be replaced by content in the logo slot. Using the bolt-header-mobile-only and bolt-header-desktop-only utility classes allows you to provide different assets for each viewport.
main-actions (optional): Buttons that appear in the main header area, to the right of the search (if present).
search (optional): Search field. The variations show an example using a bolt-textfield in this slot, but integration with search functionality is left up to the details of implementation.
nav-actions (optional): Buttons that appear next to the primary navigation items, in the menu bar.

Methods

The element exposes the following public Javascript APIs:

close(): Closes the bolt-header that the function is called from.

Restricted APIs

These configurations should only be used with prior approval from the Design Standards team. Use outside of approved contexts is not covered under Bolt's support policy.

Theming

Bolt provides limited theming of the header for alignment with non-Nationwide brand palettes in approved contexts.

The following CSS custom properties are available:

--primaryNav-accent
- Color of active menu tab indicator
In many use cases, this may be the only property that requires customization.
--primaryNav-item-color
- Text color for menu items (links or tabs)
--primaryNav-item-bg-hover
- Background color for menu tabs on hover
--menuBar-bg
- Background color for menu bar
--menuBar-outline
- Outline color for menu tabs and bottom border of menu
--menuBar-focus
- Focus indicator color for items in menu bar

Theming - active tab color

Panel 1 main content

Panel 1 footer content
Panel 2 main content

Panel 2 footer content
Panel 3 main content

Panel 3 footer content
Panel 4 main content

Panel 4 footer content

Claims

Pay a bill

Code

<style>
  bolt-header {
    --primaryNav-accent: #AA0000;
  }
</style>
<bolt-header>
  ...
</bolt-header>

Button theming

Bolt button theming is only available within the header.
The header provides the following CSS custom properties for button theming:
- --menuBar-button
  - Color of buttons in menu bar
- --main-button
  - Color of buttons in main header area
For custom button colors to take effect, buttons must also have one of the following classes applied:
- bolt-custom-dark
  - A dark base color should provide at least 4.5:1 contrast against white (#ffffff) text.
- bolt-custom-light
  - A light base color should provide at least 4.5:1 contrast against charcoal (#171717) text.

Theming - button color

Main action

Code

<style>
  bolt-header {
    --main-button: #AA0000;
  }
</style>
<bolt-header>
  <div slot="main-actions">
    <bolt-button type="solid" class="bolt-custom-dark">Main action</bolt-button>
  </div>
  ...
</bolt-header>

Design guidelines

General guidelines

Header sets the context for an application or page. It should provide relevant actions and serve as a visual indicator of site ownership.
Navigation levels should be kept to a minimum for better user experience.
Navigation labels should be concise.
Header translates to <header> in the DOM, therefore, follow the HTML header spec when using Header.
Ensure scalability of content and features across all breakpoints.
Maintain visual consistency in the Header.
When a user is in a multi-step flow (for filling out a form or a task process to submit information, etc.), a Minimal Header should be used. This will prevent a user from accidentally navigating away before completing the process.

When to use

When creating global, app, or page headers owned or endorsed by Nationwide.
When providing a single navigation method across all site pages for direct access to a site's most important and relevant pages.

When not to use

Don't use Header in Modals or Notifications.
Don't use a navigable Header inside a multi-screen flow. Use a Minimal Header and only display the pertinent information needed to complete the user's task.

Do

Use as few levels of navigation as possible.
Select a navigation style based on functionality, not aesthetics.
Display toolbars independently.
Display secondary and tertiary navigation options within a mega menu associated with the primary navigation label.
Keep Header contents limited to relevant, short and descriptive elements for a smooth and responsive layout.
Use Header as a visual indicator of site ownership or endorsement by Nationwide.

Don't

Don't introduce alternate color themes to Header.
Don't alter the foundational information architecture of the Header.
Don't wrap navigation label text, if at all possible; keep it succinct.
Don't use icons in the navigation menu solely for aesthetic purposes.

Content guidelines

Avoid wrapping navigation label text when possible. The maximum should be two lines at the application's smallest viewport.
Refer to the content guidelines section in Link and Button for their specific guidelines.

Accessibility

Keyboard interactions

Pressing Tab or Shift+Tab should move focus to the next or previous focusable element within the Header, including main menu and submenu items.
If a submenu is open:
- Pressing Tab should navigate sequentially through each link in the submenu.
- Once the focus reaches the last link in the submenu, pressing Tab should move focus to the next main navigation link and automatically close the submenu.
When using a screen reader, combined with pressing the left or right arrow key, focus should move horizontally between main menu and submenu items.
Pressing the Esc key should close an open submenu and shift focus back to the parent menu item.

tab order on header component

All Bolt components have gone through accessibility testing, but please keep our accessibility guidelines in mind.

Core foundations

Theming

Scaling

Visual Style

Content design

Using Bolt

Styling

Web components

HTML patterns

Components

About Bolt

General

Secondary navigation

Main header area

Menu bar

Example patterns

Vehicle products

Related links

Property products

Related links

Personal products

Related links

Insurance

Small business

Large business

Benefits

Related links

Investment products

Related links

Parameters

Slots

Methods

Restricted APIs

Theming

Button theming

General guidelines

When to use

When not to use

Content guidelines

Keyboard interactions