With no icon
- Indicator: Used when it is active, this allows the user to know what page/item they are on.
- Sub menu label (expanded): Serve to tell the user what the page is about.
- Icon (situational): Used when there are sub menu items to indicate that sub menu can be expanded or collapsed.
- Sub menu item label: Serve to tell the user what the item is about.
Within the sub menu item
Ensure that there is a min 32px horizontal spacing between dropdown item.
Within & outside the sub menu
Ensure that there is a min of 16px spacing between label and icon/indicator.
Side navigation should be used when
- There are many sub pages under the selected section in the main menu. The side navigation will make it easy to scale and add on more options.
Side navigation should not be used when.
- There are not many navigation options in the selected section.
Highlight the current section
Show users where they are by highlighting it in the side navigation so they know which section they are currently in.
Use straightforward labels
Labels should be clear to your users. You should avoid jargon or unfamiliar terms that users cannot understand.
Side navigation design tokens
Last updated 22 November 2023