Menu

Menus display a list of choices on temporary surfaces.

A menu displays a list of choices on a temporary surface. It appears when the user interacts with a button, or other control.

Introduction

Menus are implemented using a collection of related components:

• Menu: The container/surface of the menu.
• Menu Item: An option for users to select from the menu.
• Menu List (optional): Alternative composable container for Menu Items—see Composition with Menu List for details.

Basic menu

A basic menu opens over the anchor element by default (this option can be changed via props). When close to a screen edge, a basic menu vertically realigns to make sure that all menu items are completely visible.

You should configure the component so that selecting an option immediately confirms it and closes the menu, as shown in the demo below.

Icon menu

In desktop viewport, padding is increased to give more space to the menu.

Dense menu

For the menu that has long list and long text, you can use the dense prop to reduce the padding and text size.

Selected menu

If used for item selection, when opened, simple menus places the initial focus on the selected menu item. The currently selected menu item is set using the selected prop (from ListItem). To use a selected menu item without impacting the initial focus, set the variant prop to "menu".

Positioned menu

Because the Menu component uses the Popover component to position itself, you can use the same positioning props to position it. For instance, you can display the menu on top of the anchor:

Composition with Menu List

The Menu component uses the Popover component internally. But you might want to use a different positioning strategy, or prefer not to block scrolling, for example.

The Menu List component lets you compose your own menu for these kinds of use cases—its primary purpose is to handle focus. See the demo below for an example of composition that uses Menu List and replaces the Menu's default Popover with a Popper component instead:

Account menu

Menu content can be mixed with other components like Avatar.

Customization

Here is an example of customizing the component. You can learn more about this in the overrides documentation page.

The MenuItem is a wrapper around ListItem with some additional styles. You can use the same list composition features with the MenuItem component:

🎨 If you are looking for inspiration, you can check MUI Treasury's customization examples.

Max height menu

If the height of a menu prevents all menu items from being displayed, the menu can scroll internally.

Limitations

There is a flexbox bug that prevents text-overflow: ellipsis from working in a flexbox layout. You can use the Typography component with noWrap to workaround this issue:

Change transition

Use a different transition.

Context menu

Here is an example of a context menu. (Right click to open.)

Supplementary projects

For more advanced use cases you might be able to take advantage of:

material-ui-popup-state

The package material-ui-popup-state that takes care of menu state for you in most cases.

Unstyled

Use the Base UI Menu for complete ownership of the component's design, with no Material UI or Joy UI styles to override. This unstyled version of the component is the ideal choice for heavy customization with a smaller bundle size.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

• <ClickAwayListener />
• <Menu />
• <MenuItem />
• <MenuList />
• <Popover />
• <Popper />