---
productId: material-ui
title: React Menu v2 component
components: Menu2, Menu2Trigger, Menu2Popup, Menu2Item, Menu2LinkItem, Menu2CheckboxItem, Menu2RadioGroup, Menu2RadioItem, Menu2Submenu, Menu2SubmenuTrigger, Menu2SubmenuPopup, Menu2Group, Menu2GroupLabel, Menu2Separator
githubLabel: 'scope: menu'
materialDesign: https://m2.material.io/components/menus
waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/
githubSource: packages/mui-material/src/Unstable_Menu2
---

# Menu v2

Menus display a list of choices on temporary surfaces. Menu v2 adds submenus, checkbox and radio items, and grouping.



:::warning
Menu v2 is an unstable component.
Import it from the `Unstable_Menu2` subpaths.
Its API can change in a minor release.

The [current Menu](/material-ui/react-menu/) doesn't change, and you can use both components in the same app.
:::

## Introduction

Menu v2 is a set of components that compose into a menu:

- **Menu**: the open state and behavior. It renders no element.
- **Trigger**: connects the element that opens the menu.
- **Popup**: the positioned menu surface and its transition.
- **Item**: an option for users to select.
- **Link Item**: an item that navigates.
- **Checkbox Item**, **Radio Group**, and **Radio Item**: items with a checked state.
- **Submenu**, **Submenu Trigger**, and **Submenu Popup**: the same parts for a nested menu.
- **Group**, **Group Label**, and **Separator**: the structure in a menu.

```jsx
import Menu from '@mui/material/Unstable_Menu2';
import MenuTrigger from '@mui/material/Unstable_Menu2Trigger';
import MenuPopup from '@mui/material/Unstable_Menu2Popup';
import MenuItem from '@mui/material/Unstable_Menu2Item';
```

Each component is the default export of its own subpath.
These examples use local names such as `Menu` and `MenuItem` for the components imported from `Unstable_Menu2` subpaths.
The import paths, theme keys, and CSS classes keep their `Menu2` names.

## Why a new menu component

