Components

Header

A header helps users identify where they are and provide a quick, organized way to reach the main sections of a website. Our headers include branding to identify the site and horizontal navigation.

When to use the header component

  • Use the gov banner on all federal websites. We recommend that all federal government sites include the “official government website” banner and a logo or site name.
  • Most websites require header navigation. Most sites will 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

  • Include skip navigation links to allow users with 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 skipnav link. Find more information here: http://webaim.org/techniques/skipnav/
  • Include tab focus for all top-level navigation navigation items — this will allow keyboard-reliant users to easily navigate interactive items.
  • Ensure your horizontal navigation is keyboard compatible; test to make sure users can use Tab to navigate and Space (or Enter) to open pages.
  • 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.
  • USWDS uses semantic header and nav elements with role="banner" and role="navigation" respectively. role="banner" is your masthead.
  • You can use multiple nav elements for groups of navigation links, but you should only use one role="navigation" for the main nav of a page.
  • Use lists for your nav links — this enables screen readers to decipher header contents.
  • If you’re using a logo that’s an image rather than text, make sure you include alternative text for screen readers.
  • 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/

The “official government website” banner

We recommend that all federal government sites include the “official government website” banner and a logo or site name. The banner clearly identifies your site as part of the United States government, while a logo or site name helps visitors understand who you are and what you do.

Building with HTTPS

HTTPS is a best practice for all websites: It’s secure, private, and fast, and search engines prefer encrypted sites. But it’s especially important for government websites. The .gov in government websites carries a lot of weight. The public expects the contents of .gov websites to be official and accurate, and they expect any information they submit to that website to be private. The U.S. CIO provides guidance to implementing HTTPS for government websites at https://https.cio.gov/

References

Basic header

Orient users to a simple site.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<a class="usa-skipnav" href="#main-content">Skip to main content</a>
<div class="usa-banner">
  <div class="usa-accordion">
    <header class="usa-banner__header">
      <div class="usa-banner__inner">
        <div class="grid-col-auto">
          <img class="usa-banner__header-flag" src="/assets/img/us_flag_small.png" alt="U.S. flag">
        </div>
        <div class="grid-col-fill tablet:grid-col-auto">
          <p class="usa-banner__header-text">An official website of the United States government</p>
          <p class="usa-banner__header-action" aria-hidden="true">Here’s how you know</p>
        </div>
        <button class="usa-accordion__button usa-banner__button"
          aria-expanded="false" aria-controls="gov-banner">
          <span class="usa-banner__button-text">Here’s how you know</span>
        </button>
      </div>
    </header>
    <div class="usa-banner__content usa-accordion__content" id="gov-banner">
      <div class="grid-row grid-gap-lg">
        <div class="usa-banner__guidance tablet:grid-col-6">
          <img class="usa-banner__icon usa-media-block__img" src="/assets/img/icon-dot-gov.svg" alt="Dot gov">
          <div class="usa-media-block__body">
            <p>
              <strong>The .gov means it’s official.</strong>
              <br>
              Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.
            </p>
          </div>
        </div>
        <div class="usa-banner__guidance tablet:grid-col-6">
          <img class="usa-banner__icon usa-media-block__img" src="/assets/img/icon-https.svg" alt="Https">
          <div class="usa-media-block__body">
            <p>
              <strong>The site is secure.</strong>
              <br>
              The <strong>https://</strong> ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


  

<div class="usa-overlay"></div>
<header class="usa-header usa-header--basic" role="banner">
  <div class="usa-nav-container">
    <div class="usa-navbar">
  <div class="usa-logo" id="basic-logo">
    <em class="usa-logo__text"><a href="/" title="Home" aria-label="Home">Project title</a></em>
  </div>
  <button class="usa-menu-btn">Menu</button>
</div>
<nav role="navigation" class="usa-nav">
      <button class="usa-nav__close"><img src="/assets/img/close.svg" alt="close"></button>
