Component · popover + menu
Menu
A dropdown of actions.
Project
Rename
Duplicate
Share…
Delete
Install
npx @lazizbekio/mitame add menuUsage
import { MoreIcon } from "@/components/mitame/icons/more";
import { Menu, MenuContent, MenuItem, MenuLabel, MenuSeparator, MenuTrigger } from "@/components/mitame/ui/menu";
export default function MenuDemo() {
return (
<Menu>
<MenuTrigger aria-label="Project actions">
<MoreIcon /> Actions
</MenuTrigger>
<MenuContent>
<MenuLabel>Project</MenuLabel>
<MenuItem onSelect={() => console.log("rename")}>Rename</MenuItem>
<MenuItem onSelect={() => console.log("duplicate")}>Duplicate</MenuItem>
<MenuItem disabled>Share…</MenuItem>
<MenuSeparator />
<MenuItem variant="danger" onSelect={() => console.log("delete")}>
Delete
</MenuItem>
</MenuContent>
</Menu>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
Menu open / onOpenChange | boolean / (open) => void | — | Optional control. |
MenuContent placement | Placement | "bottom-start" | Flips when there is no room. |
MenuItem onSelect | () => void | — | Runs, then the menu closes. |
MenuItem disabled / variant / icon | boolean / "default" | "danger" / ReactNode | — | Item options. |
MenuSeparator / MenuLabel | HTMLAttributes<div> | — | Grouping. |
Keyboard
| Key | Does |
|---|---|
↓ / ↑ on the button | Open |
↓ ↑ Home End | Move |
Type letters | Jump |
Enter / Space | Run |
Esc | Close |
Styling
Every part has a data-slot starting with menu, and state lives in data-state,data-variant and friends. Pass any class to override; theme styles sit in a lower CSS layer, so yours win. See Theming.