Menu is only available in the React API for SWAN.
Menu
Use Menu...
- To show set of actions available to a user when there is a limited space constraint.
Don't use Menu...
- To hide critical actions for a user to complete a task. Use Button instead.
- Menu consists of a
MenuTriggerthat wraps another element (often a Button, but it can be anything). - When that trigger is clicked, it launches a
MenuPopover. MenuPopoverholds aMenuList, which contains one or moreMenuItemchildren.- Each
MenuItemacts as a button by default, but you can have it act as a link instead (see below). Menushares code withListbox, and behaves similarly: to detect a user interaction with the Menu, use anonChangehandler on theMenuitself.
The preview has been updated.
Icons
A MenuItem may contain an icon, which can help users discern the difference between options faster.
When using HTML/JSX content inside the MenuItem, include a textValue prop whose value is an accessible label for the option.
The preview has been updated.
Sections
Use MenuSection to display a section title to wrap a group of MenuItems. Each MenuSection requires a title and a key prop.
The preview has been updated.
Links
Use an href prop on a MenuItem to make it act as a link instead of a button.
The preview has been updated.
Disabled
Use disabled on Button to prevent it from being opened, or on MenuItem to indicate that individual options are not relevant or available within the user's current context.
The preview has been updated.
<div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.| prop | type | required | description | default |
|---|---|---|---|---|
| onChange | ((value: string | number) => void) | false | Callback function that gets triggered when the value changes (for backward compatibility). | null |
| maxHeight | number | false | Overwrites the max-height of the MenuPopover to a custom value (px) | null |
<div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.<div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.| prop | type | required | description | default |
|---|---|---|---|---|
| offset | number | false | The offset distance from the trigger element. | null |
| children | ReactNode | false | The content to be displayed within the popover. | null |
| fullBleed | boolean | false | Specifies whether the popover should take up the full available width. | null |
| placement | Placement | false | Specifies where the popover should be placed in relation to the trigger element
The placement of the popover. eg: "bottom start", "top end", "top", "bottom" | top bottom start |
| isNonModal | boolean | false | Specifies whether the popover is used in a non-modal context. | false |
| hideArrow | boolean | false | Whether to hide the popover arrow
Specifies whether to hide the arrow of the popover. | false true |
| labelText | string | false | ⚠️ Deprecated - This is deprecated without a replacement. | null |
| portalContainer | Element | false | The container for the portal where the popover is rendered. | null |
<li /> as the root element. You can utilize the native attributes supported by <li /> tag.| prop | type | required | description | default |
|---|---|---|---|---|
| label | ReactNode | false | The contents to render inside the ListboxButton. Can include JSX | null |
| disabled | boolean | null | false | Whether or not the option is disabled. | null |
| textValue | string | null | false | The option's human-readable string. Required if using JSX inside of an option | null |
| withThumbnail | boolean | null | false | Whether or not the option has a thumbnail. | null |
How does Menu meet your needs?