Menu allows a user to view a list of actions and make selections between them. Menus can also include radio buttons and checkboxes.
On this page
| Name | Description | Default |
|---|---|---|
| id* | Unique identifier for the menu string | - |
| label* | Label text displayed for the menu string | - |
| children* | Child elements of the menu, typically MenuItem components ReactElement<any, string | JSXElementConstructor<any>> | ReactElement<any, string | JSXElementConstructor<any>>[] | - |
| defaultIsOpen | Determines if the menu is open by default (uncontrolled mode). boolean | - |
| isOpen | Determines if the menu is currently open (controlled mode). boolean | - |
| onIsOpenChange | A callback for when the open state is changed (controlled mode). ((isOpen: boolean) => void) | - |
| customTrigger | Custom trigger element for the menu ReactElement<CustomTriggerProps, string | JSXElementConstructor<any>> | - |
| onClick | Callback function to be called when the Menu is clicked MouseEventHandler<HTMLButtonElement> | - |
| reactlytics | ReactlyticsProp | - |
| disabled | @deprecated use The All DLS components are designed to use the boolean | - |
| aria-disabled | If true, styles component as disabled and prevents interactivity. Screen reader reads as "dimmed" or "disabled". Booleanish | - |
| ref | ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | - |
| Name | Description | Default |
|---|---|---|
| disabled | @deprecated use The All DLS components are designed to use the boolean | - |
| aria-disabled | If true, styles component as disabled and prevents interactivity. Screen reader reads as "dimmed" or "disabled". Booleanish | - |
| children* | Child elements of the MenuItem, typically text content ReactNode | - |
| onClick | Callback function to be called when the MenuItem is clicked MouseEventHandler<HTMLButtonElement> | - |
| reactlytics | ReactlyticsProp | - |
| icon | Icon to be displayed for the MenuItem ReactElement<any, string | JSXElementConstructor<any>> | - |
Connect with the DLS Team on Slack or by email.
Check out additional resources.