Side navigation

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.

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. Developers no longer need to manually integrate side nav into the main navigation structure (e.g. hamburger menu).

For optimal user experience, it's recommended to label the mobile navigation toggle button with the current page title or section name to help users understand what content they're expanding.

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:
   Copy content_copy

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.