Refine By

Submenus

  • 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
example of a dropdown menu

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

A navbar with dropdowns indicated with a caret

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

Dropdown menu with the unfortunate habit of scrolling
Dropdown menu with the courtesy of displaying as a mega menu, so the user can see all elements without scrolling.

Mega menus

 

Mega menus:

  • Group related nav items in a dropdown panel to avoid scrolling
  • Categorize elements, sometimes with imagery, iconography, or tooltips
Example of a three-column mega menu with nine items

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.

Example of a three-column mega menu using images to illustrate sub-categories

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.
A collapsed accordion, marked with a caret

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

A series of accordion menus, with the middle expanded

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”
An overflow menu housing links to app version, privacy statement, and cookie statement

Style

 

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 components

Version History

Date/Time of ChangeWho Made the ChangeChange Details
May. 08 2017 5:16pm Initial content entry