Chalk UI
Getting started
Customization
Dark Mode
CLI
Components
Accordion
Address Input
Alert
App Layout
Autocomplete
Avatar
Badge
Breadcrumbs
Button
Calendar
Card
Carousel
Chart (Area)
Chart (Bar)
Chart (Donut)
Chart (Line)
Checkbox
Checkbox Group
Collapsible
Combobox
Command
Currency Input
DataGrid
Date Picker
Date Range Picker
Disclosure
Drawer
Dropdown Menu
Form
Horizontal Draggable Scroll
Hover Card
Loading Spinner
Loading Overlay
Modal
Native Select
Navigation Menu
Number Input
Page Header
Pagination
Phone Input
Popover
Progress Bar
Radio Group
Scroll Area
Select
Separator
Simple Dropzone
Skeleton
Static Tabs
Stats
Switch
Table
Tabs
Text Input
Textarea
Timeline
Toaster
Tooltip
Vertical Menu

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",
    ]),
})