Navigation

Usage

The navigation components are used to display a list of links that allow the user to move between pages inside an application, or actions that perform an action when clicked. Primary and secondary navigation is positioned at the top of the page and can be fixed to the top when scrolling the page, to enable easy access. Other types of navigation can appear inside the page context, such as tabs, breadcrumbs, paginator, link, progress indicator, scrollbar.

Primary navigation is used to display the main application identifiers, as well as service navigation items, such as notifications, user account or similar. Company and product logo are placed on the left, and service navigation on the right of the navigation bar.

Best Practices

Always place application identifier on the left, and service navigation on the right of the primary navigation bar
Use icons in the primary navigation bar to indicate simple affordances, like notifications or settings
Avoid using icons and text navigation items interchangeably

Enabled background colour Grey base, font and icon white
Hover, Active and Selected background colour Magenta base, font and icon colour white
Focus border is Purple L50
Badge stays consistent in all states

List navigation is used to display the list of links for functional sections of the application. It is placed within the in the primary navigation as a dropdown. The list navigation must be used in conjunction with a breadcrumb to ensure the user knows where they are within the product.

Best Practices

Do not use icons to indicate links in the secondary navigation, use text only.
The number of items in list navigation should not span into more than than 8 if needed they can be grouped by using a category format.
When the user has selected a section in the list navigation a breadcrumb must be used to inform the user of where they are in the application on the new page.