Dropdown Menu

A floating menu component, triggered by a button.

Source

Installation

npx @rahimstack@latest add dropdown-menu

Usage

<DropdownMenu trigger={/*...*/}>
 
    <DropdownMenuLabel>Group</DropdownMenuLabel>
    <DropdownMenuItem>Item</DropdownMenuItem>
 
    <DropdownMenuSub triggerContent="More">
        <DropdownMenuItem>Item</DropdownMenuItem>
    </DropdownMenuSub>
 
    <DropdownMenuSeparator />
 
    <DropdownMenuItem>
        Item
        <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
    </DropdownMenuItem>
 
</DropdownMenu>

API Reference

const DropdownMenuAnatomy = defineStyleAnatomy({
    subTrigger: cva([
        "UI-DropdownMenu__subTrigger",
        "focus:bg-[--subtle] data-[state=open]:bg-[--subtle]",
    ]),
    subContent: cva([
        "UI-DropdownMenu__subContent",
        "z-50 min-w-[12rem] overflow-hidden rounded-[--radius] border bg-[--paper] p-1 text-[--foreground] shadow-sm",
        "data-[state=open]:animate-in data-[state=closed]:animate-out",
        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
        "data-[state=closed]:zoom-out-100 data-[state=open]:zoom-in-95",
        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
    ]),
    root: cva([
        "UI-DropdownMenu__root",
        "z-50 min-w-[12rem] overflow-hidden rounded-[--radius] border bg-[--paper] p-1 text-[--foreground] shadow-sm",
        "data-[state=open]:animate-in data-[state=closed]:animate-out",
        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
        "data-[state=closed]:zoom-out-100 data-[state=open]:zoom-in-95",
        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
    ]),
    item: cva([
        "UI-DropdownMenu__item",
        "relative flex cursor-default select-none items-center rounded-[--radius] px-2 py-1 text-sm outline-none transition-colors",
        "focus:bg-[--subtle] data-[disabled]:pointer-events-none",
        "data-[disabled]:opacity-50",
    ]),
    group: cva([
        "UI-DropdownMenu__group",
    ]),
    label: cva([
        "UI-DropdownMenu__label",
        "px-2 py-1.5 text-sm font-semibold text-[--muted]",
    ]),
    separator: cva([
        "UI-DropdownMenu__separator",
        "-mx-1 my-1 h-px bg-[--border]",
    ]),
    shortcut: cva([
        "UI-DropdownMenu__shortcut",
        "ml-auto text-xs tracking-widest opacity-60",
    ]),
})