Header

When to use the 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.

When to consider something else

Single-page applications or very simple sites.

If your site has only one page or very limited content, a full header may not be necessary.

Usability guidance

List all important website sections as links in the horizontal navigation.

Include all major sections of your site in the 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 link labels.

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.

Accessibility guidance

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.

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

Using the header component

Include the overlay element.

Add <div class="usa-overlay"></div> before the header element to enable the mobile menu overlay.

Load uswds-init.js for best performance.

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

Use type="button" on navigation buttons.

All non-form buttons should have type="button" to prevent default submit behaviors.

USWDS Documentation

For more guidance, view the USWDS Header Component Documentation.