Menu
Also known as: Navigation, Selectable
Resources
Properties
| Property | Values | Default |
|---|---|---|
Size Variant | Sm | Md | Lg | Xl | 2Xl | Md |
State Variant | Default | Hover | Focus | Active | Disabled | Default |
Has start item Boolean | true | false | true |
Start item InstanceSwap | Icon | Checkbox | Radio | Asset | Icon |
Label Text | string | Label |
Has end item Boolean | true | false | false |
End item InstanceSwap | Icon | Checkbox | Radio | Asset | Icon |
When to use
Presenting a list of related actions, navigation links or options in a compact form.
Providing contextual actions based on the user’s selection, such as right-click menus.
If only one action is available, use a button instead.
Behaviour
Selection
Menu items have two visual states: selected and unselected, signaling whether an option is active or not.
States
Menu (and all other forms and selection controls) express states. States indicate current condition of the component to someone interacting with it. Using states ensure clear user feedback, highlighting possible actions or barriers. We have included most common states:
| State | Context |
|---|---|
Default | Status of the component before the interaction. Also referred to as ‘resting’. |
Hover | When the user moves their cursor over the component, but is not taking the action. Slight visual change can indicate interactivity of the component. |
Focus | When user selects the component via keyboard navigation, but has not yet taken action on it. |
Disabled | A non-interactive state where the component appears faded or grayed out. It indicates that the action is unavailable at the moment. |
Size
Dimensions of the menu are tied to the global scale tokens. This ensures that the components with similar size settings remain consistent across the interface. scale tokens also provides more granular control over dimensional settings.
--scale-width-<size>
--scale-height-<size>
--scale-padding-<size>
--scale-gap-<size>
--scale-radius-<size>
--scale-icon-size-<size>
--scale-text-size-<size>
--scale-text-height-<size>