Menu

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

Import

Menu With Icons

Loading preview
Open in Storybook

Menu Without Icons

Loading preview
Open in Storybook

Overflow Menu

Loading preview
Open in Storybook

Props

Menu Props

NameDescriptionDefault
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 aria-disabled instead.

The disabled prop removes the element from the Accessibility Tree and prevents it from receiving focus. This is not recommended.

All DLS components are designed to use the aria-disabled property instead, which will style the component to be disabled, but still allow keyboard focus and screen reader interactivity.

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		-

MenuItem Props

NameDescriptionDefault
disabled

@deprecated use aria-disabled instead.

The disabled prop removes the element from the Accessibility Tree and prevents it from receiving focus. This is not recommended.

All DLS components are designed to use the aria-disabled property instead, which will style the component to be disabled, but still allow keyboard focus and screen reader interactivity.

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>>		-

Questions?

Connect with the DLS Team on Slack or by email.

Resources

Check out additional resources.