Components

Header

A header helps users identify where they are and provides a quick, organized way to reach the main sections of a website.

When to use a header component

• Most websites require header navigation. Most websites require some form of navigation to help users find the information they need. While a horizontal navigation bar is just one option for navigation design, it is one of the most visible and familiar ways of helping users navigate a site.

Header usability

• List all important website sections as links in the horizontal navigation.
• Dropdown menus help preview lower-level content. For large websites, use dropdown menus to help users preview lower-level content. If lower-level sections are closely related and users will need to quickly jump between them, consider using a side navigation instead of — or in addition to — a dropdown.
• Use short, clear link labels. Don’t use jargon or unfamiliar terms.
• Left-justify. Left-justified link labels are more easily scannable.
• Present links in priority order. Higher-demand links should appear farther to the left, and lower-demand links should appear farther to the right.
• Avoid org-structure navigation. Don’t model your navigation after your agency’s org structure. Instead, structure it according to the tasks and information your users most frequently need to access.
• Highlight the current section. Show users where they are within the site by highlighting the current section.
• Always research your navigation. Conduct research with your users, and base decisions about your site’s information architecture and navigation structure on your findings. Continue researching to confirm that updates meet your users’ needs.

Header accessibility

• Add a skip navigation link before the header. Include skip navigation links to allow those using screen readers to bypass long navigation lists. Make sure you include an id at the beginning of your main content and that it matches the skip navigation link. Find more information on skip navigation links at WebAIM.
• Ensure your horizontal navigation is keyboard compatible. Test to make sure users can use Tab to navigate and Space (or Enter) to open pages.
• Include tab focus for all top-level navigation navigation items. This feature will allow keyboard-reliant users to easily navigate interactive items.
• Avoid using hover to expand dropdown lists. Hover is difficult for some users and won't work on touch screens. Dropdowns should expand on click or with keyboard navigation.
• Add context by labelling your nav element. If your page has more than one nav element, use the aria-label attribute to help assistive technology users understand the purpose of the navigation.
• Use list elements for your navigation links. This helps screen reader users navigate header content.
• Add alt text to your logo image. If you’re using a logo that’s an image rather than text, make sure you include alternative text for screen readers.
• Don't use an H1 for your logo. If you’re using a logo that’s text, use an em, not an h1, unless it’s the homepage. Find more information here: http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/.

Further reading

• Menu design resource from Nielsen Norman
• Tree Testing resource from UserTesting.com

Implementation

Header settings

Variable	Description
$theme-header-font-family	Font family of the header.
$theme-header-logo-text-width	Width of the logo text area at desktop width as a percentage of the total header width.
$theme-header-max-width	Maximum width of the header.
$theme-header-min-width	Breakpoint at which the non-mobile header is shown.

Header variants

Variant	Description
.usa-header--basic	Display a simple header.
.usa-header--megamenu	Display a megamenu.
.usa-header--extended	Display an extended header.

Note: We recommend loading uswds-init.js when using banner, header, or modal components to assist in preventing flashes of unstyled content (FOUC) as well as cumulative layout shift (CLS). This small JavaScript file (less than 1 KB minified) helps the browser know if the USWDS JavaScript library is loading properly.

To add uswds-init to your site, simply copy uswds-init.js into your site assets from either the uswds-core/src/js package or the dist/js directory in the downloadable package. Then, reference the file in the of your HTML files. Alternatively, you can inline its contents directly into a

designsystem.digital.gov

An official website of the General Services Administration

Looking for U.S. government information and services?

Visit USA.gov