Navigation

Make sure users understand where they are in the service, where they have been and where they can go.

Collection: Patterns

Site navigation

Use the site navigation to help the user to navigate between main sections.

The menu will collapse by default on small screens.

Older browsers (IE8 and lower) and those without JavaScript will get an expanded menu.

<div class="site-nav">
  <nav class="site-nav__wrapper">
    <ul>
      <li>
        <a href="#">Home</a>
      </li>
      <li>
        <a href="#">What we do</a>
      </li>
      <li>
        <a href="#">News</a>
      </li>
      <li>
        <a href="#">Blog</a>
      </li>
      <li>
        <a href="#">Contact</a>
      </li>
    </ul>
  </nav>
</div>

Tab navigation (experimental)

Use tab navigation to style a links list as horizontal tabs. Tabs wrap on top of each other for smaller breakpoints.

Use tab navigation in the main content area only.

Client-side context is not affected by the tabs.

Set current location using class="is-current".

<nav class="inline-tab-nav">
  <h3>View by:</h3>
  <ul>
    <li>
      <a href="#" class="is-current">
        <span class="is-visuallyhidden">Sort by </span>Department
      </a>
    </li>
    <li>
      <a href="#">
        <span class="is-visuallyhidden">Sort by </span>A&ndash;Z
      </a>
    </li>
    <li>
      <a href="#">
        <span class="is-visuallyhidden">Sort by </span>Date
      </a>
    </li>
  </ul>
</nav>

<nav class="inline-tab-nav">
  <h3>Sort by:</h3>
  <ul>
    <li><a href="#"><span class="is-visuallyhidden">Sort by </span>NSW</a></li>
    <li><a href="#"><span class="is-visuallyhidden">Sort by </span>Vic.</a></li>
    <li><a href="#"><span class="is-visuallyhidden">Sort by </span>Qld</a></li>
    <li><a href="#"><span class="is-visuallyhidden">Sort by </span>SA</a></li>
    <li><a href="#"><span class="is-visuallyhidden">Sort by </span>WA</a></li>
    <li><a href="#" class="is-current">
      <span class="is-visuallyhidden">Sort by </span>Tas.</a>
    </li>
    <li><a href="#"><span class="is-visuallyhidden">Sort by  </span>NT</a></li>
    <li><a href="#"><span class="is-visuallyhidden">Sort by  </span>ACT</a></li>
  </ul>
</nav>

Global navigation

The global navigation panel is collapsed (hidden) by default.

Older browsers (IE8 and lower) and those without JavaScript will get an expanded menu without a hamburger button.

<section class="govau--header">
  <div class="wrapper">
    <div class="govau--logo">
      <a href="/" class="logo">Global navigation</a>
      <span class="badge--default">draft</span>
    </div>
    <nav class="global-nav" aria-label="global navigation">
      <ul>
        <li><a href="#">About us</a></li>
        <li><a href="#">Information and services</a></li>
        <li><a href="#">Ministers</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Departments &amp; Agencies</a></li>
        <li><a href="#">Contact us</a></li>
      </ul>
    </nav>
  </div>
</section>

Accessibility

  • All navigation must be keyboard accessible and include ARIA tags.
  • Use the HTML <nav> element for controls and the given state classes to show which page the user is on.
  • Use short navigation links. They don't have to be the full page title.
  • Test with users to ensure the navigation hierarchy is not too long or too deep.
  • Use the correct colour contrast for breadcrumbs and inline links.

Local navigation

Use local navigation to help the user go straight to the specific content that meets their needs.

The framework provides a vertical navigation menu. The home page title is always at top, followed by up to 3 levels of navigation.

Small screens (up to $tablet breakpoint) will see the menu closed (unexpanded) by default.

Older browsers (IE8 and lower) and those without JavaScript will see an expanded menu. It will not be able to be closed.

Use active state to show where the user is. Use class="is-active" for each clicked menu item. Use class="is-active is-current" for the current location.

<nav class="local-nav local-nav-demo" aria-label="main navigation">
  <h1 class="is-visuallyhidden">Menu</h1>
  <ul>
    <li><a href="#" class="is-active">Current section</a>
      <ul>
        <li><a href="#" class="is-active">Child link (current sub-section)</a>
          <ul>
            <li><a href="#">Grandchild link</a></li>
            <li><a href="#" class="is-active">Grandchild link (current page)</a></li>
          </ul>
        </li>
      </ul>
      <ul>
        <li><a href="#">Child link</a></li>
        <li><span class="placeholder-link">Child link (placeholder styling)</span></li>
      </ul>
    </li>
  </ul>
</nav>

Breadcrumbs

Breadcrumbs help the user understand where they are in the service and how they got there.

They appear directly under a page header or hero, from $tablet breakpoint upwards.

Example

Breadcrumbs

Inverted breadcrumbs

<h3>Breadcrumbs</h3>

<nav class="breadcrumbs" aria-label="breadcrumb">
  <div class="wrapper">
    <ul>
      <li><a href="#" title="Home">Home</a></li>
      <li><a href="#" title="Menu1">Menu1</a></li>
      <li>Menu2</li>
    </ul>
  </div>
</nav>

<h3>Inverted breadcrumbs</h3>

<div class="bg-dark-navy">
  <nav class="breadcrumbs--inverted" aria-label="breadcrumb">
    <div class="wrapper">
      <ul>
        <li><a href="#" title="Home">Home</a></li>
        <li><a href="#" title="Menu1">Menu1</a></li>
        <li>Menu2</li>
      </ul>
    </div>
  </nav>
</div>