<ul class="usa-nav__primary usa-accordion"><li class="usa-nav__primary-item">
    <button class="usa-accordion__button usa-nav__link  usa-current" aria-expanded="false" aria-controls="basic-nav-section-one"><span>Current section</span></button>
    <ul id="basic-nav-section-one" class="usa-nav__submenu"><li class="usa-nav__submenu-item">
              <a href="#">Navigation link</a>
            </li><li class="usa-nav__submenu-item">
              <a href="#">Navigation link</a>
            </li><li class="usa-nav__submenu-item">
              <a href="#">Navigation link</a>
            </li></ul></li><li class="usa-nav__primary-item">
    <button class="usa-accordion__button usa-nav__link" aria-expanded="false" aria-controls="basic-nav-section-two"><span>Section</span></button>
    <ul id="basic-nav-section-two" class="usa-nav__submenu"><li class="usa-nav__submenu-item">
              <a href="#">Navigation link</a>
            </li><li class="usa-nav__submenu-item">
              <a href="#">Navigation link</a>
            </li><li class="usa-nav__submenu-item">
              <a href="#">Navigation link</a>
            </li></ul></li><li class="usa-nav__primary-item">
    <a class="usa-nav__link" href="javascript:void(0)"><span>Simple link</span></a>
    </li></ul><form class="usa-search usa-search--small ">
  <div role="search">
    <label class="usa-sr-only" for="basic-search-field-small">Search small</label>
    <input class="usa-input" id="basic-search-field-small" type="search" name="search">
    <button class="usa-button" type="submit"><span class="usa-sr-only">Search</span></button>
  </div>
</form>
</nav>
  </div>
</header>
<main id="main-content"></main>

About

  • Use the basic header if you have few enough sections in your main navigation to fit comfortably next to your logo; this will depend on the length of your text and whether you include a search bar. You can customize it (depending on your site structure) and use it with:
    • A text or image logo
    • With or without dropdown menus
    • With or without a search bar
    • With or without call-to-action buttons in place of the search bar

When to use the basic header component

  • Limited sections. The basic header is great if you have a modest number of sections in your main navigation.
  • Shallow hierarchy. You may also use it if each main section listed in the horizontal navigation has six or fewer subsections that you’d like to include in a dropdown menu.

When not to use it

  • Many sections or deep hierarchy. Consider using the extended header if you have more sections in your horizontal navigation than will fit comfortably next to your logo, or if you have complex sections that require the use of a megamenu.

Package information

  • Package usage: @import usa-header
  • Requires: required, global

Basic header with megamenu

Orient users to a site with deeper hierarchical needs.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<a class="usa-skipnav" href="#main-content">Skip to main content</a>
<div class="usa-banner">
  <div class="usa-accordion">
    <header class="usa-banner__header">
      <div class="usa-banner__inner">
        <div class="grid-col-auto">
          <img class="usa-banner__header-flag" src="/assets/img/us_flag_small.png" alt="U.S. flag">
        </div>
        <div class="grid-col-fill tablet:grid-col-auto">
          <p class="usa-banner__header-text">An official website of the United States government</p>
          <p class="usa-banner__header-action" aria-hidden="true">Here’s how you know</p>
        </div>
        <button class="usa-accordion__button usa-banner__button"
          aria-expanded="false" aria-controls="gov-banner">
          <span class="usa-banner__button-text">Here’s how you know</span>
        </button>
      </div>
    </header>
    <div class="usa-banner__content usa-accordion__content" id="gov-banner">
      <div class="grid-row grid-gap-lg">
        <div class="usa-banner__guidance tablet:grid-col-6">
          <img class="usa-banner__icon usa-media-block__img" src="/assets/img/icon-dot-gov.svg" alt="Dot gov">
          <div class="usa-media-block__body">
            <p>
              <strong>The .gov means it’s official.</strong>
              <br>
              Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.
            </p>
          </div>
        </div>
        <div class="usa-banner__guidance tablet:grid-col-6">
          <img class="usa-banner__icon usa-media-block__img" src="/assets/img/icon-https.svg" alt="Https">
          <div class="usa-media-block__body">
            <p>
              <strong>The site is secure.</strong>
              <br>
              The <strong>https://</strong> ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


  


