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:
- Add
js-side-nav
class to the parent <div>
element containing the side navigation.
- 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:
- Add
nsw-side-nav__content
class to the main <ul>
containing the navigation items.
- 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.