- Simplify complex navigation with parent and child elements
- Appear in a variety of patterns, like dropdowns, megamenus, accordions, and overflow 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.
- 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.
- 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.
- 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”
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.
|Date/Time of Change||Who Made the Change||Change Details|
|May. 08 2017 5:16pm||Initial content entry|