Submenus are [one of the most requested Menu features since 2018](https://github.com/mui/material-ui/issues/11723), but the current modal-based Menu can't support them.
Menu v2 uses [Base UI](https://base-ui.com/react/components/menu) to provide more menu building blocks and improve keyboard and screen reader support:

- **Nested menus** coordinate focus and keyboard navigation. Positioning follows the anchor and flips to avoid collisions.
- **Checkbox and radio items**, labeled groups, and link items provide built-in roles and ARIA attributes.
- **Disabled items stay focusable**, and content outside the menu remains available to screen readers.
- **The trigger component** handles anchor state and ARIA attributes. Opening with a pointer highlights no item. Enter, Space, and ArrowDown highlight the first enabled item; ArrowUp highlights the last enabled item.

Material UI supplies the styles and theming.
Base UI is included in `@mui/material`; no extra installation is needed, and apps that don't import Menu v2 don't bundle it.

See [Upgrade to Menu v2](/material-ui/migration/upgrade-to-menu-v2/) for the architecture, prop mappings, and behavior changes.

## Basic menu

Put `MenuTrigger` and `MenuPopup` inside `Menu`.
Give `MenuTrigger` one element, and put the items inside `MenuPopup`.

```tsx
import * as React from 'react';
import Button from '@mui/material/Button';
import Menu from '@mui/material/Unstable_Menu2';
import MenuPopup from '@mui/material/Unstable_Menu2Popup';
import MenuTrigger from '@mui/material/Unstable_Menu2Trigger';
import MenuItem from '@mui/material/Unstable_Menu2Item';

export default function BasicMenu2() {
  return (
    <Menu>
      <MenuTrigger>
        <Button>Dashboard</Button>
      </MenuTrigger>
      <MenuPopup>
        <MenuItem>Profile</MenuItem>
        <MenuItem>My account</MenuItem>
        <MenuItem>Logout</MenuItem>
      </MenuPopup>
    </Menu>
  );
}
```

Selecting a `MenuItem` closes the menu by default.
Set `closeOnClick={false}` to keep it open.
Checkbox, radio, and link items stay open by default; set `closeOnClick` to close after selection.

:::warning
A custom trigger component must forward props and ref to its element, the same as [Tooltip](/material-ui/react-tooltip/), or the menu doesn't open.
Set `nativeButton={false}` on `MenuTrigger` when its child doesn't render a native `<button>`.
:::

## Account menu

The trigger can be a composed element, such as an `IconButton` in a `Tooltip`.
`align="end"` on `MenuPopup` aligns the menu with the end of the trigger.

Give the `IconButton` a unique `id` so the menu can use it as its accessible label.
Tooltip uses its own `id` prop for the tooltip, not the button.

```tsx
import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import Tooltip from '@mui/material/Tooltip';
import Typography from '@mui/material/Typography';
import PersonAdd from '@mui/icons-material/PersonAdd';
import Settings from '@mui/icons-material/Settings';
import Logout from '@mui/icons-material/Logout';
import Menu from '@mui/material/Unstable_Menu2';
import MenuPopup from '@mui/material/Unstable_Menu2Popup';
import MenuTrigger from '@mui/material/Unstable_Menu2Trigger';
import MenuItem from '@mui/material/Unstable_Menu2Item';
import MenuSeparator from '@mui/material/Unstable_Menu2Separator';

export default function AccountMenu2() {
  const triggerId = React.useId();

  return (
    <Box sx={{ display: 'flex', alignItems: 'center', textAlign: 'center' }}>
      <Typography sx={{ minWidth: 100 }}>Contact</Typography>
      <Typography sx={{ minWidth: 100 }}>Profile</Typography>
      <Menu>
        <MenuTrigger>
          <Tooltip title="Account settings">
            <IconButton id={triggerId} size="small" sx={{ ml: 2 }}>
              <Avatar sx={{ width: 32, height: 32 }}>M</Avatar>
            </IconButton>
          </Tooltip>
        </MenuTrigger>
        <MenuPopup
          align="end"
          sideOffset={4}
          sx={{
            '& .MuiAvatar-root': { width: 32, height: 32, ml: -0.5, mr: 1 },
          }}
        >
          <MenuItem>
            <Avatar /> Profile
          </MenuItem>
          <MenuItem>
            <Avatar /> My account
          </MenuItem>
          <MenuSeparator />
          <MenuItem>
            <ListItemIcon>
              <PersonAdd fontSize="small" />
            </ListItemIcon>
            Add another account
          </MenuItem>
          <MenuItem>
            <ListItemIcon>
              <Settings fontSize="small" />
            </ListItemIcon>
            Settings
          </MenuItem>
          <MenuItem>
            <ListItemIcon>
              <Logout fontSize="small" />
            </ListItemIcon>
            Logout
          </MenuItem>
        </MenuPopup>
      </Menu>
    </Box>
  );
}
```

## Open a dialog

Keep the Dialog outside the menu so that it stays mounted when the menu closes.
Open it from the item's `onClick` handler.

:::warning
Dialog can save a menu item as its return target before the menu closes.
That item is then removed or hidden, so focus does not return to the trigger when Dialog closes.
:::

Keep a ref on the menu trigger and set `disableRestoreFocus` on Dialog.
Focus the trigger from **Dialog's** `slotProps.transition.onExited` callback:

```jsx
<Dialog
  open={dialogOpen}
  onClose={() => setDialogOpen(false)}
  disableRestoreFocus
  slotProps={{
    transition: {
      onExited: () => triggerRef.current?.focus({ preventScroll: true }),
    },
  }}
>
  {/* Dialog content */}
</Dialog>
```

Keep the trigger mounted and enabled until the dialog closes.
This changes Dialog's return target, not Menu v2's focus behavior.
The [live recipe](/experiments/menu2-recipes/#menu2-open-dialog) includes a classic Menu comparison and a control to disable the workaround.

## Submenu

Nest a `MenuSubmenu` in the item list.
Put `MenuSubmenuTrigger` and `MenuSubmenuPopup` inside it, with the items inside the popup.
The trigger can be wrapped in another component, but regular, link, checkbox, and radio items do not open a submenu.

```tsx
import * as React from 'react';
import Button from '@mui/material/Button';
import Menu from '@mui/material/Unstable_Menu2';
import MenuPopup from '@mui/material/Unstable_Menu2Popup';
import MenuTrigger from '@mui/material/Unstable_Menu2Trigger';
import MenuSubmenuPopup from '@mui/material/Unstable_Menu2SubmenuPopup';
import MenuItem from '@mui/material/Unstable_Menu2Item';
import MenuSeparator from '@mui/material/Unstable_Menu2Separator';
import MenuSubmenu from '@mui/material/Unstable_Menu2Submenu';
import MenuSubmenuTrigger from '@mui/material/Unstable_Menu2SubmenuTrigger';

export default function SubmenuMenu2() {
  return (
    <Menu>
      <MenuTrigger>
        <Button>File</Button>
      </MenuTrigger>
      <MenuPopup>
        <MenuItem>New file</MenuItem>
        <MenuItem>Open recent</MenuItem>
        <MenuSeparator />
        <MenuSubmenu>
          <MenuSubmenuTrigger>Share</MenuSubmenuTrigger>
          <MenuSubmenuPopup>
            <MenuItem>Invite people</MenuItem>
            <MenuItem>Copy link</MenuItem>
            <MenuSubmenu>
              <MenuSubmenuTrigger>Export as</MenuSubmenuTrigger>
              <MenuSubmenuPopup>
                <MenuItem>PDF document</MenuItem>
                <MenuItem>EPUB publication</MenuItem>
                <MenuItem>Markdown</MenuItem>
              </MenuSubmenuPopup>
            </MenuSubmenu>
          </MenuSubmenuPopup>
        </MenuSubmenu>
        <MenuSeparator />
        <MenuItem>Print</MenuItem>
      </MenuPopup>
    </Menu>
  );
}
```

By default, a submenu opens on mouse hover after 100 ms; a click does not bypass this delay.
Set `openOnHover={false}` on `MenuSubmenuTrigger` to open with a mouse click instead.
Touch taps, Enter, Space, and ArrowRight also open it, or ArrowLeft in right-to-left text.
See the [trigger API](/material-ui/api/menu-2-submenu-trigger/) for hover timing and arrow customization.
If you remove the arrow, keep another visible cue that the item opens a submenu.

Submenus nest to any depth and flip when they run out of room.
Escape closes the innermost submenu and returns focus to its trigger.
Pass `closeParentOnEsc` to `MenuSubmenu` to close the whole menu.

## Icon menu

Compose the same list primitives that you use with the current Menu: `ListItemIcon`, `ListItemText`, and `Typography` for a shortcut hint.

```tsx
import * as React from 'react';
import Button from '@mui/material/Button';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import Typography from '@mui/material/Typography';
import Cloud from '@mui/icons-material/Cloud';
import ContentCopy from '@mui/icons-material/ContentCopy';
import ContentCut from '@mui/icons-material/ContentCut';
import ContentPaste from '@mui/icons-material/ContentPaste';
import Menu from '@mui/material/Unstable_Menu2';
import MenuPopup from '@mui/material/Unstable_Menu2Popup';
import MenuTrigger from '@mui/material/Unstable_Menu2Trigger';
import MenuItem from '@mui/material/Unstable_Menu2Item';
import MenuSeparator from '@mui/material/Unstable_Menu2Separator';

function Shortcut({ children }: { children: React.ReactNode }) {
  return (
    <Typography variant="body2" sx={{ color: 'text.secondary' }}>
      {children}
    </Typography>
  );
}

export default function IconMenu2() {
  return (
    <Menu>
      <MenuTrigger>
        <Button>Edit</Button>
      </MenuTrigger>
      <MenuPopup sx={{ width: 320 }}>
        <MenuItem>
          <ListItemIcon>
            <ContentCut fontSize="small" />
          </ListItemIcon>
          <ListItemText>Cut</ListItemText>
          <Shortcut>⌘X</Shortcut>
        </MenuItem>
        <MenuItem>
          <ListItemIcon>
            <ContentCopy fontSize="small" />
          </ListItemIcon>
          <ListItemText>Copy</ListItemText>
          <Shortcut>⌘C</Shortcut>
        </MenuItem>
        <MenuItem>
          <ListItemIcon>
            <ContentPaste fontSize="small" />
          </ListItemIcon>
          <ListItemText>Paste</ListItemText>
          <Shortcut>⌘V</Shortcut>
        </MenuItem>
        <MenuSeparator />
        <MenuItem>
          <ListItemIcon>
            <Cloud fontSize="small" />
          </ListItemIcon>
          <ListItemText>Web clipboard</ListItemText>
        </MenuItem>
      </MenuPopup>
    </Menu>
  );
}
```

## Dense menu

Set `dense` on the popup's `list` slot to make all the items compact.
Submenus inherit their parent list's density.
Set `slotProps.list.dense` on `MenuSubmenuPopup` to override it, including `false` for regular spacing.
An item can also set its own `dense` prop.

```tsx
import * as React from 'react';
import Button from '@mui/material/Button';
import Menu from '@mui/material/Unstable_Menu2';
import MenuPopup from '@mui/material/Unstable_Menu2Popup';
import MenuTrigger from '@mui/material/Unstable_Menu2Trigger';
import MenuSubmenuPopup from '@mui/material/Unstable_Menu2SubmenuPopup';
import MenuItem from '@mui/material/Unstable_Menu2Item';
import MenuSeparator from '@mui/material/Unstable_Menu2Separator';
import MenuSubmenu from '@mui/material/Unstable_Menu2Submenu';
import MenuSubmenuTrigger from '@mui/material/Unstable_Menu2SubmenuTrigger';

export default function DenseMenu2() {
  return (
    <Menu>
      <MenuTrigger>
        <Button>Options</Button>
      </MenuTrigger>
      <MenuPopup slotProps={{ list: { dense: true } }}>
        <MenuItem>Single</MenuItem>
        <MenuItem>1.15</MenuItem>
        <MenuItem>Double</MenuItem>
        <MenuSeparator />
        <MenuItem>Custom: 1.2</MenuItem>
        <MenuSubmenu>
          <MenuSubmenuTrigger>Paragraph spacing</MenuSubmenuTrigger>
          <MenuSubmenuPopup>
            <MenuItem>Add space before paragraph</MenuItem>
            <MenuItem>Add space after paragraph</MenuItem>
          </MenuSubmenuPopup>
        </MenuSubmenu>
      </MenuPopup>
    </Menu>
  );
}
```

## Checkbox and radio items

`MenuCheckboxItem` renders `role="menuitemcheckbox"` with its own indicator.
For a single choice in a set, put `MenuRadioItem` components in a `MenuRadioGroup`.
Both keep the menu open by default so users can change several options.

```tsx
import * as React from 'react';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
import Menu from '@mui/material/Unstable_Menu2';
import MenuPopup from '@mui/material/Unstable_Menu2Popup';
import MenuTrigger from '@mui/material/Unstable_Menu2Trigger';
import MenuCheckboxItem from '@mui/material/Unstable_Menu2CheckboxItem';
import MenuRadioGroup from '@mui/material/Unstable_Menu2RadioGroup';
import MenuRadioItem from '@mui/material/Unstable_Menu2RadioItem';

export default function CheckboxRadioMenu2() {
  const [ruler, setRuler] = React.useState(true);
  const [outline, setOutline] = React.useState(false);
  const [grid, setGrid] = React.useState(false);
  const [zoom, setZoom] = React.useState('fit');

  return (
    <Stack direction="row" spacing={2} useFlexGap>
      <Menu>
        <MenuTrigger>
          <Button>View</Button>
        </MenuTrigger>
        <MenuPopup>
          <MenuCheckboxItem checked={ruler} onCheckedChange={setRuler}>
            Ruler
          </MenuCheckboxItem>
          <MenuCheckboxItem checked={outline} onCheckedChange={setOutline}>
            Outline
          </MenuCheckboxItem>
          <MenuCheckboxItem checked={grid} onCheckedChange={setGrid}>
            Grid
          </MenuCheckboxItem>
        </MenuPopup>
      </Menu>
      <Menu>
        <MenuTrigger>
          <Button>Zoom</Button>
        </MenuTrigger>
        <MenuPopup>
          <MenuRadioGroup value={zoom} onValueChange={setZoom}>
            <MenuRadioItem value="50">50%</MenuRadioItem>
            <MenuRadioItem value="100">100%</MenuRadioItem>
            <MenuRadioItem value="200">200%</MenuRadioItem>
            <MenuRadioItem value="fit">Fit to window</MenuRadioItem>
          </MenuRadioGroup>
        </MenuPopup>
      </Menu>
    </Stack>
  );
}
```

Read the new value from the first callback argument: `onCheckedChange(checked, eventDetails)` or `onValueChange(value, eventDetails)`.
For an uncontrolled item or group, use `defaultChecked` or `defaultValue`.
To change the icons, see [Checkbox and radio indicators](#checkbox-and-radio-indicators).

:::info
Menu v2 items do not have a `selected` prop.
Use checkbox or radio items for checked state.
:::

## Composed menu

The parts compose freely: checkbox items with shortcut hints, a submenu with a radio group, icon items, and a disabled item.

```tsx
import * as React from 'react';
import Button from '@mui/material/Button';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import Typography from '@mui/material/Typography';
import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
import FormatClearIcon from '@mui/icons-material/FormatClear';
import FormatPaintIcon from '@mui/icons-material/FormatPaint';
import Menu from '@mui/material/Unstable_Menu2';
import MenuPopup from '@mui/material/Unstable_Menu2Popup';
import MenuTrigger from '@mui/material/Unstable_Menu2Trigger';
import MenuSubmenuPopup from '@mui/material/Unstable_Menu2SubmenuPopup';
import MenuCheckboxItem from '@mui/material/Unstable_Menu2CheckboxItem';
import MenuItem from '@mui/material/Unstable_Menu2Item';
import MenuRadioGroup from '@mui/material/Unstable_Menu2RadioGroup';
import MenuRadioItem from '@mui/material/Unstable_Menu2RadioItem';
import MenuSeparator from '@mui/material/Unstable_Menu2Separator';
import MenuSubmenu from '@mui/material/Unstable_Menu2Submenu';
import MenuSubmenuTrigger from '@mui/material/Unstable_Menu2SubmenuTrigger';

function Shortcut({ children }: { children: React.ReactNode }) {
  return (
    <Typography variant="body2" sx={{ color: 'text.secondary' }}>
      {children}
    </Typography>
  );
}

export default function ComposedMenu2() {
  const [bold, setBold] = React.useState(true);
  const [italic, setItalic] = React.useState(false);
  const [alignment, setAlignment] = React.useState('left');

  return (
    <Menu>
      <MenuTrigger>
        <Button>Format</Button>
      </MenuTrigger>
      <MenuPopup sx={{ width: 260 }}>
        <MenuCheckboxItem checked={bold} onCheckedChange={setBold}>
          <ListItemText>Bold</ListItemText>
          <Shortcut>⌘B</Shortcut>
        </MenuCheckboxItem>
        <MenuCheckboxItem checked={italic} onCheckedChange={setItalic}>
          <ListItemText>Italic</ListItemText>
          <Shortcut>⌘I</Shortcut>
        </MenuCheckboxItem>
        <MenuSeparator />
        <MenuSubmenu>
          <MenuSubmenuTrigger>
            <ListItemIcon>
              <FormatAlignLeftIcon fontSize="small" />
            </ListItemIcon>
            <ListItemText>Align</ListItemText>
          </MenuSubmenuTrigger>
          <MenuSubmenuPopup>
            <MenuRadioGroup value={alignment} onValueChange={setAlignment}>
              <MenuRadioItem value="left">Left</MenuRadioItem>
              <MenuRadioItem value="center">Center</MenuRadioItem>
              <MenuRadioItem value="right">Right</MenuRadioItem>
              <MenuRadioItem value="justify">Justify</MenuRadioItem>
            </MenuRadioGroup>
          </MenuSubmenuPopup>
        </MenuSubmenu>
        <MenuSeparator />
        <MenuItem>
          <ListItemIcon>
            <FormatClearIcon fontSize="small" />
          </ListItemIcon>
          <ListItemText>Clear formatting</ListItemText>
          <Shortcut>⌘\</Shortcut>
        </MenuItem>
        <MenuItem disabled>
          <ListItemIcon>
            <FormatPaintIcon fontSize="small" />
          </ListItemIcon>
          <ListItemText>Paste format</ListItemText>
        </MenuItem>
      </MenuPopup>
    </Menu>
  );
}
```

## Grouped menu

`MenuGroup` and `MenuGroupLabel` label a set of related items.
The group refers to its label with `aria-labelledby`.
Use `MenuSeparator` between groups.

```tsx
import * as React from 'react';
import Button from '@mui/material/Button';
import Menu from '@mui/material/Unstable_Menu2';
import MenuPopup from '@mui/material/Unstable_Menu2Popup';
import MenuTrigger from '@mui/material/Unstable_Menu2Trigger';
import MenuGroup from '@mui/material/Unstable_Menu2Group';
import MenuGroupLabel from '@mui/material/Unstable_Menu2GroupLabel';
import MenuItem from '@mui/material/Unstable_Menu2Item';
import MenuSeparator from '@mui/material/Unstable_Menu2Separator';

export default function GroupedMenu2() {
  return (
    <Menu>
      <MenuTrigger>
        <Button>Insert</Button>
      </MenuTrigger>
      <MenuPopup>
        <MenuGroup>
          <MenuGroupLabel>Media</MenuGroupLabel>
          <MenuItem>Image</MenuItem>
          <MenuItem>Video</MenuItem>
          <MenuItem>Audio</MenuItem>
        </MenuGroup>
        <MenuSeparator />
        <MenuGroup>
          <MenuGroupLabel>Layout</MenuGroupLabel>
          <MenuItem>Table</MenuItem>
          <MenuItem>Column break</MenuItem>
          <MenuItem>Page break</MenuItem>
        </MenuGroup>
      </MenuPopup>
    </Menu>
  );
}
```

## Link items

`MenuLinkItem` renders a real anchor with `role="menuitem"`, so middle-click, right-click, and keyboard activation behave like a link.

```tsx
import * as React from 'react';
import Button from '@mui/material/Button';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import OpenInNew from '@mui/icons-material/OpenInNew';
import Menu from '@mui/material/Unstable_Menu2';
import MenuPopup from '@mui/material/Unstable_Menu2Popup';
import MenuTrigger from '@mui/material/Unstable_Menu2Trigger';
import MenuLinkItem from '@mui/material/Unstable_Menu2LinkItem';
import MenuSeparator from '@mui/material/Unstable_Menu2Separator';

export default function LinkItemsMenu2() {
  return (
    <Menu>
      <MenuTrigger>
        <Button>Help</Button>
      </MenuTrigger>
      <MenuPopup>
        <MenuLinkItem href="/material-ui/getting-started/">
          Getting started
        </MenuLinkItem>
        <MenuLinkItem href="/material-ui/react-menu/">
          Menu documentation
        </MenuLinkItem>
        <MenuSeparator />
        <MenuLinkItem
          href="https://github.com/mui/material-ui"
          target="_blank"
          rel="noopener"
          sx={{ '& .MuiListItemIcon-root': { minWidth: 'auto' } }}
        >
          <ListItemText>GitHub repository</ListItemText>
          <ListItemIcon>
            <OpenInNew fontSize="small" />
          </ListItemIcon>
        </MenuLinkItem>
      </MenuPopup>
    </Menu>
  );
}
```

A link item doesn't close the menu on click by default.
Set `closeOnClick` to close it, for example with client-side routing.

:::warning
Unlike a classic `MenuItem` with `href`, `MenuLinkItem` does not support `disabled`.
:::

## Positioned menu

The `MenuPopup` props `side` and `align` place the menu relative to its anchor, and `sideOffset` and `alignOffset` move it.
The defaults are `side="bottom"` and `align="start"`.

Use the logical `inline-start` and `inline-end` sides to get the correct direction in right-to-left text.

Open the non-modal menu, then change the values for a live preview.
Press Escape or use the trigger to close it.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Slider from '@mui/material/Slider';
import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import Menu from '@mui/material/Unstable_Menu2';
import MenuPopup, {
  Menu2PopupProps as PopupProps,
} from '@mui/material/Unstable_Menu2Popup';
import MenuTrigger from '@mui/material/Unstable_Menu2Trigger';
import MenuItem from '@mui/material/Unstable_Menu2Item';

export default function PositionedMenu2() {
  const id = React.useId();
  const [side, setSide] = React.useState<PopupProps['side']>('bottom');
  const [align, setAlign] = React.useState<PopupProps['align']>('start');
  const [sideOffset, setSideOffset] = React.useState(8);
  const [alignOffset, setAlignOffset] = React.useState(0);

  return (
    <Stack spacing={3} useFlexGap sx={{ width: '100%', maxWidth: 600 }}>
      <Stack direction="row" spacing={2} useFlexGap>
        <TextField
          select
          fullWidth
          label="side"
          value={side}
          onChange={(event) => setSide(event.target.value as PopupProps['side'])}
          slotProps={{ select: { native: true } }}
        >
          {['top', 'bottom', 'left', 'right', 'inline-start', 'inline-end'].map(
            (value) => (
              <option key={value} value={value}>
                {value}
              </option>
            ),
          )}
        </TextField>
        <TextField
          select
          fullWidth
          label="align"
          value={align}
          onChange={(event) => setAlign(event.target.value as PopupProps['align'])}
          slotProps={{ select: { native: true } }}
        >
          {['start', 'center', 'end'].map((value) => (
            <option key={value} value={value}>
              {value}
            </option>
          ))}
        </TextField>
      </Stack>
      <Stack direction={{ xs: 'column', sm: 'row' }} spacing={3} useFlexGap>
        <Box sx={{ flex: 1 }}>
          <Typography id={`${id}-side-offset`} variant="body2">
            sideOffset: {sideOffset} px
          </Typography>
          <Slider
            aria-labelledby={`${id}-side-offset`}
            value={sideOffset}
            onChange={(_event, value) => setSideOffset(value)}
            min={-32}
            max={32}
            step={4}
            valueLabelDisplay="auto"
          />
        </Box>
        <Box sx={{ flex: 1 }}>
          <Typography id={`${id}-align-offset`} variant="body2">
            alignOffset: {alignOffset} px
          </Typography>
          <Slider
            aria-labelledby={`${id}-align-offset`}
            value={alignOffset}
            onChange={(_event, value) => setAlignOffset(value)}
            min={-32}
            max={32}
            step={4}
            valueLabelDisplay="auto"
          />
        </Box>
      </Stack>
      <Box
        sx={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          minHeight: 320,
        }}
      >
        <Menu
          modal={false}
          onOpenChange={(open, eventDetails) => {
            if (
              !open &&
              (eventDetails.reason === 'outside-press' ||
                eventDetails.reason === 'focus-out')
            ) {
              // Keep the preview open while the user changes the controls.
              eventDetails.cancel();
            }
          }}
        >
          <MenuTrigger>
            <Button variant="outlined">Open menu</Button>
          </MenuTrigger>
          <MenuPopup
            side={side}
            align={align}
            sideOffset={sideOffset}
            alignOffset={alignOffset}
            sx={{ minWidth: 180 }}
          >
            <MenuItem>Profile</MenuItem>
            <MenuItem>My account</MenuItem>
            <MenuItem>Logout</MenuItem>
          </MenuPopup>
        </Menu>
      </Box>
    </Stack>
  );
}
```

The menu flips when it collides with the edge of its container, and it follows its anchor on scroll and resize.

## Open on hover

Set `openOnHover` on `MenuTrigger` to open the menu when the pointer rests on the trigger.

```tsx
import * as React from 'react';
import Button from '@mui/material/Button';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import Menu from '@mui/material/Unstable_Menu2';
import MenuPopup from '@mui/material/Unstable_Menu2Popup';
import MenuTrigger from '@mui/material/Unstable_Menu2Trigger';
import MenuItem from '@mui/material/Unstable_Menu2Item';

export default function HoverMenu2() {
  return (
    <Menu>
      <MenuTrigger openOnHover closeDelay={150}>
        <Button endIcon={<KeyboardArrowDownIcon />}>Products</Button>
      </MenuTrigger>
      <MenuPopup>
        <MenuItem>Material UI</MenuItem>
        <MenuItem>Base UI</MenuItem>
        <MenuItem>MUI X</MenuItem>
      </MenuPopup>
    </Menu>
  );
}
```

A menu that opens on hover isn't modal, so the rest of the page stays interactive.

## Controlled menu

Pass `open` and `onOpenChange` to `Menu` to control the open state.
The trigger still sets the ARIA attributes and receives focus when the menu closes.

```tsx
import * as React from 'react';
import IconButton from '@mui/material/IconButton';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import Menu from '@mui/material/Unstable_Menu2';
import MenuPopup from '@mui/material/Unstable_Menu2Popup';
import MenuTrigger from '@mui/material/Unstable_Menu2Trigger';
import MenuItem from '@mui/material/Unstable_Menu2Item';

export default function ControlledMenu2() {
  const [open, setOpen] = React.useState(false);
  const [reason, setReason] = React.useState<string | null>(null);

  return (
    <Stack direction="row" spacing={2} useFlexGap sx={{ alignItems: 'center' }}>
      <Menu
        open={open}
        onOpenChange={(nextOpen, eventDetails) => {
          setOpen(nextOpen);
          setReason(eventDetails.reason);
        }}
      >
        <MenuTrigger>
          <IconButton aria-label="More actions">
            <MoreVertIcon />
          </IconButton>
        </MenuTrigger>
        <MenuPopup>
          <MenuItem>Rename</MenuItem>
          <MenuItem>Duplicate</MenuItem>
          <MenuItem>Delete</MenuItem>
        </MenuPopup>
      </Menu>
      <Typography variant="body2" sx={{ color: 'text.secondary' }}>
        {reason === null
          ? 'Open the menu, then close it.'
          : `${open ? 'Opened' : 'Closed'} with reason "${reason}".`}
      </Typography>
    </Stack>
  );
}
```

### Keep the menu open

`onOpenChange` receives the reason for the change in `eventDetails.reason`.
Call `eventDetails.cancel()` to prevent a close, for example on an outside press.
This works for controlled and uncontrolled menus:

```jsx
<Menu
  onOpenChange={(open, eventDetails) => {
    if (!open && eventDetails.reason === 'outside-press') {
      eventDetails.cancel();
    }
  }}
>
  <MenuTrigger>
    <Button>Options</Button>
  </MenuTrigger>
  <MenuPopup>{/* Menu items */}</MenuPopup>
</Menu>
```

### Without a trigger

Omit `MenuTrigger` and pass `anchor` to `MenuPopup` to position it against an element that you control, the same as `anchorEl` in the current Menu.
The menu can't connect to that element, so you do the wiring:

- Add `aria-haspopup="menu"`, `aria-expanded`, and `aria-controls` to the element. Set the matching `id` on `MenuPopup`.
- Give `MenuPopup` an accessible name with `aria-label` or `aria-labelledby`.
- Pass `finalFocus` to `MenuPopup` to return focus to the element when the menu closes. Otherwise, focus can move to an unrelated element.

:::info
Menu v2 doesn't support context menus.
:::

## Max height menu

The menu limits its height to the viewport and to the space available at the anchor, and scrolls its content.
To set a smaller limit with the `sx` prop on `MenuPopup`, use `min(320px, var(--available-height))` to keep it within short screens.

```tsx
import * as React from 'react';
import Button from '@mui/material/Button';
import Menu from '@mui/material/Unstable_Menu2';
import MenuPopup from '@mui/material/Unstable_Menu2Popup';
import MenuTrigger from '@mui/material/Unstable_Menu2Trigger';
import MenuItem from '@mui/material/Unstable_Menu2Item';

const countries = [
  'Argentina',
  'Australia',
  'Austria',
  'Belgium',
  'Brazil',
  'Canada',
  'Chile',
  'Colombia',
  'Czechia',
  'Denmark',
  'Estonia',
  'Finland',
  'France',
  'Germany',
  'Greece',
  'Hungary',
  'Iceland',
  'India',
  'Ireland',
  'Italy',
  'Japan',
  'Lithuania',
  'Mexico',
  'Netherlands',
  'New Zealand',
  'Norway',
  'Poland',
  'Portugal',
  'Spain',
  'Sweden',
  'Switzerland',
  'United Kingdom',
];

export default function LongMenu2() {
  return (
    <Menu>
      <MenuTrigger>
        <Button>Country</Button>
      </MenuTrigger>
      <MenuPopup
        sx={{ maxHeight: 'min(320px, var(--available-height))', width: 240 }}
        slotProps={{ list: { dense: true } }}
      >
        {countries.map((country) => (
          <MenuItem key={country}>{country}</MenuItem>
        ))}
      </MenuPopup>
    </Menu>
  );
}
```

## Customization

Style the popup and items with `sx`, slots, or the `MuiMenu2*` theme keys.
See the [theme components](/material-ui/customization/theme-components/) guide for `defaultProps` and `styleOverrides`, and the [popup API reference](/material-ui/api/menu-2-popup/) for the slots and CSS classes.

### Slots

`Menu` and `MenuSubmenu` render no element and have no slots, DOM ref, or `sx` prop.
On `MenuPopup` and `MenuSubmenuPopup`, `ref`, `className`, `style`, `sx`, event handlers, and HTML attributes target the menu surface, which is the `root` slot.
Use `slotProps.positioner` for the positioned element and `slotProps.portal` for the stacking layer.
Set positioning props such as `side` and `align` on the popup.

The portal carries `theme.zIndex.modal` and keeps the menu and its modal interaction layer above other content, including Dialog.
Submenus stay within the root menu's stacking context, so set `slotProps.portal.sx.zIndex` on `MenuPopup` to change the stacking level of the whole menu.

:::warning
A replacement `slots.portal` must provide its own stacking and closed-state styles.
With `keepMounted`, the default portal hides after the exit transition, when its positioner becomes hidden.
:::

This demo wraps `MenuPopup` in `styled()` to set defaults, style the surface directly, and style items through their class selectors:

```tsx
import * as React from 'react';
import { alpha, styled } from '@mui/material/styles';
import Button from '@mui/material/Button';
import ArchiveIcon from '@mui/icons-material/Archive';
import EditIcon from '@mui/icons-material/Edit';
import FileCopyIcon from '@mui/icons-material/FileCopy';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import Menu from '@mui/material/Unstable_Menu2';
import MenuTrigger from '@mui/material/Unstable_Menu2Trigger';
import MenuPopup, {
  Menu2PopupProps as PopupProps,
} from '@mui/material/Unstable_Menu2Popup';
import MenuItem from '@mui/material/Unstable_Menu2Item';
import MenuSeparator from '@mui/material/Unstable_Menu2Separator';

const StyledPopup = styled((props: PopupProps) => (
  <MenuPopup elevation={0} align="end" sideOffset={8} {...props} />
))(({ theme }) => ({
  borderRadius: 6,
  minWidth: 180,
  border: `1px solid ${theme.palette.divider}`,
  boxShadow: theme.shadows[3],
  '& .MuiMenu2Item-root': {
    '& .MuiSvgIcon-root': {
      fontSize: 18,
      color: theme.palette.text.secondary,
      marginRight: theme.spacing(1.5),
    },
    '&:active': {
      backgroundColor: alpha(
        theme.palette.primary.main,
        theme.palette.action.selectedOpacity,
      ),
    },
  },
}));

export default function CustomizedMenu2() {
  return (
    <Menu>
      <MenuTrigger>
        <Button
          variant="contained"
          disableElevation
          endIcon={<KeyboardArrowDownIcon />}
        >
          Options
        </Button>
      </MenuTrigger>
      <StyledPopup>
        <MenuItem>
          <EditIcon />
          Edit
        </MenuItem>
        <MenuItem>
          <FileCopyIcon />
          Duplicate
        </MenuItem>
        <MenuSeparator />
        <MenuItem>
          <ArchiveIcon />
          Archive
        </MenuItem>
      </StyledPopup>
    </Menu>
  );
}
```

### Trigger

`MenuTrigger` merges its behavior into the element you supply as its child.
Style that element directly, or use a scoped state selector such as `.MuiMenu2Trigger-root.Mui-open`.
Trigger props, event handlers, and the ref belong on `MenuTrigger` or its child, not on `Menu`.

:::warning
While a menu or submenu is open, Base UI renders hidden `span` elements next to its trigger for focus and accessibility.
CSS sibling selectors (`+`, `~`, `:last-child`) can match these elements.
Style each part directly instead, and set `useFlexGap` on a `Stack` that contains menu triggers to prevent layout shifts.
The focus guards have a `data-base-ui-focus-guard` attribute.
:::

### Shared theme styles

`MuiMenu2Popup.styleOverrides` also applies to matching submenu popup slots.
`MuiMenu2Item.styleOverrides` applies to all item roots, including link, checkbox, and radio items and submenu triggers.
The `dense`, `divider`, and `gutters` overrides apply when the corresponding state matches.
Theme variants are shared too; menu variants apply only to the `root` slot.

Component-specific styles apply after shared styles, with `sx` last; CSS specificity still applies.
Callbacks receive the rendered component's live state.
Utility classes remain component-specific, and **`defaultProps` are not shared** between theme keys.

Use scoped state selectors such as `.MuiMenu2CheckboxItem-root.Mui-checked` inside a slot override, or a theme variant for states such as `highlighted`.

### State data attributes

Menu v2 also provides these Base UI `data-*` attributes for CSS selectors and Tailwind CSS:

| Element                                                     | Attributes                                                                                        |
| :---------------------------------------------------------- | :------------------------------------------------------------------------------------------------ |
| Root menu trigger                                           | `data-popup-open`, `data-pressed`, `data-disabled`                                                |
| `MenuItem` root                                             | `data-highlighted`, `data-disabled`                                                               |
| `MenuLinkItem` root                                         | `data-highlighted`                                                                                |
| `MenuCheckboxItem` and `MenuRadioItem` roots and indicators | `data-highlighted`, `data-disabled`, `data-checked`, `data-unchecked`                             |
| `MenuSubmenuTrigger` root                                   | `data-popup-open`, `data-highlighted`, `data-disabled`                                            |
| Popup `root` slot                                           | `data-open`, `data-closed`, `data-side`, `data-align`, `data-starting-style`, `data-ending-style` |
| `positioner` slot                                           | `data-open`, `data-closed`, `data-side`, `data-align`                                             |
| Optional `backdrop` slot                                    | `data-open`, `data-closed`, `data-starting-style`, `data-ending-style`                            |

State attributes have an empty value when active and are absent otherwise: use `[data-checked]`, not `[data-checked="true"]`.
Checked items and their indicators have either `data-checked` or `data-unchecked`.
`data-side` and `data-align` contain the resolved placement after collision handling.

Triggers use `data-popup-open`, not `data-open`.
On the root trigger, `data-pressed` follows the open state and `data-disabled` follows Menu's `disabled` prop.
`data-highlighted` follows pointer and keyboard navigation, including focus on disabled items; use `.Mui-focusVisible` for keyboard focus-visible styles.

The popup's `portal` and `list` slots and the submenu arrow have no automatic state attributes.
Custom slots must forward the supplied props and ref.
Internal `data-mui-*` markers are not part of this styling contract.

For example, after the [Tailwind CSS v4 setup](/material-ui/integrations/tailwindcss/tailwindcss-v4/), style a checked item with a presence variant:

```jsx
<MenuCheckboxItem className="data-[checked]:font-semibold">
  Show toolbar
</MenuCheckboxItem>
```

### Checkbox and radio indicators

Use `icon` and `checkedIcon` on `MenuCheckboxItem` and `MenuRadioItem` to change the unchecked and checked icons.
Custom icons keep their own size.

```tsx
import * as React from 'react';
import Button from '@mui/material/Button';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
import StarIcon from '@mui/icons-material/Star';
import StarBorderIcon from '@mui/icons-material/StarBorder';
import Menu from '@mui/material/Unstable_Menu2';
import MenuPopup from '@mui/material/Unstable_Menu2Popup';
import MenuTrigger from '@mui/material/Unstable_Menu2Trigger';
import MenuCheckboxItem from '@mui/material/Unstable_Menu2CheckboxItem';
import MenuRadioGroup from '@mui/material/Unstable_Menu2RadioGroup';
import MenuRadioItem from '@mui/material/Unstable_Menu2RadioItem';
import MenuSeparator from '@mui/material/Unstable_Menu2Separator';

export default function IndicatorIconsMenu2() {
  const [favorite, setFavorite] = React.useState(true);
  const [pinned, setPinned] = React.useState(false);
  const [sort, setSort] = React.useState('name');

  return (
    <Menu>
      <MenuTrigger>
        <Button>Options</Button>
      </MenuTrigger>
      <MenuPopup>
        <MenuCheckboxItem
          checked={favorite}
          onCheckedChange={setFavorite}
          icon={<StarBorderIcon fontSize="small" />}
          checkedIcon={<StarIcon fontSize="small" />}
        >
          Favorite
        </MenuCheckboxItem>
        <MenuCheckboxItem
          checked={pinned}
          onCheckedChange={setPinned}
          icon={<StarBorderIcon fontSize="small" />}
          checkedIcon={<StarIcon fontSize="small" />}
        >
          Pinned
        </MenuCheckboxItem>
        <MenuSeparator />
        <MenuRadioGroup value={sort} onValueChange={setSort}>
          <MenuRadioItem
            value="name"
            icon={<RadioButtonUncheckedIcon fontSize="small" />}
            checkedIcon={<CheckCircleIcon fontSize="small" />}
          >
            Sort by name
          </MenuRadioItem>
          <MenuRadioItem
            value="date"
            icon={<RadioButtonUncheckedIcon fontSize="small" />}
            checkedIcon={<CheckCircleIcon fontSize="small" />}
          >
            Sort by date
          </MenuRadioItem>
        </MenuRadioGroup>
      </MenuPopup>
    </Menu>
  );
}
```

Use `slotProps.indicator` to customize the indicator container, or `slots.indicator` to replace it.
If `slotProps.indicator.children` is neither `null` nor `undefined`, it takes precedence over the icon props.
Slot callbacks receive the live checked, disabled, and highlighted state.
A replacement must forward the supplied props and ref, including the state classes in `className`.

The default indicators use `ListItemIcon`, so its selectors also affect indicators.
With modular CSS layers, `MuiListItemIcon` theme overrides take precedence over default indicator colors.
For indicator-specific styles, use the item's `styleOverrides.indicator` or `slotProps.indicator.sx`; indicators have no separate theme keys.
The internal indicator components are not exported, but their owning items export `menu2CheckboxItemIndicatorClasses` and `menu2RadioItemIndicatorClasses` for CSS selectors.

### Transitions

`MenuPopup` uses the `Grow` transition, the same as the current Menu.
With the default `transitionDuration="auto"`, the duration depends on the height of the menu.
Pass a different transition component to the popup's `slots.transition`, and its props to `slotProps.transition`:

```tsx
import * as React from 'react';
import Button from '@mui/material/Button';
import Fade from '@mui/material/Fade';
import Menu from '@mui/material/Unstable_Menu2';
import MenuPopup from '@mui/material/Unstable_Menu2Popup';
import MenuTrigger from '@mui/material/Unstable_Menu2Trigger';
import MenuItem from '@mui/material/Unstable_Menu2Item';

export default function FadeMenu2() {
  return (
    <Menu>
      <MenuTrigger>
        <Button>Dashboard</Button>
      </MenuTrigger>
      <MenuPopup slots={{ transition: Fade }}>
        <MenuItem>Profile</MenuItem>
        <MenuItem>My account</MenuItem>
        <MenuItem>Logout</MenuItem>
      </MenuPopup>
    </Menu>
  );
}
```

Grow, Fade, and Zoom work with Menu v2.
A custom transition must forward its child's props and ref, animate that same popup element, and add no DOM wrapper.
The animation must start in time for Base UI to detect it.
Test other transitions before use.

The adapter controls `in`, `appear`, `mountOnEnter`, and `unmountOnExit`.

:::warning
Use `onOpenChangeComplete(open)` on `Menu` for completion, not the transition's `onEntered` or `onExited`.
Base UI controls mounting and can unmount the transition before its completion timer fires.
:::

Set `transitionDuration={0}` to remove the animation.
To animate with CSS, set `slots.transition` to `null`.
The menu surface has `data-starting-style` for its initial style, then removes it to start the enter transition.
It has `data-ending-style` while it leaves:

```jsx
<MenuPopup
  slots={{ transition: null }}
  slotProps={{
    root: {
      sx: {
        transition: 'opacity 150ms',
        '&[data-starting-style], &[data-ending-style]': { opacity: 0 },
      },
    },
  }}
>
  {/* Menu items */}
</MenuPopup>
```

`Grow` and the other Material UI transitions follow [`theme.motion.reducedMotion`](/material-ui/customization/transitions/#reduced-motion).
CSS animations need their own reduced-motion handling.

`data-closed` marks the logical closed state, not the end of the exit transition.
With `keepMounted`, the paper and positioner keep `data-closed` while hidden after the transition.
Without it, they unmount.

### Backdrop

Base UI uses an internal, transparent backdrop for modal menus.
This layer is absent when a menu opens on hover or has `modal={false}`.

The optional visual backdrop is separate and is not rendered by default.
Set `slots.backdrop` or `slotProps.backdrop` on `MenuPopup` to render it inside the portal, behind the menu.
Its default styles are transparent and do not capture pointer events.
To dim the page:

```jsx
<MenuPopup slotProps={{ backdrop: { sx: { bgcolor: 'rgba(0, 0, 0, 0.5)' } } }}>
  {/* Menu items */}
</MenuPopup>
```

Set `slots={{ backdrop: null }}` to omit this layer, including when the theme supplies backdrop slot props.
This does not change modal behavior.
Base UI does not hide this optional layer when the menu opens on hover.
Submenus have no backdrop slot.

## Accessibility

Menu v2 follows the [WAI-ARIA menu button pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/).
It handles the trigger, the roles, the keyboard behavior, focus management, and dismissal:

- The trigger gets `aria-haspopup`, `aria-expanded`, and `aria-controls`.
- Arrow keys move between items and respect right-to-left text. Home and End move to the first and the last item.
- Typeahead matches items by their text content, or by the `label` prop when the content isn't plain text.
- Disabled items stay focusable, and screen readers announce them as disabled.
- Escape closes one level at a time and returns focus to the trigger of that level.

The menu takes its accessible name from the trigger.
`aria-label` or `aria-labelledby` on `MenuPopup` replaces it, and an explicit `aria-labelledby` takes precedence over `aria-label`.
Matching attributes on `slotProps.root` take precedence over the top-level ones.

Two things stay your responsibility:

- **Label an icon-only trigger.** Pass `aria-label` to `MenuTrigger` or its child.
- **Keep custom item content readable.** Icons, secondary text, and shortcut hints in an item need sufficient contrast.


# Menu2 API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Menu v2](https://deploy-preview-48823--material-ui.netlify.app/material-ui/react-menu2/)

## Import

```jsx
import Menu from '@mui/material/Unstable_Menu2';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| actionsRef | `{ current?: { close: func, unmount: func } }` | - | No |  |
| children | `node` | - | No |  |
| defaultOpen | `bool` | `false` | No |  |
| disabled | `bool` | `false` | No |  |
| highlightItemOnHover | `bool` | `true` | No |  |
| loopFocus | `bool` | `true` | No |  |
| modal | `bool` | `true` | No |  |
| onOpenChange | `function(open: boolean, eventDetails: object) => void` | - | No |  |
| onOpenChangeComplete | `function(open: boolean) => void` | - | No |  |
| open | `bool` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/mui-material/src/Unstable_Menu2/Menu2.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/mui-material/src/Unstable_Menu2/Menu2.tsx)

# Menu2CheckboxItem API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Menu v2](https://deploy-preview-48823--material-ui.netlify.app/material-ui/react-menu2/)

## Import

```jsx
import MenuCheckboxItem from '@mui/material/Unstable_Menu2CheckboxItem';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| checked | `bool` | - | No |  |
| checkedIcon | `node` | `<CheckBoxIcon fontSize="small" />` | No |  |
| children | `node` | - | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| className | `string` | - | No |  |
| closeOnClick | `bool` | `false` | No |  |
| component | `elementType` | - | No |  |
| defaultChecked | `bool` | `false` | No |  |
| dense | `bool` | `false` | No |  |
| disabled | `bool` | `false` | No |  |
| disableGutters | `bool` | `false` | No |  |
| disableRipple | `bool` | `false` | No |  |
| divider | `bool` | `false` | No |  |
| icon | `node` | `<CheckBoxOutlineBlankIcon fontSize="small" />` | No |  |
| label | `string` | - | No |  |
| nativeButton | `bool` | - | No |  |
| onCheckedChange | `function(checked: boolean, eventDetails: object) => void` | - | No |  |
| slotProps | `{ indicator?: func \| object, root?: func \| object }` | - | No |  |
| slots | `{ indicator?: elementType, root?: elementType }` | - | No |  |
| style | `object` | - | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

> Any other props supplied will be provided to the root element (native element).

## Theme default props

You can use `MuiMenu2CheckboxItem` to change the default props of this component with the theme.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| root | `'div'` | `.MuiMenu2CheckboxItem-root` | The component that renders the root. |
| indicator | `Menu2CheckboxItemIndicator` | `.MuiMenu2CheckboxItem-indicator` | The component that renders the check indicator. |

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| `.Mui-checked` | - | State class applied to the root element if `checked={true}`. |
| - | dense | Styles applied to the root element if `dense={true}`. |
| `.Mui-disabled` | - | State class applied to the root element if `disabled={true}`. |
| - | divider | Styles applied to the root element if `divider={true}`. |
| - | gutters | Styles applied to the root element unless `disableGutters={true}`. |
| - | highlighted | State class applied to the root element if highlighted. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/mui-material/src/Unstable_Menu2CheckboxItem/Menu2CheckboxItem.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/mui-material/src/Unstable_Menu2CheckboxItem/Menu2CheckboxItem.tsx)

# Menu2Group API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Menu v2](https://deploy-preview-48823--material-ui.netlify.app/material-ui/react-menu2/)

## Import

```jsx
import MenuGroup from '@mui/material/Unstable_Menu2Group';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| children | `node` | - | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| className | `string` | - | No |  |
| component | `elementType` | - | No |  |
| slotProps | `{ root?: func \| object }` | - | No |  |
| slots | `{ root?: elementType }` | - | No |  |
| style | `object` | - | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

> Any other props supplied will be provided to the root element (native element).

## Theme default props

You can use `MuiMenu2Group` to change the default props of this component with the theme.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| root | `'div'` | `.MuiMenu2Group-root` | The component that renders the root. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/mui-material/src/Unstable_Menu2Group/Menu2Group.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/mui-material/src/Unstable_Menu2Group/Menu2Group.tsx)

# Menu2GroupLabel API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Menu v2](https://deploy-preview-48823--material-ui.netlify.app/material-ui/react-menu2/)

## Import

```jsx
import MenuGroupLabel from '@mui/material/Unstable_Menu2GroupLabel';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| children | `node` | - | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| className | `string` | - | No |  |
| component | `elementType` | - | No |  |
| slotProps | `{ root?: func \| object }` | - | No |  |
| slots | `{ root?: elementType }` | - | No |  |
| style | `object` | - | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

> Any other props supplied will be provided to the root element (native element).

## Theme default props

You can use `MuiMenu2GroupLabel` to change the default props of this component with the theme.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| root | `ListSubheader` | `.MuiMenu2GroupLabel-root` | The component that renders the root. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/mui-material/src/Unstable_Menu2GroupLabel/Menu2GroupLabel.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/mui-material/src/Unstable_Menu2GroupLabel/Menu2GroupLabel.tsx)

# Menu2Item API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Menu v2](https://deploy-preview-48823--material-ui.netlify.app/material-ui/react-menu2/)

## Import

```jsx
import MenuItem from '@mui/material/Unstable_Menu2Item';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| children | `node` | - | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| className | `string` | - | No |  |
| closeOnClick | `bool` | `true` | No |  |
| component | `elementType` | - | No |  |
| dense | `bool` | `false` | No |  |
| disabled | `bool` | `false` | No |  |
| disableGutters | `bool` | `false` | No |  |
| disableRipple | `bool` | `false` | No |  |
| divider | `bool` | `false` | No |  |
| label | `string` | - | No |  |
| nativeButton | `bool` | - | No |  |
| slotProps | `{ root?: func \| object }` | - | No |  |
| slots | `{ root?: elementType }` | - | No |  |
| style | `object` | - | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

> Any other props supplied will be provided to the root element (native element).

## Theme default props

You can use `MuiMenu2Item` to change the default props of this component with the theme.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| root | `'div'` | `.MuiMenu2Item-root` | The component that renders the root. |

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | dense | Styles applied to the root element if `dense={true}`. |
| `.Mui-disabled` | - | State class applied to the root element if `disabled={true}`. |
| - | divider | Styles applied to the root element if `divider={true}`. |
| - | gutters | Styles applied to the root element unless `disableGutters={true}`. |
| - | highlighted | State class applied to the root element if highlighted. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/mui-material/src/Unstable_Menu2Item/Menu2Item.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/mui-material/src/Unstable_Menu2Item/Menu2Item.tsx)

