{
"schemaVersion": 1,
"target": "react",
"name": "dropdown-menu",
"version": "0.2.0",
"category": "core",
"title": "Dropdown Menu",
"description": "A menu of actions opened from a button, built on Base UI Menu, with groups, separators, shortcuts, icons, and disabled items.",
"tags": [
"overlay",
"menu",
"actions",
"base-ui"
],
"requires": {
"projectTypes": [
"next",
"vite-react"
],
"styling": "tailwind-v4"
},
"npmDependencies": {
"@base-ui/react": "^1.9.0"
},
"registryDependencies": [],
"docsPath": "/components/dropdown-menu",
"props": [
{
"name": "DropdownMenu open / defaultOpen / onOpenChange",
"type": "boolean / boolean / (open, details) => void",
"description": "Root state. Leave open unset for an uncontrolled menu."
},
{
"name": "DropdownMenu loopFocus",
"type": "boolean",
"default": "true",
"description": "Wraps arrow-key focus from the last item to the first."
},
{
"name": "DropdownMenu modal",
"type": "boolean",
"default": "true",
"description": "Locks page scroll and blocks outside pointer interaction while open."
},
{
"name": "DropdownMenuTrigger",
"type": "Base UI Menu.Trigger props",
"description": "Unstyled button that opens the menu. Pass className, or render={}. Sets data-popup-open while open."
},
{
"name": "DropdownMenuContent side / align",
"type": "Side / \"start\" | \"center\" | \"end\"",
"default": "\"bottom\" / \"start\"",
"description": "Placement against the trigger. Flips when there is not enough room."
},
{
"name": "DropdownMenuContent sideOffset / alignOffset",
"type": "number",
"default": "6 / 0",
"description": "Gap from the trigger and shift along its edge, in pixels."
},
{
"name": "DropdownMenuItem onClick",
"type": "(event) => void",
"description": "Runs the action. The menu closes afterwards unless closeOnClick is false."
},
{
"name": "DropdownMenuItem disabled",
"type": "boolean",
"default": "false",
"description": "Keeps the item visible and reachable with the arrow keys, but ignores clicks and Enter."
},
{
"name": "DropdownMenuItem destructive",
"type": "boolean",
"default": "false",
"description": "Red styling for delete-style actions."
},
{
"name": "DropdownMenuItem label",
"type": "string",
"description": "Text used for typeahead when the item content is not plain text."
},
{
"name": "DropdownMenuGroup / DropdownMenuLabel",
"type": "Base UI Menu.Group / Menu.GroupLabel props",
"description": "Groups items; the label must sit inside the group it names."
},
{
"name": "DropdownMenuSeparator",
"type": "Base UI Separator props",
"description": "Divider between groups."
},
{
"name": "DropdownMenuShortcut",
"type": "ComponentProps<\"span\">",
"description": "Right-aligned keyboard shortcut hint inside an item, set in mono."
}
],
"accessibility": [
"The trigger sets aria-haspopup and aria-expanded; the panel has role=\"menu\" and items have role=\"menuitem\".",
"Enter, Space, or ArrowDown on the trigger opens the menu with focus on the first item; Arrow keys, Home, and End move between items.",
"Typing a letter jumps to the next item starting with it (typeahead).",
"Disabled items set aria-disabled and stay reachable with the arrow keys, so screen reader users know the action exists; activating them does nothing.",
"Escape or choosing an item closes the menu and returns focus to the trigger.",
"Groups are labelled with aria-labelledby from DropdownMenuLabel; separators have role=\"separator\".",
"The highlighted item changes background and text color instantly (no animated highlight, so arrow-key movement never lags). The panel grows from the trigger in 160ms and fades out in 110ms; with reduced motion the transitions are removed."
],
"states": [
"closed",
"open"
],
"files": [
{
"path": "ui/dropdown-menu.tsx",
"content": "\"use client\";\n\nimport { Menu as BaseMenu } from \"@base-ui/react/menu\";\nimport type { ComponentProps } from \"react\";\n\ntype ClassName = string | ((state: State) => string | undefined) | undefined;\n\nfunction cx(...classes: (string | false | null | undefined)[]) {\n return classes.filter(Boolean).join(\" \");\n}\n\n/** Prepends base classes while keeping Base UI's state-function form of className working. */\nfunction withBase(base: string, className: ClassName) {\n return typeof className === \"function\" ? (state: State) => cx(base, className(state)) : cx(base, className);\n}\n\n/** Groups the menu parts and holds its open state. Pass `open`/`onOpenChange` to control it. */\nexport const DropdownMenu = BaseMenu.Root;\n\n/** A button that opens the menu. Unstyled; pass `className`, or `render={}` to reuse your button. */\nexport const DropdownMenuTrigger = BaseMenu.Trigger;\n\n/** Groups related items. Put a DropdownMenuLabel inside to name the group. */\nexport const DropdownMenuGroup = BaseMenu.Group;\n\ntype PositionerProps = BaseMenu.Positioner.Props;\n\nexport interface DropdownMenuContentProps extends BaseMenu.Popup.Props {\n /** Side of the trigger to place the menu on. Flips when there is not enough room. */\n side?: PositionerProps[\"side\"];\n /** Alignment against the trigger on the chosen side. */\n align?: PositionerProps[\"align\"];\n /** Gap between the trigger and the menu, in pixels. */\n sideOffset?: PositionerProps[\"sideOffset\"];\n /** Shift along the trigger edge, in pixels. */\n alignOffset?: PositionerProps[\"alignOffset\"];\n /** Classes for the positioner wrapper, for example to change the z-index. */\n positionerClassName?: string;\n /** Element to portal into. Defaults to `document.body`. */\n container?: BaseMenu.Portal.Props[\"container\"];\n}\n\n/** The menu panel, rendered in a portal and positioned against the trigger. */\nexport function DropdownMenuContent({\n side = \"bottom\",\n align = \"start\",\n sideOffset = 6,\n alignOffset = 0,\n positionerClassName,\n container,\n className,\n ...props\n}: DropdownMenuContentProps) {\n return (\n \n \n \n \n \n );\n}\n\nexport interface DropdownMenuItemProps extends BaseMenu.Item.Props {\n /** Styles the item for actions that delete or cannot be undone. */\n destructive?: boolean;\n}\n\n/**\n * An action in the menu. Use `onClick` to handle it; `disabled` keeps it visible but skips it.\n * The highlight follows the pointer and arrow keys instantly; menus are used too often to animate it.\n */\nexport function DropdownMenuItem({ destructive = false, className, ...props }: DropdownMenuItemProps) {\n return (\n \n );\n}\n\n/** Names a DropdownMenuGroup. Must be rendered inside the group it labels. */\nexport function DropdownMenuLabel({ className, ...props }: BaseMenu.GroupLabel.Props) {\n return (\n \n );\n}\n\n/** A divider between groups of items. */\nexport function DropdownMenuSeparator({ className, ...props }: ComponentProps) {\n return (\n \n );\n}\n\n/** A keyboard shortcut hint shown at the end of an item. */\nexport function DropdownMenuShortcut({ className, ...props }: ComponentProps<\"span\">) {\n return (\n \n );\n}\n"
}
],
"example": {
"content": "import {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuTrigger,\n} from \"@/components/seamless/ui/dropdown-menu\";\n\n// Same recipe as the Button component's secondary variant, inlined so this example has no other dependency.\nconst button =\n \"group inline-flex h-9 items-center justify-center gap-1.5 rounded-lg border border-zinc-950/12 bg-white pr-2.5 pl-3.5 text-sm font-medium text-zinc-950 select-none \" +\n \"transition-[background-color,border-color,scale] duration-150 ease-out active:duration-100 motion-safe:active:scale-[0.97] motion-reduce:transition-none \" +\n \"hover:border-zinc-950/20 hover:bg-zinc-950/[0.03] data-[popup-open]:bg-zinc-950/[0.04] \" +\n \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-500 \" +\n \"dark:border-white/15 dark:bg-black dark:text-white dark:hover:border-white/25 dark:hover:bg-white/[0.06] dark:data-[popup-open]:bg-white/[0.06]\";\n\nconst icon = { \"aria-hidden\": true, viewBox: \"0 0 16 16\", fill: \"none\" } as const;\nconst stroke = { stroke: \"currentColor\", strokeWidth: 1.5, strokeLinecap: \"round\", strokeLinejoin: \"round\" } as const;\n\nexport default function DropdownMenuExample() {\n return (\n \n \n Options\n \n \n \n \n \n \n \n Rename\n ⌘R\n \n \n \n Duplicate\n ⌘D\n \n \n \n Share\n \n \n Copy link\n \n \n \n Publish to web\n \n \n \n \n \n Delete\n \n \n \n );\n}\n"
}
}