- Contents:
Submenus:
- Simplify complex navigation with parent and child elements
- Appear in a variety of patterns, like dropdowns, megamenus, accordions, and overflow menus
Dropdown menus
Dropdown menus:
- Show child elements when hovered over or clicked on
- Work best on desktop – consider the accordion or overflow menu for mobile

Mark dropdown menus with an indicator, such as a caret.

Dropdown menus should never scroll. Simplify your elements or use a mega menu to reduce vertical height and eliminate scrolling.


Mega menus
Mega menus:
- Group related nav items in a dropdown panel to avoid scrolling
- Categorize elements, sometimes with imagery, iconography, or tooltips

Mega menus, like all dropdowns, should render within 0.1 seconds of the hover or click.
Close a mega menu within 0.1 seconds after the user clicks outside the mega menu area (like a separate nave element), or .5 seconds after the mouse moves outside the hover area.

Keep it simple: Don’t use complex interface elements in a mega menu. Keep them to a basic click-and-go interaction.
Accordion menus
Accordions:
- Expand to reveal their child elements.
- Serve as a mobile-friendly alternative to dropdown menus.

Mark your accordion menus with a caret, plus sign, or another indicator.

Overflow menus
Overflow menus:
- Extend the scope of bottom navs
- House elements that are required, but rarely used (legal notices, privacy statements, etc.)
- Open in a view with a list of links
- Usually consist of an ellipse icon and the label “More”

Accessibility
Ensure sub navigational system is keyboard accessible. Users should be able to tab through each link.
As you use and customize this element, ensure it continues to follow the Accessibility 101 guidelines.
Related elements
Related components
Version History
Date/Time of Change | Who Made the Change | Change Details |
---|---|---|
May. 08 2017 5:16pm | Initial content entry |