# Menu2LinkItem API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Menu v2](https://deploy-preview-48823--material-ui.netlify.app/material-ui/react-menu2/)

## Import

```jsx
import MenuLinkItem from '@mui/material/Unstable_Menu2LinkItem';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| children | `node` | - | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| className | `string` | - | No |  |
| closeOnClick | `bool` | `false` | No |  |
| component | `elementType` | - | No |  |
| dense | `bool` | `false` | No |  |
| disableGutters | `bool` | `false` | No |  |
| disableRipple | `bool` | `false` | No |  |
| divider | `bool` | `false` | No |  |
| href | `string` | - | No |  |
| label | `string` | - | No |  |
| slotProps | `{ root?: func \| object }` | - | No |  |
| slots | `{ root?: elementType }` | - | No |  |
| style | `object` | - | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |

> **Note**: The `ref` is forwarded to the root element (HTMLAnchorElement).

> Any other props supplied will be provided to the root element (native element).

## Theme default props

You can use `MuiMenu2LinkItem` to change the default props of this component with the theme.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| root | `'a'` | `.MuiMenu2LinkItem-root` | The component that renders the root. |

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | dense | Styles applied to the root element if `dense={true}`. |
| `.Mui-disabled` | - | State class applied to the root element if `disabled={true}`. |
| - | divider | Styles applied to the root element if `divider={true}`. |
| - | gutters | Styles applied to the root element unless `disableGutters={true}`. |
| - | highlighted | State class applied to the root element if highlighted. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/mui-material/src/Unstable_Menu2LinkItem/Menu2LinkItem.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/mui-material/src/Unstable_Menu2LinkItem/Menu2LinkItem.tsx)

# Menu2Popup API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Menu v2](https://deploy-preview-48823--material-ui.netlify.app/material-ui/react-menu2/)

## Import

```jsx
import MenuPopup from '@mui/material/Unstable_Menu2Popup';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| align | `'center' \| 'end' \| 'start'` | `'start'` | No |  |
| alignOffset | `func \| number` | `0` | No |  |
| anchor | `HTML element \| object \| func` | - | No |  |
| children | `node` | - | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| className | `string` | - | No |  |
| collisionAvoidance | `{ align?: 'flip' \| 'none' \| 'shift', fallbackAxisSide?: 'end' \| 'none' \| 'start', side?: 'flip' \| 'none' } \| { align?: 'none' \| 'shift', fallbackAxisSide?: 'end' \| 'none' \| 'start', side?: 'none' \| 'shift' }` | - | No |  |
| collisionBoundary | `'clipping-ancestors' \| HTML element \| Array<HTML element> \| { height: number, width: number, x: number, y: number }` | `'clipping-ancestors'` | No |  |
| collisionPadding | `number \| { bottom?: number, left?: number, right?: number, top?: number }` | `5` | No |  |
| container | `HTML element \| object \| func` | - | No |  |
| disableAnchorTracking | `bool` | `false` | No |  |
| elevation | `number` | `8` | No |  |
| finalFocus | `func \| { current?: HTML element } \| bool` | - | No |  |
| keepMounted | `bool` | `false` | No |  |
| positionMethod | `'absolute' \| 'fixed'` | `'absolute'` | No |  |
| side | `'bottom' \| 'inline-end' \| 'inline-start' \| 'left' \| 'right' \| 'top'` | `'bottom'` | No |  |
| sideOffset | `func \| number` | `0` | No |  |
| slotProps | `{ backdrop?: func \| object, list?: func \| object, portal?: func \| object, positioner?: func \| object, root?: func \| object, transition?: func \| object }` | - | No |  |
| slots | `{ backdrop?: elementType, list?: elementType, portal?: elementType, positioner?: elementType, root?: elementType, transition?: elementType }` | - | No |  |
| sticky | `bool` | `false` | No |  |
| style | `object` | - | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| transitionDuration | `'auto' \| number \| { appear?: number, enter?: number, exit?: number }` | `'auto'` | No |  |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

