Dropdown Menu

Displays a menu of actions or options triggered by a button. Supports icons, shortcuts, checkboxes, radio groups, submenus, and destructive actions.

Basic

A simple dropdown with labels, groups, and separators.

Basic Menu

With Icons

Combine icons with labels for quick visual scanning.

Icons Menu

Keyboard Shortcuts

Show keyboard shortcut hints alongside menu items.

Shortcuts

Checkboxes

Use DropdownMenuCheckboxItem for toggleable options.

Checkbox Items

Radio Group

Use DropdownMenuRadioGroup for exclusive single-selection options.

Radio Selection

Destructive

Use the destructive prop for irreversible actions like delete.

Destructive Action

Submenu

Nest secondary actions inside a submenu that opens on hover.

Submenu

Alignment

Control where the dropdown opens relative to the trigger: start, center, or end.

Start / Center / End

Disabled Items

Disabled items are visually dimmed and non-interactive.

Disabled

Usage

Import the Dropdown components and compose them together.

tsx
import {
    DropdownMenu,
    DropdownMenuTrigger,
    DropdownMenuContent,
    DropdownMenuGroup,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuItem,
    DropdownMenuCheckboxItem,
    DropdownMenuRadioGroup,
    DropdownMenuRadioItem,
} from "@/components/ui/Dropdown";
import { Button } from "@/components/ui/Button";

export default function Example() {
    const [darkMode, setDarkMode] = useState(false);
    const [payment, setPayment] = useState("card");

    return (
        <DropdownMenu>
            <DropdownMenuTrigger>
                <Button variant="ghost">Open</Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent>
                <DropdownMenuGroup>
                    <DropdownMenuLabel>Account</DropdownMenuLabel>
                    <DropdownMenuItem onSelect={() => {}}>Profile</DropdownMenuItem>
                    <DropdownMenuItem onSelect={() => {}}>Settings</DropdownMenuItem>
                </DropdownMenuGroup>
                <DropdownMenuSeparator />
                <DropdownMenuCheckboxItem
                    checked={darkMode}
                    onCheckedChange={setDarkMode}
                >
                    Dark Mode
                </DropdownMenuCheckboxItem>
                <DropdownMenuSeparator />
                <DropdownMenuRadioGroup value={payment} onValueChange={setPayment}>
                    <DropdownMenuRadioItem value="card">Card</DropdownMenuRadioItem>
                    <DropdownMenuRadioItem value="crypto">Crypto</DropdownMenuRadioItem>
                </DropdownMenuRadioGroup>
                <DropdownMenuSeparator />
                <DropdownMenuItem destructive onSelect={() => {}}>
                    Delete
                </DropdownMenuItem>
            </DropdownMenuContent>
        </DropdownMenu>
    );
}

Props

PropTypeDefaultDescription
childrenReactNode—Item label content.
iconReactNode—Icon rendered before the label.
shortcutstring—Keyboard shortcut hint displayed on the right.
disabledbooleanfalseDisable the item.
destructivebooleanfalseStyle as a destructive/danger action.
onSelect() => void—Callback when item is selected. Closes the menu.
classNamestring—Additional CSS class.