Figma component
Show the component in Figma
Healthy
Show details
Overview
Key Features
- Composable with partial components: Custom menus can be built using the provided menu item and menu divider components.
- Customizable with slots: Default menu layout can be replaced with custom content.
- Accessibility: Fully keyboard and screen-reader accessible.
Anatomy
- Trigger: The interactive element that opens the menu, such as a button or icon.
- List Item (Partial): A selectable row within the menu representing an action or option.
- Leading Icon: An optional icon placed at the start of a list item to visually indicate the action.
- Shortcut: A right-aligned text label showing the keyboard shortcut for the action.
- Chevron Icon: A right-facing icon indicating that the item leads to a nested submenu.
- List Divider (Partial): A horizontal line used to visually separate groups of related menu items.
Trigger
The trigger is fully interchangeable. While the default options include an avatar, icon button, and button, any component can be used.
Composable with Partials
Two partial components are available: the menu item and the menu divider. The menu item includes options for a leading icon, item label, sub-header icon, and shortcut text. These components can be used to build a custom menu within your Figma file.
Customizable with Slot
Custom menus can be added to the menu component via the slot.
Look and Feel
States
States define how the component behaves and appears in different interactions. The following are provided for the partial components:
- Default: The standard appearance when inactive
- Hover: Highlights the field when the user hovers over it
- Disabled: Prevents interaction and input, appearing visually subdued.
Placement
The menu’s placement can be set to the top, bottom, right, or left of its trigger, with alignment options for left, right, or center. If space is constrained, it automatically adjusts to ensure visibility on screen.
Best Practice
Do
- Use Clear Labels – Ensure menu items have concise and descriptive labels for easy understanding.
- Provide Logical Grouping – Organise related actions together and use dividers to separate sections.
- Use Icons Sparingly – Include icons only when they enhance clarity and recognition.
Don't
Don’t Overload with Options – Avoid excessive menu items that make navigation overwhelming.
Links
The Figma file holds the latest UI designs, while the Web Component, Blazor, Angular, React, and VueJS links offer a live demo of components in various states, themes, and interactions.
Component checklist
Feedback
Have feedback, an idea, or a bug to report? Head over to our Contributions page.