The side nav is a menu component that is added to the right side of a web page to help users navigate a section of related pages. It is also known as the sidebar or section nav.
On this page
- When to use the side nav
- How to add a side nav on a page
- See side nav live on the CMS Components Guide
When to use the side nav
Use the side nav to:
- show the user where the page they are on fits within your content hierarchy
- help users find and navigate to highly related information across parent pages.
On mobile devices the side nav will collapse at the top of the web page.
Do
-
Always add the side nav to standard pages.
-
Add the side nav to landing page templates when the page is information-rich, like a standard page, rather than acting as a traditional wayfinding landing page.
-
Always position the side nav on the right hand side of the page.
-
Display only the most relevant context to users – unless there is a specific need to show more of the page hierarchy.
Don't
-
Add the side nav for traditional landing pages that already use cards, link lists or other navigation components to allow rapid wayfinding.
-
Add the side nav for landing pages without children and with a generic high-level topic parent.
-
Set the side nav to display more links than is immediately useful for users
-
Don't let side navs with lots of items run longer than the page body copy or overlap with elements, such as cards, that are lower on the page in full-width containers.
How to add a side nav on a page
Landing page
To add a side nav to a landing page:
-
Click Add section, select Three Quarters / Quarter – Large gutter and click the Add section button.
-
In the right-side quarter column click Add block.
-
Use the Filter by block name search field and type side nav, then select it from the search results.
-
You can leave the Title field with the default title – it’s only visible to editors.
-
Choose the Starting level you would like to display. The standard is to choose 1 level up; this will display the page’s parent. You should not choose more than a maximum of 4 levels up.
If you do select more than 1 level up, it is usually best to tick the Active trail only checkbox. This will limit the side nav to only show those pages with a direct relationship to your page. This means you will only see descendants of your page and not child pages of sibling pages.
-
Click the Add block button.
Standard page
For standard pages, the side nav is automatically added when the page is created. Check out navigation on standard pages for more guidance.
Editing or removing the side nav
On a landing page
On a landing page go to the Layout screen of your landing page. Click the edit pencil icon of your block and from the dropdown select:
- Remove block to completely remove it, or
- Configure to edit it. You will see the same options as when the side nav is first created, so follow steps 4 to 6 in How to add a side nav.
On a standard page
To edit or remove a side nav on a standard page:
- Go to the Edit screen of your standard page.
- In the right side accordions, open the accordion Advanced settings.
- From the Sidebar nav dropdown, select:
- Hidden to remove the side nav from the page.
- Parent and children to show the pages above and below (this is the recommended setting). If you choose this option, the Starting level dropdown box will appear. You can choose to show the direct parent and child pages by selecting 1. This is the recommended setting. However, you can choose to show more pages within the section by selecting 2 or higher.
- Full hierarchy to show the entire section (not usually recommended).
- Save the page.
See side nav live on nsw.gov.au
Check out side nav to see how this works on a live page.
Need any more help?
If you have any questions, or require assistance with anything mentioned on this article, submit a request via the webform.