<div class="usa-overlay"></div>
<header class="usa-header usa-header--basic usa-header--megamenu" role="banner">
  <div class="usa-nav-container">
    <div class="usa-navbar">
  <div class="usa-logo" id="basic-mega-logo">
    <em class="usa-logo__text"><a href="/" title="Home" aria-label="Home">Project title</a></em>
  </div>
  <button class="usa-menu-btn">Menu</button>
</div>
<nav role="navigation" class="usa-nav">
      <button class="usa-nav__close"><img src="/assets/img/close.svg" alt="close"></button>
<ul class="usa-nav__primary usa-accordion"><li class="usa-nav__primary-item">
    <button class="usa-accordion__button usa-nav__link  usa-current" aria-expanded="false" aria-controls="basic-mega-nav-section-one"><span>Current section</span></button>
    <div id="basic-mega-nav-section-one" class="usa-nav__submenu usa-megamenu"><div class="grid-row grid-gap-4"><div class="desktop:grid-col-3">
              <ul class="usa-nav__submenu-list"><li class="usa-nav__submenu-item">
                    <a href="#">Navigation link</a>
                  </li><li class="usa-nav__submenu-item">
                    <a href="#">Navigation link</a>
                  </li><li class="usa-nav__submenu-item">
                    <a href="#">Navigation link</a>
                  </li></ul>
            </div><div class="desktop:grid-col-3">
              <ul class="usa-nav__submenu-list"><li class="usa-nav__submenu-item">
                    <a href="#">Navigation link</a>
                  </li><li class="usa-nav__submenu-item">
                    <a href="#">A very long navigation link that goes onto two lines</a>
                  </li><li class="usa-nav__submenu-item">
                    <a href="#">Navigation link</a>
                  </li></ul>
            </div><div class="desktop:grid-col-3">
              <ul class="usa-nav__submenu-list"><li class="usa-nav__submenu-item">
                    <a href="#">Navigation link</a>
                  </li><li class="usa-nav__submenu-item">
                    <a href="#">Navigation link</a>
                  </li><li class="usa-nav__submenu-item">
                    <a href="#">Navigation link</a>
                  </li></ul>
            </div></div></div></li><li class="usa-nav__primary-item">
    <button class="usa-accordion__button usa-nav__link" aria-expanded="false" aria-controls="basic-mega-nav-section-two"><span>Section</span></button>
    <div id="basic-mega-nav-section-two" class="usa-nav__submenu usa-megamenu"><div class="grid-row grid-gap-4"><div class="desktop:grid-col-3">
              <ul class="usa-nav__submenu-list"><li class="usa-nav__submenu-item">
                    <a href="#">Navigation link</a>
                  </li><li class="usa-nav__submenu-item">
                    <a href="#">Navigation link</a>
                  </li><li class="usa-nav__submenu-item">
                    <a href="#">Navigation link</a>
                  </li></ul>
            </div><div class="desktop:grid-col-3">
              <ul class="usa-nav__submenu-list"><li class="usa-nav__submenu-item">
                    <a href="#">Navigation link</a>
                  </li><li class="usa-nav__submenu-item">
                    <a href="#">A very long navigation link that goes onto two lines</a>
                  </li><li class="usa-nav__submenu-item">
                    <a href="#">Navigation link</a>
                  </li></ul>
            </div><div class="desktop:grid-col-3">
              <ul class="usa-nav__submenu-list"><li class="usa-nav__submenu-item">
                    <a href="#">Navigation link</a>
                  </li><li class="usa-nav__submenu-item">
                    <a href="#">Navigation link</a>
                  </li><li class="usa-nav__submenu-item">
                    <a href="#">Navigation link</a>
                  </li></ul>
            </div></div></div></li><li class="usa-nav__primary-item">
    <a class="usa-nav__link" href="javascript:void(0)"><span>Simple link</span></a>
    </li></ul><form class="usa-search usa-search--small ">
  <div role="search">
    <label class="usa-sr-only" for="basic-mega-search-field-small">Search small</label>
    <input class="usa-input" id="basic-mega-search-field-small" type="search" name="search">
    <button class="usa-button" type="submit"><span class="usa-sr-only">Search</span></button>
  </div>
