Extended header

Orient users to a site with lots of sections.

Guidance

About

An extended header allows for the inclusion of more sections in a horizontal navigation. You can customize the header (depending on your site structure) and use it:

  • With a text or image logo
  • With or without dropdown menus
  • With or without the expandable search bar
  • With or without call-to-action buttons in place of the secondary links featured in your horizontal navigation

When to use the extended header

  • Lots of sections. Use the extended header if you have too many sections in your horizontal navigation to fit comfortably in the basic header format.
  • Secondary links or specific calls to action. Use the extended header if you’d like to include secondary links or specific calls to action in addition to the main content navigation — for example Log in and Sign up links.

When to consider something else

  • Simple site needs. Consider using the basic header if you have less information — the basic header takes up less space.

Package

  • Package usage: @forward "usa-header";
  • Dependencies: uswds-fonts, uswds-helpers, usa-skipnav, usa-search, usa-button, usa-nav, usa-accordion