Main navigation

The main navigation shows users the key areas of your site and helps them to find what they are looking for. 

Default

The main navigation is horizontal. It displays at the top of your site. Users can navigate between related sections of content, showing one section at a time. 

<nav id="main-navigation" class="nsw-navigation " aria-label="Main menu">
  <div class="nsw-navigation__header">
    <h2 id="nsw-navigation">Menu</h2>
    <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
      <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
        <use xlink:href="#close"></use>
      </svg>
      <span class="sr-only">Close Menu</span>
    </button>
  </div>
  <ul class="nsw-navigation__list">
      <li class="nsw-navigation__list-item">
        <a href="#" class="nsw-navigation__link">
          <span class="nsw-navigation__link-text">About DPC</span>
        </a>
      </li>
      <li class="nsw-navigation__list-item">
        <a href="#" class="nsw-navigation__link">
          <span class="nsw-navigation__link-text">Updates</span>
        </a>
      </li>
      <li class="nsw-navigation__list-item">
        <a href="#" class="nsw-navigation__link">
          <span class="nsw-navigation__link-text">Publications</span>
        </a>
      </li>
      <li class="nsw-navigation__list-item">
        <a href="#" class="nsw-navigation__link">
          <span class="nsw-navigation__link-text">Tools &amp; Resources</span>
        </a>
      </li>
  </ul>
</nav>

 

Copy

Mega menu

The mega menu allows you to expand the selected navigation item to show its child pages.  

