Submenus

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:

• 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.

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:

• 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”