Secondary navigation
A secondary navigation helps users navigation through pages in a specific section.
Secondary navigation example
You'll find an example of the secondary nav throughout the component guidelines page. You'll also find it in the 'Find your industry' section of the SDI siteopens in a new window
How to use the secondary navigation
The secondary navigation helps users navigate through pages that don’t appear on the main navigation – at level 4 or lower. Only use a secondary nav where you expect users to navigate through multiple related pages within a section.
The left hand nav should only appear on higher levels if there's a clear reason why. For example, we know that on the Scottish Enterprise Design System site, users are typically trying to navigate quickly and easily to a specific component. Users who aren't familiar with our design system may want to use the left hand nav to get a full view of all the components and elements within the system. Displaying the left hand nav on level 2 helps users quickly open up each section to find the right guidance.
When you add secondary navigation to a page, it will reduce the number of columns the content on that page can span. You should be aware of this when designing pages, and be careful not to use components that don’t suit a smaller span, such as a 50:50.
Adding secondary navigation in the CMS
In most cases, the secondary (left hand) navigation should appear on each level 4 page, but not the level 3 'parent page', since this is likely a navigation page anyway. To add this in the CMS, you should:
- Set the level 3 parent page to 'no' under ‘Display navigation submenu’.
- Set each level 4 child page to 'yes' under ‘Display navigation submenu’. If any level 4 child page (for example, an enquiry page) shouldn't appear in the left hand nav, select 'no' instead
- In most cases, you should select a span of 3
If for some reason the level 3 (or level 2) does need left hand navigation, you can select 'yes' under ‘Display navigation submenu’, and 'default' on each child page.
Panels at the top and bottom of the page that need to be full width – such as the hero and CTA – should be added to a header content container or a footer content container. Find out more about using content headers and footers
You should also be aware of how the left hand nav will affect components and panels on your page. For the majority of our sites (including SE and FBS), some components are added to containers within panels to allow use to align the content to the left. The span on the containers must be removed and returned to 'default' on pages that use left hand/secondary navigation.
Accessibility
We've given the secondary navigation an ARIA label of ‘Browse this section’ so users using screen readers know what this element is for.
Evidence and research
In testing users liked how clear and easy to understand the sub navigation was, most users found it quicker to navigate and thought it stood out more on the page.
On mobile we tested 3 versions and the version with the accordion interaction tested well. It provided the lowest interaction cost to navigate down the levels and users were more confident about the path they took.