DCJ Digital Design System

Header and main navigation

The NSW Government header displays across the top of all NSW Government sites. It helps users see which service they are using. The main navigation orientates a user and helps them move through the site.

Refer to NSW Digital Design System - Header and NSW Digital Design System - Main navigation for full guidance and demo on how and when to use this.

Preview

A screenshot of the header and main navigation component with red labels to describe its feature.
Labels: 01 logo and site name, 02 masthead, 03 search and language tool, 04 main navigation.

Placement

The header and main navigation are automatically placed at the top of every page. 

Customisation

Logo and site descriptor

The logo and site descriptor is placed in the header. It will change according to the branding and business requirements. Please refer to the NSW logo requirements to ensure the implementation matches NSW Government brand classification. 

Main navigation items

Use the main navigation to display the top level of your Information Architecture (IA). It is best practice to keep the main navigation to six menu items or less. 

Accessibility features

  • Site logo/site header includes visually hidden text to improve brand recognition.
  • User interface component (language tool) is labelled with button type, list of language is arranged using <ul> to provide more control options for screen reader users.
  • Main navigation includes button, ARIA expand and dialog attributes to represent the interactive elements. 
  • Provide high colour contrast to the expanded search bar.
Last updated:

11 Jul 2024