# Menu (/docs/menu)
## API Reference [#api-reference]
## Basic [#basic]
`MenuContent` renders the portal and positioner internally, so the public composition only needs the trigger, content, optional arrow, and menu items.
{`
import {
Button,
Menu,
MenuTrigger,
MenuTriggerIcon,
MenuContent,
MenuItem,
MenuSeparator,
} from "moduix";
export function MenuDemo() {
return (
);
}
`}
{(context) => }
{(context) => }
## Anatomy [#anatomy]
Menu is composed from a trigger and a popup content layer. Keep interactive items and nested branches
inside `MenuContent` so roving focus, keyboard navigation, and close behavior stay managed by the root.
```text
Menu
├─ MenuTrigger
│ └─ MenuTriggerIcon
└─ MenuContent
├─ MenuArrow
├─ MenuItem
├─ MenuSeparator
└─ MenuSubmenu
├─ MenuSubmenuTrigger
│ └─ MenuSubmenuTriggerIcon
└─ MenuSubmenuContent
└─ MenuItem
```
```tsx
```
| Part | Role |
| ----------------------- | -------------------------------------------------------------------------------------------------------- |
| `Menu` | Root state machine. Handles open state, focus management, and close interactions. |
| `MenuTrigger` | Control that opens and closes the menu. Accepts trigger props like `openOnHover`, `delay`, and `handle`. |
| `MenuTriggerIcon` | Optional trigger indicator. Renders the default icon or your custom icon as children. |
| `MenuContent` | Popup container for items. Accepts positioning props and renders service slots internally. |
| `MenuArrow` | Optional visual pointer from popup to trigger. |
| `MenuItem` | Action row. Supports disabled state and `closeOnClick` behavior. |
| `MenuLinkItem` | Item variant for navigation links while preserving menu behavior. |
| `MenuSeparator` | Visual divider between related item groups. |
| `MenuSubmenu*` | Nested branch for secondary actions (`Trigger`, `TriggerIcon`, and `Content`). |
| `MenuGroup*` / controls | Optional structured controls: labels, radio groups/items, checkbox items, and indicator slots. |
`MenuContent` renders the Base UI portal, positioner, optional backdrop, optional viewport,
and popup internally. In most cases, keep those service slots hidden and style visible parts
such as trigger, items, separators, and arrow. Use `classNames` for service-slot classes and
`slotProps` only when you need to pass non-class props to `portal`, `backdrop`, `positioner`,
`arrow`, or `viewport`.
## Composition [#composition]
Use `Menu` for root state and behavior props such as `open`, `defaultOpen`,
`onOpenChange`, and `handle`. Add `withViewport` only when you need Base UI content transitions for
menus shared by multiple detached triggers.
`className` styles the visible popup. `classNames` styles the internal service slots hidden from
the default composition. `MenuContent` forwards Base UI popup props and accepts positioner props
such as `side`, `sideOffset`, `align`, `alignOffset`, `arrowPadding`, `anchor`,
`collisionAvoidance`, `collisionBoundary`, `collisionPadding`, `sticky`, `positionMethod`,
and `disableAnchorTracking` directly. Use `container`, `withBackdrop`, and `withViewport` for
common service-slot behavior, and use `slotProps` for the rare cases that need lower-level
Base UI portal, backdrop, positioner, arrow, or viewport props. Arrow is enabled by default;
set `withArrow={false}` to disable it:
```tsx
```
## Examples [#examples]
### Without Arrow [#without-arrow]
Set `withArrow={false}` when the popup should appear without a pointer.
{`
import {
Button,
Menu,
MenuTrigger,
MenuTriggerIcon,
MenuContent,
MenuItem,
MenuSeparator,
} from "moduix";
export function WithoutArrowMenu() {
return (
);
}
`}
### Groups And Controls [#groups-and-controls]
Use groups, radio items, and checkbox items when the menu changes application state.
{`
import {
Button,
Menu,
MenuTrigger,
MenuTriggerIcon,
MenuContent,
MenuGroup,
MenuGroupLabel,
MenuRadioGroup,
MenuRadioItem,
MenuRadioItemIndicator,
MenuItemText,
MenuSeparator,
MenuCheckboxItem,
MenuCheckboxItemIndicator,
} from "moduix";
import { useState } from "react";
export function GroupsAndControlsMenu() {
const [sortBy, setSortBy] = useState("date");
const [showMinimap, setShowMinimap] = useState(true);
return (
);
}
`}
### Shortcuts [#shortcuts]
Use `MenuItemShortcut` for shortcut text that aligns to the end of each item.
{`
import {
Button,
Menu,
MenuTrigger,
MenuTriggerIcon,
MenuContent,
MenuItem,
MenuItemShortcut,
MenuSeparator,
} from "moduix";
export function ShortcutsMenu() {
return (
);
}
`}
### Indicator Right With Icon [#indicator-right-with-icon]
Use `indicator="end"` to align checkbox and radio indicators to the end. Text and icon slots accept custom content and `className`.
{`
import {
Button,
Menu,
MenuTrigger,
MenuTriggerIcon,
MenuContent,
MenuCheckboxItem,
MenuItemText,
MenuItemTextContent,
MenuItemTextIcon,
InfoIcon,
MenuItemTextLabel,
MenuCheckboxItemIndicator,
} from "moduix";
import { useState } from "react";
export function IndicatorRightMenu() {
const [showMinimap, setShowMinimap] = useState(true);
return (
);
}
`}
### Nested [#nested]
Use `MenuSubmenu` with `MenuSubmenuTrigger` and `MenuSubmenuContent` for nested actions.
{`
import {
Button,
Menu,
MenuTrigger,
MenuTriggerIcon,
MenuContent,
MenuItem,
MenuSubmenu,
MenuSubmenuTrigger,
MenuSubmenuTriggerIcon,
MenuSubmenuContent,
MenuSeparator,
} from "moduix";
export function NestedMenu() {
return (
);
}
`}
### Open On Hover [#open-on-hover]
Use `openOnHover` when the trigger should behave like a hover menu while keeping keyboard support.
{`
import {
Button,
Menu,
MenuTrigger,
MenuTriggerIcon,
MenuContent,
MenuItem,
MenuSeparator,
} from "moduix";
export function OpenOnHoverMenu() {
return (
);
}
`}
### Positioned With Backdrop [#positioned-with-backdrop]
Use `side`, `align`, and offset props on `MenuContent` to position the popup. Add `withBackdrop` when the menu should render an internal backdrop; style internal service slots through `classNames`.
{`
import {
Button,
Menu,
MenuTrigger,
MenuTriggerIcon,
MenuContent,
MenuItem,
MenuSeparator,
} from "moduix";
export function PositionedWithBackdropMenu() {
return (
);
}
`}
### Open Alert Dialog [#open-alert-dialog]
Open a dialog from a menu item by closing the menu on click and updating dialog state in the item handler.
{`
import {
Button,
Menu,
MenuTrigger,
MenuTriggerIcon,
MenuContent,
MenuItem,
MenuSeparator,
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from "moduix";
import { useState, Fragment } from "react";
export function OpenAlertDialogMenu() {
const [dialogOpen, setDialogOpen] = useState(false);
return (
Delete project?
This action cannot be undone and will permanently remove all environments.
CancelDelete
);
}
`}
### Link Items [#link-items]
Use `MenuLinkItem` for navigation items that should render as links.
{`
import {
Button,
Menu,
MenuTrigger,
MenuTriggerIcon,
MenuContent,
MenuLinkItem,
MenuSeparator,
MenuItem,
} from "moduix";
export function LinkItemsMenu() {
return (
);
}
`}
### Detached Trigger [#detached-trigger]
Use `createMenuHandle` when the trigger and root need to be rendered in different places.
{`
import {
Button,
createMenuHandle,
MenuTrigger,
MenuTriggerIcon,
Menu,
MenuContent,
MenuItem,
MenuSeparator,
} from "moduix";
import { useMemo, Fragment } from "react";
export function DetachedTriggerMenu() {
const menuHandle = useMemo(() => createMenuHandle(), []);
return (