</form>
</nav>
  </div>
</header>
<main id="main-content"></main>

About

  • The basic header with megamenu is similar in design to the basic header component. The megamenu allows for the inclusion of more links in the dropdown menus. You can customize this header (depending on your site structure) and use it with:
    • A text or image logo
    • With or without a search bar
    • With or without call-to-action buttons in place of the search bar

When to use the basic header with megamenu component

  • Deep hierarchy. Use the basic header with megamenu if you’d like to include more than six links in any of your dropdown menus, and if you have few enough main sections to allow your horizontal navigation to fit comfortably in the basic header.

When not to use it

  • Not enough content to warrant a megamenu. Consider using a basic dropdown rather than a megamenu unless you need to link to a very large number of sub pages.

Package information

  • Package usage: @import usa-header
  • Requires: required, global

Extended header

Orient users to a site with lots of sections.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<a class="usa-skipnav" href="#main-content">Skip to main content</a>
<div class="usa-banner">
  <div class="usa-accordion">
    <header class="usa-banner__header">
      <div class="usa-banner__inner">
        <div class="grid-col-auto">
          <img class="usa-banner__header-flag" src="/assets/img/us_flag_small.png" alt="U.S. flag">
        </div>
        <div class="grid-col-fill tablet:grid-col-auto">
          <p class="usa-banner__header-text">An official website of the United States government</p>
          <p class="usa-banner__header-action" aria-hidden="true">Here’s how you know</p>
        </div>
        <button class="usa-accordion__button usa-banner__button"
          aria-expanded="false" aria-controls="gov-banner">
          <span class="usa-banner__button-text">Here’s how you know</span>
        </button>
      </div>
    </header>
    <div class="usa-banner__content usa-accordion__content" id="gov-banner">
      <div class="grid-row grid-gap-lg">
        <div class="usa-banner__guidance tablet:grid-col-6">
          <img class="usa-banner__icon usa-media-block__img" src="/assets/img/icon-dot-gov.svg" alt="Dot gov">
          <div class="usa-media-block__body">
            <p>
              <strong>The .gov means it’s official.</strong>
              <br>
              Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.
            </p>
          </div>
        </div>
        <div class="usa-banner__guidance tablet:grid-col-6">
          <img class="usa-banner__icon usa-media-block__img" src="/assets/img/icon-https.svg" alt="Https">
          <div class="usa-media-block__body">
            <p>
              <strong>The site is secure.</strong>
              <br>
              The <strong>https://</strong> ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


  

<div class="usa-overlay"></div>
<header class="usa-header usa-header--extended" role="banner"><div class="usa-navbar">
  <div class="usa-logo" id="extended-logo">
    <em class="usa-logo__text"><a href="/" title="Home" aria-label="Home">Project title</a></em>
  </div>
  <button class="usa-menu-btn">Menu</button>
</div>
<nav role="navigation" class="usa-nav">
    <div class="usa-nav__inner"><button class="usa-nav__close"><img src="/assets/img/close.svg" alt="close"></button>
<ul class="usa-nav__primary usa-accordion"><li class="usa-nav__primary-item">
    <button class="usa-accordion__button usa-nav__link  usa-current" aria-expanded="false" aria-controls="extended-nav-section-one"><span>Current section</span></button>
    <ul id="extended-nav-section-one" class="usa-nav__submenu"><li class="usa-nav__submenu-item">
              <a href="#">Navigation link</a>
            </li><li class="usa-nav__submenu-item">
              <a href="#">Navigation link</a>
            </li><li class="usa-nav__submenu-item">
              <a href="#">Navigation link</a>
            </li></ul></li><li class="usa-nav__primary-item">
    <button class="usa-accordion__button usa-nav__link" aria-expanded="false" aria-controls="extended-nav-section-two"><span>Section</span></button>
    <ul id="extended-nav-section-two" class="usa-nav__submenu"><li class="usa-nav__submenu-item">
              <a href="#">Navigation link</a>
            </li><li class="usa-nav__submenu-item">
              <a href="#">Navigation link</a>
            </li><li class="usa-nav__submenu-item">
              <a href="#">Navigation link</a>
            </li></ul></li><li class="usa-nav__primary-item">
    <a class="usa-nav__link" href="javascript:void(0)"><span>Simple link</span></a>
    </li></ul><div class="usa-nav__secondary">
  <ul class="usa-nav__secondary-links"><li class="usa-nav__secondary-item">
      <a href="">Secondary link</a>
    </li><li class="usa-nav__secondary-item">
      <a href="">Another secondary link</a>
    </li></ul><form class="usa-search usa-search--small ">
  <div role="search">
    <label class="usa-sr-only" for="extended-search-field-small">Search small</label>
    <input class="usa-input" id="extended-search-field-small" type="search" name="search">
    <button class="usa-button" type="submit"><span class="usa-sr-only">Search</span></button>
  </div>