> Any other props supplied will be provided to the root element (native element).

## Theme default props

You can use `MuiMenu2Popup` to change the default props of this component with the theme.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| portal | `'div'` | `.MuiMenu2Popup-portal` | The component used for the portal element, which contains the menu and its backdrops. |
| positioner | `'div'` | `.MuiMenu2Popup-positioner` | The component used to position the menu surface. |
| backdrop | `undefined` | `.MuiMenu2Popup-backdrop` | The component used for the optional backdrop beneath the menu.
Providing this slot or `slotProps.backdrop` renders it.
Set to `null` to omit it, including when configured in the theme. |
| root | `Paper` | `.MuiMenu2Popup-root` | The component used for the menu surface. The popup renders as this element. |
| transition | `Grow` | - | The transition applied to the popup element. Set to null to use CSS animations instead. |
| list | `List` | `.MuiMenu2Popup-list` | The component used for the presentational list wrapper. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/mui-material/src/Unstable_Menu2Popup/Menu2Popup.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/mui-material/src/Unstable_Menu2Popup/Menu2Popup.tsx)

# Menu2RadioGroup API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Menu v2](https://deploy-preview-48823--material-ui.netlify.app/material-ui/react-menu2/)

## Import

```jsx
import MenuRadioGroup from '@mui/material/Unstable_Menu2RadioGroup';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| children | `node` | - | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| className | `string` | - | No |  |
| component | `elementType` | - | No |  |
| defaultValue | `any` | - | No |  |
| disabled | `bool` | `false` | No |  |
| onValueChange | `function(value: any, eventDetails: object) => void` | - | No |  |
| slotProps | `{ root?: func \| object }` | - | No |  |
| slots | `{ root?: elementType }` | - | No |  |
| style | `object` | - | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| value | `any` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

> Any other props supplied will be provided to the root element (native element).

## Theme default props

You can use `MuiMenu2RadioGroup` to change the default props of this component with the theme.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| root | `'div'` | `.MuiMenu2RadioGroup-root` | The component that renders the root. |

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| `.Mui-disabled` | - | State class applied to the root element if `disabled={true}`. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/mui-material/src/Unstable_Menu2RadioGroup/Menu2RadioGroup.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/mui-material/src/Unstable_Menu2RadioGroup/Menu2RadioGroup.tsx)

# Menu2RadioItem API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Menu v2](https://deploy-preview-48823--material-ui.netlify.app/material-ui/react-menu2/)

## Import

```jsx
import MenuRadioItem from '@mui/material/Unstable_Menu2RadioItem';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| value | `any` | - | Yes |  |
| checkedIcon | `node` | `<RadioButtonIcon checked fontSize="small" />` | No |  |
| children | `node` | - | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| className | `string` | - | No |  |
| closeOnClick | `bool` | `false` | No |  |
| component | `elementType` | - | No |  |
| dense | `bool` | `false` | No |  |
| disabled | `bool` | `false` | No |  |
| disableGutters | `bool` | `false` | No |  |
| disableRipple | `bool` | `false` | No |  |
| divider | `bool` | `false` | No |  |
| icon | `node` | `<RadioButtonIcon fontSize="small" />` | No |  |
| label | `string` | - | No |  |
| nativeButton | `bool` | - | No |  |
| slotProps | `{ indicator?: func \| object, root?: func \| object }` | - | No |  |
| slots | `{ indicator?: elementType, root?: elementType }` | - | No |  |
| style | `object` | - | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

