How they help
A menu in a UI helps users by organizing and presenting options or features in a structured, accessible manner. It consolidates items into a compact format, allowing users to quickly find and select desired actions or content.
Example of a menu
Anatomy
- Container: contains the menu items
- Section header: optional text to provide clarity to sections
- Menu item / Start content: Main action for item
- Menu item / End content: optional information and icon to help user
- Divider: optional visual to divide sections in a menu
- Start content icon: optional visual to provide clarity to user
- Text
- End content icon: button that allows
Visual for anatomy
Variants
There are multiple variants for the component: menu items with and without end content, with section headers or multiple sections.
Visual of variants