Menu
A list of actions in a dropdown, enhanced with keyboard navigation.
A list of actions in a dropdown, enhanced with keyboard navigation.
import {
Menu,
MenuTrigger,
MenuPopup,
MenuItem,
MenuGroup,
MenuGroupLabel,
MenuSeparator,
MenuCheckboxItem,
MenuRadioGroup,
MenuRadioItem,
MenuSub,
MenuSubTrigger,
MenuSubPopup,
} from "@/components/ui/menu";
<Menu>
<MenuTrigger />
<MenuPopup>
<MenuItem />
<MenuSeparator />
<MenuGroup>
<MenuGroupLabel />
<MenuItem />
</MenuGroup>
<MenuCheckboxItem />
<MenuRadioGroup>
<MenuRadioItem />
</MenuRadioGroup>
<MenuSub>
<MenuSubTrigger />
<MenuSubPopup />
</MenuSub>
</MenuPopup>
</Menu>;You can pass showArrow as true to MenuPopup to show arrow on menu. By default, it is false.
Tip: If you want to use arrow on menu, make sure to keep sideOffset not less than 8.
You can pass side to MenuPopup to change the side of the menu. By default, it is bottom.
By default, Menu opens when the trigger is clicked. You can pass openOnHover to MenuTrigger to open it when the trigger is hovered.
By default, clicking on a checkbox item will not close the menu. You can pass closeOnClick to MenuCheckboxItem to close the menu when the checkbox item is clicked.
<MenuCheckboxItem
closeOnClick
>
<span>Checkbox Item</span>
</MenuCheckboxItem>By default, clicking on a radio item will not close the menu. You can pass closeOnClick to MenuRadioItem to close the menu when the radio item is clicked.
<MenuRadioItem
closeOnClick
>
<span>Radio Item</span>
</MenuRadioItem>You can use custom active icon for the radio group by passing the activeIcon prop to the MenuRadioGroup component. See the example below.
Use the render prop to compose a menu item with an anchor element.
<MenuItem
render={<a href="/projects">Go to Projects</a>}
/>In order to open a dialog using a menu, control the dialog state and open it imperatively using the onClick handler on the menu item.
import * as React from "react";
import { Dialog } from "@base-ui/react/dialog";
import { Menu } from "@base-ui/react/menu";
function ExampleMenu() {
const [dialogOpen, setDialogOpen] = React.useState(false);
return (
<React.Fragment>
<Menu.Root>
<Menu.Trigger>Open menu</Menu.Trigger>
<Menu.Portal>
<Menu.Positioner>
<Menu.Popup>
{/* Open the dialog when the menu item is clicked */}
<Menu.Item onClick={() => setDialogOpen(true)}>
Open dialog
</Menu.Item>
</Menu.Popup>
</Menu.Positioner>
</Menu.Portal>
</Menu.Root>
{/* Control the dialog state */}
<Dialog.Root open={dialogOpen} onOpenChange={setDialogOpen}>
<Dialog.Portal>
<Dialog.Backdrop />
<Dialog.Popup>{/* Rest of the dialog */}</Dialog.Popup>
</Dialog.Portal>
</Dialog.Root>
</React.Fragment>
);
}You can see the full example here.
You can pass animationPreset to MenuPopup to change the animation of the popup. By default, it is scale.