Skip to content
Edit this page

Menu

Menus display a list of choices on temporary surfaces.

Introduction

Joy UI provides three menu-related components:

  • Menu: A listbox popup for wrapping the menu items which reuses the styles from List.
  • MenuItem: A menu item which reuses the styles from ListItemButton.
  • MenuList: A standalone listbox for composition usage. It also reuses the styles from List.
<Menu>
  <MenuItem>...</MenuItem>
</Menu>

Playground

Component

After installation, you can start building with this component using the following basic elements:

import Menu from '@mui/joy/Menu';
import MenuItem from '@mui/joy/MenuItem';

export default function MyApp() {
  return (
    <Menu>
      <MenuItem>Add item</MenuItem>
    </Menu>
  );
}

Basic usage

The basic version of the menu opens over the anchor element by default. You can change this via specific positioning props.

When close to the screen's edge, the menu vertically realigns to make sure that all menu items are completely visible. Choosing an option should immediately, and ideally, commit the option and close the menu.

Size

The menu component comes with three sizes out of the box: sm, md (the default), and lg.

When specifying a size for the Menu component, menu items inside of it will inherit the value.

Selected

Use the selected prop to signal whether a MenuItem is selected or not.

The menu item uses the same styles as the ListItemButton.

Positioned menu

The Menu is based on the PopperUnstyled component, which exposes a few placement props. For example, this is how you'd go for displaying the menu on the bottom-end of the anchor button.

To get full control of the DOM structure, use the MenuList component. You can use it to compose any popup-alike component. The primary responsibility of this component is handling the focus state.

Debugging

To keep the list box open for inspecting elements, enable the Emulate a focused page option from the Chrome DevTool Rendering tab. You can also access this option by using command menu and search for it.

Common examples

This example replicates the application menu bar on macOS. It supports mouse and keyboard navigation between menu items.

Side navigation icons

This example is quite common in dashboard applications where the side navigation is shrunk into icons, and the menu is triggered by hovering them.

Unstyled

The component also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size.