Header

A header helps users to identify what site they are on and provides a quick, organised way to reach the main sections of a website. It includes horizontal navigation and branding to identify your site.

Example

Interact with the example to see how it works.

Note that the logo and flexbox grid component, are for example purposes only and are optional.

This component is responsive. Click the ‘open in new window’ to see how it behaves.

Design System users should avoid wrapping main navigation links over two or more lines. Instead, try to present links in an unbroken horizontal list for screen widths above 768px. For screen widths of 768px or below, the mobile menu will be triggered by default.

When to use it

A header is required on all government websites. When this header component is used, it must include:

• your logo or site name
• your site's primary navigation.

How it works

Header is a container component. It contains your logo and your site's primary navigation. By default, it uses the New Zealand Government Design System (NZGDS) colour palette.

Logo

Your logo helps users to quickly understand which site they are viewing. Clicking the logo should take users back to the homepage.

We recommend using a rectangular 'white on dark' lockup of your logo. Logos that are long and thin or tall and wide should be avoided. Any text in the logo should be readable.

The logo should appear vertically centered in the header. As the header component has no strict padding or margin, it is up to Design System users to adjust spacing above and below the logo for ideal placement.

The NZGDS does not include a logo component. Including a logo is a decision for the Design System user.

Colour scheme

The header component uses the dark grey colour palette of the Design System by default. You can implement your own visual identity guidelines, but you must make sure they meet requirements of the NZ Government Web Accessibility Standard.

In particular, the text and UI elements within the component must meet Web Content Accessibility Guidelines (WCAG) success criteria:

• 1.4.3 Contrast (Minimum)
• 1.4.11 Non-text Contrast

Main navigation

Your site's main navigation helps users to find the information they need. It typically includes the top level of the information architecture. It is intended as the primary way for users to navigate your site.

Highlight the current section

To show users where they are within your site, the link to the current page or section is automatically set with aria-current=”page”. This allows assistive technology like screen reader software to tell the user that it’s the link for the current page. It also causes a visual underline to be added to the link.

Avoid using hover to expand drop-down lists

Some users find it difficult to pause their cursor on an interactive element. Also, hover doesn’t work on touch screens.

Avoid organisational structure navigation

You shouldn’t model your navigation on your organisation’s structure. Instead, structure it according to the tasks and information your users most frequently need to access.

Research your navigation

Conduct research with your users. Base decisions about your site’s menu labels and navigation structure on your findings. Continue researching to confirm that changes meet your users’ needs.

For large websites, use drop-down menus to let users preview lower-level content

Drop-down menus help to preview lower-level content. They can save users time by letting them skip a level in the navigation.

Drop-down menus will be developed during the Design System’s beta phase.

Links

We recommend using a horizontal list of 2–9 links to key tasks and information on your site. This is one of the most visible and familiar ways of helping users to navigate a site.

Use short, descriptive, and recognisable link labels

Link labels should clearly describe your content. They should be familiar and relevant to your users. You shouldn’t label links with jargon or unfamiliar terms.

Left-justify links

Left-justified link labels are easier to scan.

Front-load key terms

Front-loading meaningful words at the beginning of labels reduces the amount of time users need to spend reading menus. For example, instead of ‘Our research’ use ‘Research’.

Use sentence case

Sentence case is easier to scan. Labels tied to a recognisable brand name are an exception.

Present links in priority order

Higher-demand links should appear closer to the left, and lower-demand links should appear farther to the right.

Small-screen devices

The header component adapts the main navigation to small-screen devices. The breakpoint for displaying the mobile menu is 768px.

By default, the header component hides the main navigation and adds a button for users to open and close it.

The button has an aria-expanded attribute. The value (true or false) signals to screen reader users whether the main navigation is open or closed.

The button also includes a chevron icon. The chevron’s orientation helps to visually indicate the main navigation’s state. A downward-pointing chevron indicates that the main navigation is closed and an upward-pointing chevron indicates that it is open.

• choosing the right text for the button—using the word ‘Menu’ (or its equivalent in the page’s main language if that is not English) is strongly recommended
• implementing the JavaScript to manage the main navigation’s open and closed states as triggered by the ‘Menu’ button.

3 bar icon (the ‘hamburger’)

Another common way to indicate the main navigation on small-screen devices is the 3 bar icon (often referred to as the ‘hamburger’). However, the 3 bar icon does not clearly indicate an opened or closed state and some users might not know what the icon means on its own. For these reasons, the Design System uses the chevron icon, alongside a clear text label.

Credit

Guidance, original HTML and CSS derived from GOV.UK Design System.

Guidance for the main navigation component derived from the Australian Government Design System.