A NSW Government website
Design System v3.2.0

Main navigation

Orientates a user and helps them move through the site.

Figma React

Usage

Use the main navigation to show the top level of your information architecture (IA). It works closely with your Header to orientate users with your product or service and remains consistent across all pages.

As 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.

Mega menu

Sites with more than 1 level of navigation can use a mega menu to provide users access to deeper levels of content. The mega menu allows you to expand a selected navigation item (indicated by a chevron) to show the children.

Where the main navigation is used without a mega menu, side navigation can be used to display additional levels of content beyond the top level.

Smaller devices

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

Accessibility

All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

The main navigation component is best viewed in new window.

Default

Mega Nav