Show code Hide code
Usage
The main navigation works closely with your Header to orientate users with your product or service.
Guidance
Do
- use the main navigation to show the top level of your information architecture (IA)
- keep the main navigation consistent across all pages
- consider using a mega menu to give users access to deeper levels of content when the site has more than 1 level of navigation
- use side navigation to display additional levels of content when the main navigation does not use a mega menu.
Don't
- include a large number of items in the horizontal main navigation.
Mega menu
The mega menu allows you to expand a selected navigation item (indicated by a chevron) to show the children.
Smaller devices
On smaller devices, the main navigation displays as a hamburger menu, where all levels are available.
Accessibility
All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.