Overview
The side navigation is placed next to the body content of a website. It serves as a helpful tool for users to quickly find other pages that relate to the same topic or section. See the left of this page for an example.
The side navigation generally supports up to 3 levels of nesting, and each level is accompanied by a relevant heading to provide context.
On mobile devices and smaller viewports, the side navigation is designed to collapse down into a compact, expandable element that’s easy to use on smaller screens.
Usage guidelines
When to use it
- When you have a large amount of related content that needs to be organised and easily accessible to users
- When you want to display navigational hierarchy with one to three levels
- When you want to provide users with a secondary navigation option that’s separate from the main content area of the page
- Content pages that are part of multi-level navigation: Pages that require multiple levels of navigation, such as those with subcategories can benefit from a side navigation component that allows users to drill down
When not to use it
- On home and landing pages: The content on a home or landing page should not necessarily require a secondary navigation option, as users should be able to find what they need through scrolling, searching, or clicking on clear calls to action. The purpose of a home or landing page is to provide a clear and concise overview of the content and services offered by the website or in that major topic.
How to use
- Keep the navigation link text short. They can be shorter versions of pages titles
If the side navigation is too long, users may miss items at the bottom. If there are too many levels, users may miss items that require too many clicks.
Implementation
Step 1
- Create a least one of the pages
Step 2
- Create a WP Menu
- Name it “LHS menu – your topic (eg: Rsearch)
Step 3
- Create a WP Widget Area
- Call it You topic nav (eg: Research nav)
- Add the Navigation Menu Widget and select the menu you created above
Step 4
- Add the Widget Area to a 1/4 left-hand column
- Give the Widget Area element a class of ‘qh-side-nav’
New pages are added via the WP Menu.
The top level page the menu appears on must be the first menu item.
Indent subsequent menu items up to 3 levels.