Side navigation

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, child and sibling pages. 

Typically the side nav shows the parent, siblings and children, however it can be adjusted to capture a wider relationship of pages, such as grandparents, grandchildren and great-grandparents. 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.  

• Set the side nav to display 1 level up (parent) and 1 level down (children), to 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 – usually 1 level up (parent) and 1 level down (children), with a maximum of 4 levels up or down. 

• 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

To add a side nav to a landing page:

1. Click Add section, select Three Quarters / Quarter – Large gutter and click the Add section button.
2. In the right-side quarter column click Add block.
3. Use the Filter by block name search field and type side nav, then select it from the search results.
4. You can leave the Title field with the default title – it’s only visible to editors.
5. Choose how many Levels up 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. 
6. Choose how many Levels down you would like to display. The standard is to choose 1 level down – this will display all child pages. You should not choose more than a maximum of 4 levels up. 
    
   If you do select more than 1 level up and 1 level down 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. For example, if you set levels down as the entire tree then your side nav will display all child pages of your page, as well as all child pages of sibling pages. By selecting Active trail only, you will only see descendants of your page and not child pages of sibling pages.    
7. You should leave the custom css class field empty – this is a tool only for web developers.
8. Keep the Show menu relative to this entity on the default setting of Content.
9. Click the Update button.

For standard pages, the side nav is automatically added when the page is created, see the instructions at set navigation on standard pages. 

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 9 in How to add a side nav. 

On a standard page

To edit or remove a side nav on a standard page:

1. Go to the Edit screen of your standard page.
2. In the right side accordions, open the accordion Advanced settings.
3. 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).
4. Save the page.

Side nav with 1 level up and 1 level down variant

Here is an example of the side nav added to the right side quarter column and 1 level up and 1 level down applied.

This is the recommended variant. On a standard page it may also be called a parent and children variant. 

Side nav with 2 levels up and 2 levels down variant

Here is an example of the side nav added to the right side quarter column and 2 levels up and 2 levels down applied and the active trail checkbox ticked.

Side nav with entire tree variant

This example has the side nav in the right quarter column with the variant of entire tree applied to both the level up and level down. If this page had child or grandchild pages they would display.

On a standard page this variant is also called a full hierarchy. 

This variant is not recommended but is sometimes applied as the default setting. You should update the side nav to a 1 level up and 1 level down (parent and children) variant.