> Any other props supplied will be provided to the root element (native element).

## Theme default props

You can use `MuiMenu2RadioItem` to change the default props of this component with the theme.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| root | `'div'` | `.MuiMenu2RadioItem-root` | The component that renders the root. |
| indicator | `Menu2RadioItemIndicator` | `.MuiMenu2RadioItem-indicator` | The component that renders the check indicator. |

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| `.Mui-checked` | - | State class applied to the root element if `checked={true}`. |
| - | dense | Styles applied to the root element if `dense={true}`. |
| `.Mui-disabled` | - | State class applied to the root element if `disabled={true}`. |
| - | divider | Styles applied to the root element if `divider={true}`. |
| - | gutters | Styles applied to the root element unless `disableGutters={true}`. |
| - | highlighted | State class applied to the root element if highlighted. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/mui-material/src/Unstable_Menu2RadioItem/Menu2RadioItem.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/mui-material/src/Unstable_Menu2RadioItem/Menu2RadioItem.tsx)

# Menu2Separator API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Menu v2](https://deploy-preview-48823--material-ui.netlify.app/material-ui/react-menu2/)

## Import

```jsx
import MenuSeparator from '@mui/material/Unstable_Menu2Separator';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| className | `string` | - | No |  |
| component | `elementType` | - | No |  |
| orientation | `'horizontal' \| 'vertical'` | `'horizontal'` | No |  |
| slotProps | `{ root?: func \| object }` | - | No |  |
| slots | `{ root?: elementType }` | - | No |  |
| style | `object` | - | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

> Any other props supplied will be provided to the root element (native element).

## Theme default props

You can use `MuiMenu2Separator` to change the default props of this component with the theme.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| root | `Divider` | `.MuiMenu2Separator-root` | The component that renders the root. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/mui-material/src/Unstable_Menu2Separator/Menu2Separator.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/mui-material/src/Unstable_Menu2Separator/Menu2Separator.tsx)

# Menu2Submenu API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Menu v2](https://deploy-preview-48823--material-ui.netlify.app/material-ui/react-menu2/)

## Import

```jsx
import MenuSubmenu from '@mui/material/Unstable_Menu2Submenu';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| actionsRef | `{ current?: { close: func, unmount: func } }` | - | No |  |
| children | `node` | - | No |  |
| closeParentOnEsc | `bool` | `false` | No |  |
| defaultOpen | `bool` | `false` | No |  |
| highlightItemOnHover | `bool` | `true` | No |  |
| loopFocus | `bool` | `true` | No |  |
| onOpenChange | `function(open: boolean, eventDetails: object) => void` | - | No |  |
| onOpenChangeComplete | `function(open: boolean) => void` | - | No |  |
| open | `bool` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/mui-material/src/Unstable_Menu2Submenu/Menu2Submenu.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/mui-material/src/Unstable_Menu2Submenu/Menu2Submenu.tsx)