<nav id="main-navigation" class="nsw-navigation js-mega-menu" aria-label="Main menu">
  <div class="nsw-navigation__header">
    <h2 id="nsw-navigation">Menu</h2>
    <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
      <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
        <use xlink:href="#close"></use>
      </svg>
      <span class="sr-only">Close Menu</span>
    </button>
  </div>
  <ul class="nsw-navigation__list">
      <li class="nsw-navigation__list-item">
        <a href="#" class="nsw-navigation__link is-open" role="button" aria-expanded="true" aria-controls="914d7e2-subnav">
          <span class="nsw-navigation__link-text">About DPC</span>
          <svg class="nsw-icon nsw-navigation__link-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#chevron"></use>
          </svg>
        </a>
        <button type="button" class="nsw-navigation__subbtn js-open-subnav" aria-controls="914d7e2-subnav" aria-expanded="false">
          <svg class="nsw-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#chevron"></use>
          </svg>
          <span class="sr-only">Show About DPC Submenu</span>
        </button>
          <div class="nsw-subnavigation is-open" id="914d7e2-subnav" role="region" aria-label="About DPC Submenu">
            <div class="nsw-subnavigation__header">
              <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="914d7e2-subnav" aria-expanded="true">
                <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                  <use xlink:href="#chevron"></use>
                </svg>
                <span><span class="sr-only">Back to</span> About DPC</span>
              </button>

              <h2 class="nsw-subnavigation__title">
                <a href="#" class="nsw-subnavigation__title-link">
                  About DPC
                  <svg class="nsw-icon" focusable="false" aria-hidden="true">
                    <use xlink:href="#arrow"></use>
                  </svg>
                </a>
              </h2>
              <p class="nsw-subnavigation__description"></p>

              <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                  <use xlink:href="#close"></use>
                </svg>
                <span class="sr-only">Close Menu</span>
              </button>
            </div>
            <ul class="nsw-subnavigation__list">
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    Level 2
                  </a>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    Level 2
                  </a>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    Level 2
                  </a>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    Level 2
                  </a>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    Level 2
                  </a>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    Level 2
                  </a>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    Level 2
                  </a>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    Level 2
                  </a>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    Level 2
                  </a>
                </li>
            </ul>
          </div>
      </li>
      <li class="nsw-navigation__list-item">
        <a href="#" class="nsw-navigation__link" role="button" aria-expanded="false" aria-controls="3250fbee-subnav">
          <span class="nsw-navigation__link-text">Updates</span>
          <svg class="nsw-icon nsw-navigation__link-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#chevron"></use>
          </svg>
        </a>
        <button type="button" class="nsw-navigation__subbtn js-open-subnav" aria-controls="3250fbee-subnav" aria-expanded="false">
          <svg class="nsw-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#chevron"></use>
          </svg>
          <span class="sr-only">Show Updates Submenu</span>
        </button>
          <div class="nsw-subnavigation" id="3250fbee-subnav" role="region" aria-label="Updates Submenu">
            <div class="nsw-subnavigation__header">
              <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="3250fbee-subnav" aria-expanded="true">
                <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                  <use xlink:href="#chevron"></use>
                </svg>
                <span><span class="sr-only">Back to</span> Updates</span>
              </button>

              <h2 class="nsw-subnavigation__title">
                <a href="#" class="nsw-subnavigation__title-link">
                  Updates
                  <svg class="nsw-icon" focusable="false" aria-hidden="true">
                    <use xlink:href="#arrow"></use>
                  </svg>
                </a>
              </h2>
              <p class="nsw-subnavigation__description"></p>

              <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                  <use xlink:href="#close"></use>
                </svg>
                <span class="sr-only">Close Menu</span>
              </button>
            </div>
            <ul class="nsw-subnavigation__list">
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    Level 2
                  </a>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    Level 2
                  </a>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    Level 2
                  </a>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    Level 2
                  </a>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    Level 2
                  </a>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    Level 2
                  </a>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    Level 2
                  </a>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    Level 2
                  </a>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    Level 2
                  </a>
                </li>
            </ul>
          </div>
      </li>
      <li class="nsw-navigation__list-item">
        <a href="#" class="nsw-navigation__link" role="button" aria-expanded="false" aria-controls="bd48c03b-subnav">
          <span class="nsw-navigation__link-text">Publications</span>
          <svg class="nsw-icon nsw-navigation__link-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#chevron"></use>
          </svg>
        </a>
        <button type="button" class="nsw-navigation__subbtn js-open-subnav" aria-controls="bd48c03b-subnav" aria-expanded="false">
          <svg class="nsw-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#chevron"></use>
          </svg>
          <span class="sr-only">Show Publications Submenu</span>
        </button>
          <div class="nsw-subnavigation" id="bd48c03b-subnav" role="region" aria-label="Publications Submenu">
            <div class="nsw-subnavigation__header">
              <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="bd48c03b-subnav" aria-expanded="true">
                <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                  <use xlink:href="#chevron"></use>
                </svg>
                <span><span class="sr-only">Back to</span> Publications</span>
              </button>

              <h2 class="nsw-subnavigation__title">
                <a href="#" class="nsw-subnavigation__title-link">
                  Publications
                  <svg class="nsw-icon" focusable="false" aria-hidden="true">
                    <use xlink:href="#arrow"></use>
                  </svg>
                </a>
              </h2>
              <p class="nsw-subnavigation__description"></p>

              <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                  <use xlink:href="#close"></use>
                </svg>
                <span class="sr-only">Close Menu</span>
              </button>
            </div>
            <ul class="nsw-subnavigation__list">
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    Level 2
                  </a>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    Level 2
                  </a>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    Level 2
                  </a>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    Level 2
                  </a>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    Level 2
                  </a>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    Level 2
                  </a>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    Level 2
                  </a>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    Level 2
                  </a>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    Level 2
                  </a>
                </li>
            </ul>
          </div>
      </li>
      <li class="nsw-navigation__list-item">
        <a href="#" class="nsw-navigation__link" role="button" aria-expanded="false" aria-controls="c457a536-subnav">
          <span class="nsw-navigation__link-text">Tools &amp; Resources</span>
          <svg class="nsw-icon nsw-navigation__link-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#chevron"></use>
          </svg>
        </a>
        <button type="button" class="nsw-navigation__subbtn js-open-subnav" aria-controls="c457a536-subnav" aria-expanded="false">
          <svg class="nsw-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#chevron"></use>
          </svg>
          <span class="sr-only">Show Tools &amp; Resources Submenu</span>
        </button>
          <div class="nsw-subnavigation" id="c457a536-subnav" role="region" aria-label="Tools &amp; Resources Submenu">
            <div class="nsw-subnavigation__header">
              <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="c457a536-subnav" aria-expanded="true">
                <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                  <use xlink:href="#chevron"></use>
                </svg>
                <span><span class="sr-only">Back to</span> Tools &amp; Resources</span>
              </button>

              <h2 class="nsw-subnavigation__title">
                <a href="#" class="nsw-subnavigation__title-link">
                  Tools &amp; Resources
                  <svg class="nsw-icon" focusable="false" aria-hidden="true">
                    <use xlink:href="#arrow"></use>
                  </svg>
                </a>
              </h2>
              <p class="nsw-subnavigation__description"></p>

              <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                  <use xlink:href="#close"></use>
                </svg>
                <span class="sr-only">Close Menu</span>
              </button>
            </div>
            <ul class="nsw-subnavigation__list">
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    Level 2
                  </a>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    Level 2
                  </a>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    Level 2
                  </a>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    Level 2
                  </a>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    Level 2
                  </a>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    Level 2
                  </a>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    Level 2
                  </a>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    Level 2
                  </a>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    Level 2
                  </a>
                </li>
            </ul>
          </div>
      </li>
  </ul>
</nav>

 

Copy

Devices smaller than 768px

For users browsing using smaller devices, the navigation is provided through the hamburger menu in the header pattern.

 

 

The main navigation shows the top-level detail of your Information Architecture (IA).  

If you are using the mega menu, an additional level of your IA is displayed. A chevron indicates when a mega menu is available.  

Because the main navigation is a horizontal list, it won’t support a large number of items.  When defining your IA, this will need to be taken into consideration.

On smaller devices, the main nav collapses down to a conventional hamburger menu.  

The labels must be clear, logical and predictable. 

You can use the main navigation without the mega menu. In this instance the side navigation should also be used on sites greater than 1 level deep. This will allow your users to find what they are looking for beyond the top level. 

On sites with more than 1 level of navigation, you can provide more context with a mega menu. This displays the second level of your IA. 

On smaller devices, the main navigation displays as a hamburger menu, where all levels are available.