</form>
</div>
</div>
  </nav>
</header>
<main id="main-content"></main>

About

  • The extended header allows for inclusion of more sections in the 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 component

  • 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 not to use it

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

Package information

  • Package usage: @import usa-header
  • Requires: required, global

Extended header with megamenu

Orient users to a site with lots of sections and deeper hierarchical needs.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<a class="usa-skipnav" href="#main-content">Skip to main content</a>
<div class="usa-banner">
  <div class="usa-accordion">
    <header class="usa-banner__header">
      <div class="usa-banner__inner">
        <div class="grid-col-auto">
          <img class="usa-banner__header-flag" src="/assets/img/us_flag_small.png" alt="U.S. flag">
        </div>
        <div class="grid-col-fill tablet:grid-col-auto">
          <p class="usa-banner__header-text">An official website of the United States government</p>
          <p class="usa-banner__header-action" aria-hidden="true">Here’s how you know</p>
        </div>
        <button class="usa-accordion__button usa-banner__button"
          aria-expanded="false" aria-controls="gov-banner">
          <span class="usa-banner__button-text">Here’s how you know</span>
        </button>
      </div>
    </header>
    <div class="usa-banner__content usa-accordion__content" id="gov-banner">
      <div class="grid-row grid-gap-lg">
        <div class="usa-banner__guidance tablet:grid-col-6">
          <img class="usa-banner__icon usa-media-block__img" src="/assets/img/icon-dot-gov.svg" alt="Dot gov">
          <div class="usa-media-block__body">
            <p>
              <strong>The .gov means it’s official.</strong>
              <br>
              Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.
            </p>
          </div>
        </div>
        <div class="usa-banner__guidance tablet:grid-col-6">
          <img class="usa-banner__icon usa-media-block__img" src="/assets/img/icon-https.svg" alt="Https">
          <div class="usa-media-block__body">
            <p>
              <strong>The site is secure.</strong>
              <br>
              The <strong>https://</strong> ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


  


<div class="usa-overlay"></div>
<header class="usa-header usa-header--extended" role="banner"><div class="usa-navbar">
  <div class="usa-logo" id="extended-mega-logo">
    <em class="usa-logo__text"><a href="/" title="Home" aria-label="Home">Project title</a></em>
  </div>
  <button class="usa-menu-btn">Menu</button>
</div>
<nav role="navigation" class="usa-nav">
    <div class="usa-nav__inner"><button class="usa-nav__close"><img src="/assets/img/close.svg" alt="close"></button>
