Dropdown Menu

Displays a menu of actions or options that the user can choose from, triggered by a button.

Basic

A basic dropdown menu with labels, items, and separators.

<DropdownMenu>
    <DropdownMenuTrigger>
        <Button Variant="ButtonVariant.Outline">Open Menu</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
        <DropdownMenuLabel>My Account</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
            <DropdownMenuItem>Profile</DropdownMenuItem>
            <DropdownMenuItem>Billing</DropdownMenuItem>
            <DropdownMenuItem>Settings</DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Log out</DropdownMenuItem>
    </DropdownMenuContent>
</DropdownMenu>

With Icons

Add inline SVG icons to menu items for visual context.

<DropdownMenu>
    <DropdownMenuTrigger>
        <Button Variant="ButtonVariant.Outline">Open Menu</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent Class="w-56">
        <DropdownMenuLabel>My Account</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
            <DropdownMenuItem>
                <UserIcon />
                Profile
                <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
            </DropdownMenuItem>
            <DropdownMenuItem>
                <CreditCardIcon />
                Billing
                <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
            </DropdownMenuItem>
            <DropdownMenuItem>
                <SettingsIcon />
                Settings
                <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
            </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem Variant="DropdownMenuItemVariant.Destructive">
            <LogOutIcon />
            Log out
            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
        </DropdownMenuItem>
    </DropdownMenuContent>
</DropdownMenu>

Shortcuts

Add DropdownMenuShortcut to show keyboard hints.

<DropdownMenu>
    <DropdownMenuTrigger>
        <Button Variant="ButtonVariant.Outline">Edit</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent Class="w-56">
        <DropdownMenuLabel>Edit</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
            Undo
            <DropdownMenuShortcut>⌘Z</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
            Cut
            <DropdownMenuShortcut>⌘X</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
            Copy
            <DropdownMenuShortcut>⌘C</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
            Paste
            <DropdownMenuShortcut>⌘V</DropdownMenuShortcut>
        </DropdownMenuItem>
    </DropdownMenuContent>
</DropdownMenu>

Checkboxes

Use DropdownMenuCheckboxItem for toggleable items.

<DropdownMenu>
    <DropdownMenuTrigger>
        <Button Variant="ButtonVariant.Outline">View Options</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent Class="w-56">
        <DropdownMenuLabel>Appearance</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuCheckboxItem @bind-Checked="showStatusBar">
            Status Bar
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem @bind-Checked="showActivityBar">
            Activity Bar
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem @bind-Checked="showPanel">
            Panel
        </DropdownMenuCheckboxItem>
    </DropdownMenuContent>
</DropdownMenu>

Radio Group

Use DropdownMenuRadioGroup for exclusive choices.

<DropdownMenu>
    <DropdownMenuTrigger>
        <Button Variant="ButtonVariant.Outline">Sort By</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent Class="w-56">
        <DropdownMenuLabel>Sort Order</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuRadioGroup @bind-Value="sortValue">
            <DropdownMenuRadioItem Value="name">Name</DropdownMenuRadioItem>
            <DropdownMenuRadioItem Value="date">Date Modified</DropdownMenuRadioItem>
            <DropdownMenuRadioItem Value="size">Size</DropdownMenuRadioItem>
        </DropdownMenuRadioGroup>
    </DropdownMenuContent>
</DropdownMenu>

Submenu

Use DropdownMenuSub to nest secondary actions.

<DropdownMenu>
    <DropdownMenuTrigger>
        <Button Variant="ButtonVariant.Outline">Options</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent Class="w-56">
        <DropdownMenuItem>New File</DropdownMenuItem>
        <DropdownMenuSub>
            <DropdownMenuSubTrigger>Share</DropdownMenuSubTrigger>
            <DropdownMenuSubContent>
                <DropdownMenuItem>Email</DropdownMenuItem>
                <DropdownMenuItem>Message</DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem>Copy Link</DropdownMenuItem>
            </DropdownMenuSubContent>
        </DropdownMenuSub>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Settings</DropdownMenuItem>
    </DropdownMenuContent>
</DropdownMenu>

Destructive

Use DropdownMenuItemVariant.Destructive for irreversible actions.

<DropdownMenu>
    <DropdownMenuTrigger>
        <Button Variant="ButtonVariant.Outline">Actions</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent Class="w-56">
        <DropdownMenuItem>Edit</DropdownMenuItem>
        <DropdownMenuItem>Duplicate</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Archive</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem Variant="DropdownMenuItemVariant.Destructive">
            Delete
            <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
        </DropdownMenuItem>
    </DropdownMenuContent>
</DropdownMenu>

Alignment

Use the Align parameter on DropdownMenuContent to control positioning.

<DropdownMenu>
    <DropdownMenuTrigger>
        <Button Variant="ButtonVariant.Outline">Start</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent Align="DropdownMenuAlign.Start">
        <DropdownMenuItem>Item 1</DropdownMenuItem>
    </DropdownMenuContent>
</DropdownMenu>

<DropdownMenu>
    <DropdownMenuTrigger>
        <Button Variant="ButtonVariant.Outline">End</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent Align="DropdownMenuAlign.End">
        <DropdownMenuItem>Item 1</DropdownMenuItem>
    </DropdownMenuContent>
</DropdownMenu>