# Menu2SubmenuPopup API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Menu v2](https://deploy-preview-48823--material-ui.netlify.app/material-ui/react-menu2/)

## Import

```jsx
import MenuSubmenuPopup from '@mui/material/Unstable_Menu2SubmenuPopup';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| align | `'center' \| 'end' \| 'start'` | `'start'` | No |  |
| alignOffset | `func \| number` | `-8` | No |  |
| anchor | `HTML element \| object \| func` | - | No |  |
| children | `node` | - | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| className | `string` | - | No |  |
| collisionAvoidance | `{ align?: 'flip' \| 'none' \| 'shift', fallbackAxisSide?: 'end' \| 'none' \| 'start', side?: 'flip' \| 'none' } \| { align?: 'none' \| 'shift', fallbackAxisSide?: 'end' \| 'none' \| 'start', side?: 'none' \| 'shift' }` | - | No |  |
| collisionBoundary | `'clipping-ancestors' \| HTML element \| Array<HTML element> \| { height: number, width: number, x: number, y: number }` | `'clipping-ancestors'` | No |  |
| collisionPadding | `number \| { bottom?: number, left?: number, right?: number, top?: number }` | `5` | No |  |
| container | `HTML element \| object \| func` | - | No |  |
| disableAnchorTracking | `bool` | `false` | No |  |
| elevation | `number` | `8` | No |  |
| finalFocus | `func \| { current?: HTML element } \| bool` | - | No |  |
| keepMounted | `bool` | `false` | No |  |
| positionMethod | `'absolute' \| 'fixed'` | `'absolute'` | No |  |
| side | `'bottom' \| 'inline-end' \| 'inline-start' \| 'left' \| 'right' \| 'top'` | `'inline-end'` | No |  |
| sideOffset | `func \| number` | `-4` | No |  |
| slotProps | `{ list?: func \| object, portal?: func \| object, positioner?: func \| object, root?: func \| object, transition?: func \| object }` | - | No |  |
| slots | `{ list?: elementType, portal?: elementType, positioner?: elementType, root?: elementType, transition?: elementType }` | - | No |  |
| sticky | `bool` | `false` | No |  |
| style | `object` | - | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| transitionDuration | `'auto' \| number \| { appear?: number, enter?: number, exit?: number }` | `'auto'` | No |  |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

> Any other props supplied will be provided to the root element (native element).

## Theme default props

You can use `MuiMenu2SubmenuPopup` to change the default props of this component with the theme.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| portal | `'div'` | `.MuiMenu2SubmenuPopup-portal` | The component used for the portal element, which contains the menu and its backdrops. |
| positioner | `'div'` | `.MuiMenu2SubmenuPopup-positioner` | The component used to position the menu surface. |
| root | `Paper` | `.MuiMenu2SubmenuPopup-root` | The component used for the menu surface. The popup renders as this element. |
| transition | `Grow` | - | The transition applied to the popup element. Set to null to use CSS animations instead. |
| list | `List` | `.MuiMenu2SubmenuPopup-list` | The component used for the presentational list wrapper. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/mui-material/src/Unstable_Menu2SubmenuPopup/Menu2SubmenuPopup.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/mui-material/src/Unstable_Menu2SubmenuPopup/Menu2SubmenuPopup.tsx)

# Menu2SubmenuTrigger API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Menu v2](https://deploy-preview-48823--material-ui.netlify.app/material-ui/react-menu2/)

## Import

```jsx
import MenuSubmenuTrigger from '@mui/material/Unstable_Menu2SubmenuTrigger';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| children | `node` | - | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| className | `string` | - | No |  |
| closeDelay | `number` | `0` | No |  |
| component | `elementType` | - | No |  |
| delay | `number` | `100` | No |  |
| dense | `bool` | `false` | No |  |
| disabled | `bool` | `false` | No |  |
| disableGutters | `bool` | `false` | No |  |
| disableRipple | `bool` | `false` | No |  |
| divider | `bool` | `false` | No |  |
| label | `string` | - | No |  |
| nativeButton | `bool` | - | No |  |
| openOnHover | `bool` | `true` | No |  |
| slotProps | `{ indicator?: func \| object, root?: func \| object }` | - | No |  |
| slots | `{ indicator?: elementType, root?: elementType }` | - | No |  |
| style | `object` | - | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

