Menu

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @columbus/menu

UsageCopy Anchor Link

import {
  Menu,
  MenuItem,
  MenuPopup,
  MenuSeparator,
  MenuTrigger,
} from "@/components/ui/menu";

<Menu>
  <MenuTrigger render={<Button variant="outline" />}>Options</MenuTrigger>
  <MenuPopup>
    <MenuItem onClick={rename}>Rename</MenuItem>
    <MenuItem onClick={duplicate}>Duplicate</MenuItem>
    <MenuSeparator />
    <MenuItem variant="destructive">Delete</MenuItem>
  </MenuPopup>
</Menu>;

The menu supports the keyboard out of the box: arrow keys move between items, Home and End jump to the first and last, typing a letter jumps to a matching item, Enter picks it, and Escape closes the menu. Mark icons with aria-hidden="true" so they aren't read out.

When some items have icons and others don't, add inset to the ones without so the labels line up.

Checkbox itemsCopy Anchor Link

MenuCheckboxItem toggles a setting without closing the menu. variant="switch" shows a switch instead of a check mark.

Radio groupCopy Anchor Link

MenuRadioGroup picks one option from a list. Put it in a MenuGroup with a MenuGroupLabel so the group has a name.

Submenus and linksCopy Anchor Link

MenuSub nests a menu; open it with hover, click, or the right arrow key. MenuLinkItem renders a real link. To use your router's link, pass it with render, like render={<Link href="/docs" />}.

API referenceCopy Anchor Link

Built on Base UI Menu. Every part accepts the props of its Base UI counterpart. The parts are also exported with DropdownMenu* names, like DropdownMenuContent for MenuPopup.

MenuPopupCopy Anchor Link

MenuItem and MenuLinkItemCopy Anchor Link

MenuCheckboxItemCopy Anchor Link

MenuGroupLabel and MenuSubTriggerCopy Anchor Link

MenuSubPopupCopy Anchor Link

MenuShortcut renders a <kbd> for a keyboard shortcut hint at the end of an item.