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.
All components are responsive and meet WCAG 2.1 AA accessibility guidelines.