A NSW Government website
Design System v3.18.1

Side navigation

Enables users to move through levels of site hierarchy.

Figma

Usage

Side navigation displays a users current position in the content hierarchy past the main nav, and enables them to move between sections and related content.

Single level navigation (sibling navigation)

Navigation that shows only the pages on the same level of content hierarchy. This allows the user to navigate horizontally. It is ideal for a stepped process, or a journey along a path.

Multiple level navigation

Displaying multiple levels so a user can navigate vertically through content hierarchy. When a parent section is selected it expands to display the children. Parent sections remain bolded while the current selection is indicated by the active background colour.

How this component works

Side navigation supports four levels of nesting along with an accompanying heading. For visual hierarchy, each level of nesting is indented.

On mobile and smaller viewports, the side navigation is displayed through the main site navigation, otherwise called the hamburger menu.

Accessibility

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

Single level

Two levels

Four levels