Anatomy
Note: Image not to scale
- Menu link (text label / trigger)
- Submenu indicator
- Active state (bold)
Options
Orientation
Navigation menu supports both horizontal and vertical layout orientations. In horizontal orientation, menu links are baseline-aligned, ordered from left to right. In vertical orientation, menu links are left-aligned, ordered from top to bottom.
Submenus
Navigation menu supports one level of sub-navigation.
Behavior
Hover
Menu links change color to $accessible on hover. Submenu links display background color $faint on hover.
Active
Any menu link can be set to active` to indicate the page or section currently in view. Active links are rendered in font-weight bold.
Disabled
A menu (or submenu) link can be set to disabled, according to the user’s current context and relevance of options.
Overflow
For submenus containing a large number of links, define a max-height and set the container to scroll to allow users to access additional items.
Guidance
Number of menu items
For primary navigation, the maximum number of menu links recommended is eight (8). If your use case requires more than 8 menu links, re-evaluate your navigation hierarchy to make use of submenus, or consider using a different component.
Accessibility
Keyboard navigation
When navigation menu is in focus, links can be traversed using left, right, up and down arrow keys, or tab / shift+tab. Pressing the enter key executes a click function, which will navigate the user to the selected link. Links containing a submenu can be accessed by focusing the link and pressing space bar to toggle display of the submenu. Pressing the esc key exits the submenu and moves focus back to the parent link / trigger.
API Reference