Skip to content
Edit this page
+

Menu

Menus display a list of choices on temporary surfaces.

Introduction

Joy UI provides five menu-related components:

  • MenuButton: A button that opens a menu. It reuses the styles from Button.
  • 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.
  • Dropdown: The outermost component that wires a button with a menu. It only provides a context and does not render anything.
<Dropdown>
  <MenuButton>
    Format
  </MenuButton>
  <Menu>
    <MenuItem>…</MenuItem>
    …
  </Menu>
</Dropdown>

Playground

Component

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

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

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

Basic usage

Place both the Menu and Menu Button inside a Dropdown component. This will wire them together. The Menu Button will toggle the visibility of the menu and act as an anchor for the Menu's popup.

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.

Press Enter to start editing

Sizes

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.

Icon button menu

To use IconButton component as a menu button, pass it to the root slot of the MenuButton component.

Use slotProps to pass props to the IconButton component.

Press Enter to start editing

Positioned menu

The Menu is based on the Base UI Popper 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.

Group menus

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.

Or display the menu without a popup:

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

Apps menu

This example replicates a menu that contain links to other applications.

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

API

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