Skip to content

Component · popover + menu

Menu

A dropdown of actions.

Install

npx @lazizbekio/mitame add menu

Usage

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

PropTypeDefaultDescription
Menu open / onOpenChangeboolean / (open) => void—Optional control.
MenuContent placementPlacement"bottom-start"Flips when there is no room.
MenuItem onSelect() => void—Runs, then the menu closes.
MenuItem disabled / variant / iconboolean / "default" | "danger" / ReactNode—Item options.
MenuSeparator / MenuLabelHTMLAttributes<div>—Grouping.

Keyboard

KeyDoes
↓ / ↑ on the buttonOpen
↓ ↑ Home EndMove
Type lettersJump
Enter / SpaceRun
EscClose

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.