> Any other props supplied will be provided to the root element (native element).

## Theme default props

You can use `MuiMenu2SubmenuTrigger` to change the default props of this component with the theme.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| root | `'div'` | `.MuiMenu2SubmenuTrigger-root` | The component that renders the root. |
| indicator | `'span'` | `.MuiMenu2SubmenuTrigger-indicator` | The component that renders the submenu indicator.
Set to `null` to omit the indicator. Custom indicators are not mirrored in RTL. |

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | dense | Styles applied to the root element if `dense={true}`. |
| `.Mui-disabled` | - | State class applied to the root element if `disabled={true}`. |
| - | divider | Styles applied to the root element if `divider={true}`. |
| - | gutters | Styles applied to the root element unless `disableGutters={true}`. |
| - | highlighted | State class applied to the root element if highlighted. |
| `.Mui-open` | - | State class applied to the root element if the submenu is open. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/mui-material/src/Unstable_Menu2SubmenuTrigger/Menu2SubmenuTrigger.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/mui-material/src/Unstable_Menu2SubmenuTrigger/Menu2SubmenuTrigger.tsx)

# Menu2Trigger API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Menu v2](https://deploy-preview-48823--material-ui.netlify.app/material-ui/react-menu2/)

## Import

```jsx
import MenuTrigger from '@mui/material/Unstable_Menu2Trigger';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| children | `element` | - | Yes |  |
| closeDelay | `number` | `0` | No |  |
| delay | `number` | `100` | No |  |
| disabled | `bool` | `false` | No |  |
| nativeButton | `bool` | `true` | No |  |
| openOnHover | `bool` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (HTMLButtonElement).

> Any other props supplied will be provided to the root element (native element).

## Theme default props

You can use `MuiMenu2Trigger` to change the default props of this component with the theme.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/mui-material/src/Unstable_Menu2Trigger/Menu2Trigger.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/mui-material/src/Unstable_Menu2Trigger/Menu2Trigger.tsx)