<ul class="usa-nav__primary usa-accordion"><li class="usa-nav__primary-item">
    <button class="usa-accordion__button usa-nav__link  usa-current" aria-expanded="false" aria-controls="extended-mega-nav-section-one"><span>Current section</span></button>
    <div id="extended-mega-nav-section-one" class="usa-nav__submenu usa-megamenu"><div class="grid-row grid-gap-4"><div class="desktop:grid-col-3">
              <ul class="usa-nav__submenu-list"><li class="usa-nav__submenu-item">
                    <a href="#">Navigation link</a>
                  </li><li class="usa-nav__submenu-item">
                    <a href="#">Navigation link</a>
                  </li><li class="usa-nav__submenu-item">
                    <a href="#">Navigation link</a>
                  </li></ul>
            </div><div class="desktop:grid-col-3">
              <ul class="usa-nav__submenu-list"><li class="usa-nav__submenu-item">
                    <a href="#">Navigation link</a>
                  </li><li class="usa-nav__submenu-item">
                    <a href="#">A very long navigation link that goes onto two lines</a>
                  </li><li class="usa-nav__submenu-item">
                    <a href="#">Navigation link</a>
                  </li></ul>
            </div><div class="desktop:grid-col-3">
              <ul class="usa-nav__submenu-list"><li class="usa-nav__submenu-item">
                    <a href="#">Navigation link</a>
                  </li><li class="usa-nav__submenu-item">
                    <a href="#">Navigation link</a>
                  </li><li class="usa-nav__submenu-item">
                    <a href="#">Navigation link</a>
                  </li></ul>
            </div></div></div></li><li class="usa-nav__primary-item">
    <button class="usa-accordion__button usa-nav__link" aria-expanded="false" aria-controls="extended-mega-nav-section-two"><span>Section</span></button>
    <div id="extended-mega-nav-section-two" class="usa-nav__submenu usa-megamenu"><div class="grid-row grid-gap-4"><div class="desktop:grid-col-3">
              <ul class="usa-nav__submenu-list"><li class="usa-nav__submenu-item">
                    <a href="#">Navigation link</a>
                  </li><li class="usa-nav__submenu-item">
                    <a href="#">Navigation link</a>
                  </li><li class="usa-nav__submenu-item">
                    <a href="#">Navigation link</a>
                  </li></ul>
            </div><div class="desktop:grid-col-3">
              <ul class="usa-nav__submenu-list"><li class="usa-nav__submenu-item">
                    <a href="#">Navigation link</a>
                  </li><li class="usa-nav__submenu-item">
                    <a href="#">A very long navigation link that goes onto two lines</a>
                  </li><li class="usa-nav__submenu-item">
                    <a href="#">Navigation link</a>
                  </li></ul>
            </div><div class="desktop:grid-col-3">
              <ul class="usa-nav__submenu-list"><li class="usa-nav__submenu-item">
                    <a href="#">Navigation link</a>
                  </li><li class="usa-nav__submenu-item">
                    <a href="#">Navigation link</a>
                  </li><li class="usa-nav__submenu-item">
                    <a href="#">Navigation link</a>
                  </li></ul>
            </div></div></div></li><li class="usa-nav__primary-item">
    <a class="usa-nav__link" href="javascript:void(0)"><span>Simple link</span></a>
    </li></ul><div class="usa-nav__secondary">
  <ul class="usa-nav__secondary-links"><li class="usa-nav__secondary-item">
      <a href="">Secondary link</a>
    </li><li class="usa-nav__secondary-item">
      <a href="">Another secondary link</a>
    </li></ul><form class="usa-search usa-search--small ">
  <div role="search">
    <label class="usa-sr-only" for="extended-mega-search-field-small">Search small</label>
    <input class="usa-input" id="extended-mega-search-field-small" type="search" name="search">
    <button class="usa-button" type="submit"><span class="usa-sr-only">Search</span></button>
  </div>
</form>
</div>
</div>
  </nav>
</header>
<main id="main-content"></main>

About

  • Like the extended header, the extended header with megamenu allows for inclusion of more sections in your horizontal navigation; it also allows you to include more links in any of your dropdowns. You can customize the header (depending on your site structure) and use it:
    • With a text or image logo
    • With or without the expandable search bar
    • With or without call-to-action buttons in place of the secondary links in the horizontal navigation

When to use the extended header with megamenu component

  • Lots of sections. Use an extended header with mega menu 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. It’s also useful 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 — or if you’d like to include more than six links in any of your dropdowns.
  • Deep hierarchy. If you’d like to include more than six links in any of your dropdowns.

When not to use it

  • Shallow hierarchy. Consider using a basic dropdown rather than a megamenu unless you need to link to a very large number of sub pages.

Package information

  • Package usage: @import usa-header
  • Requires: required, global