A NSW Government website
NSW Government
NSW Design System v3.28.1

Side navigation

Enables users to move through levels of site hierarchy.

Demo & code Figma

Show code Hide code

Usage

Side navigation displays a user's current position in the content hierarchy past the main navigation and enables them to move between sections and related content.

Guidance

Do
  • use single level navigation to show pages at the same level of the content hierarchy and allow users to navigate horizontally, such as for a stepped process or journey along a path
  • use multiple level navigation so users can navigate vertically through the content hierarchy
  • label the mobile navigation toggle with the current page title or section name to help users understand what content they're expanding.
Don't
  • manually integrate side navigation into the main navigation structure (e.g. hamburger menu) on mobile and smaller viewports.

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.

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.

Mobile behaviour and implementation

On mobile and smaller viewports, the side navigation component now includes an in-built mobile solution that allows the navigation to remain in its contextual location.

Enabling mobile functionality in existing side nav setups

To enable mobile toggle functionality on existing side navs:

  1. Add js-side-nav class to the parent <div> element containing the side navigation.
  2. Insert the toggle button as the first child inside the existing .nsw-side-nav element. Ensure the button label reflects the page title where the side navigation appears:
  3. Add nsw-side-nav__content class to the main <ul> containing the navigation items.
  4. Remove the nsw-layout__sidebar--desktop class from the parent <div> if you were previously using this method to hide the side navigation on desktop. If this class is not removed, the side nav may remain hidden at certain breakpoints, which can prevent the mobile toggle from appearing.

Accessibility

All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.