Use the main navigation to show the top level of your information architecture (IA). It works closely with your Header to orientate users with your product or service and remains consistent across all pages.
As the main navigation is a horizontal list, it won’t support a large number of items. When defining your IA, this will need to be taken into consideration.
Mega menu
Sites with more than 1 level of navigation can use a mega menu to provide users access to deeper levels of content. The mega menu allows you to expand a selected navigation item (indicated by a chevron) to show the children.
Where the main navigation is used without a mega menu, side navigation can be used to display additional levels of content beyond the top level.
Smaller devices
On smaller devices, the main navigation displays as a hamburger menu, where all levels are available.
All components are responsive and meet WCAG 2.1 AA accessibility guidelines.
The main navigation component is best viewed in new window.