Dropdown Menu

Displays a menu to the user such as a set of actions or functions, triggered by a button.

<DropdownMenu>
    <DropdownMenuTrigger>
        <Button Variant="@Button.ButtonVariant.Outline">Open</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent Class="w-40">
        <DropdownMenuGroup>
            <DropdownMenuLabel>My Account</DropdownMenuLabel>
            <DropdownMenuItem>
                Profile
                <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
            </DropdownMenuItem>
            <DropdownMenuItem>
                Billing
                <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
            </DropdownMenuItem>
            <DropdownMenuItem>
                Settings
                <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
            </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
            <DropdownMenuItem>Team</DropdownMenuItem>
            <DropdownMenuSub>
                <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
                <DropdownMenuPortal>
                    <DropdownMenuSubContent>
                        <DropdownMenuItem>Email</DropdownMenuItem>
                        <DropdownMenuItem>Message</DropdownMenuItem>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem>More...</DropdownMenuItem>
                    </DropdownMenuSubContent>
                </DropdownMenuPortal>
            </DropdownMenuSub>
            <DropdownMenuItem>
                New Team
                <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
            </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
            <DropdownMenuItem>GitHub</DropdownMenuItem>
            <DropdownMenuItem>Support</DropdownMenuItem>
            <DropdownMenuItem Disabled="true">API</DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem Variant="@DropdownMenuItem.DropdownMenuItemVariant.Destructive">
            Log out
            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
        </DropdownMenuItem>
    </DropdownMenuContent>
</DropdownMenu>

Installation

Install the dropdown-menu component using the command or manual steps.

blazor-shadcn add dropdown-menu

Usage

@using ShadcnBlazor.Components.UI

<DropdownMenu>
    <DropdownMenuTrigger>
        <Button Variant="@Button.ButtonVariant.Outline">Open</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
        <DropdownMenuItem>Profile</DropdownMenuItem>
    </DropdownMenuContent>
</DropdownMenu>

Examples

Basic

<DropdownMenu>
    <DropdownMenuTrigger>
        <Button Variant="@Button.ButtonVariant.Outline">Open</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
        <DropdownMenuGroup>
            <DropdownMenuLabel>My Account</DropdownMenuLabel>
            <DropdownMenuItem>Profile</DropdownMenuItem>
            <DropdownMenuItem>Billing</DropdownMenuItem>
            <DropdownMenuItem>Settings</DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem>GitHub</DropdownMenuItem>
        <DropdownMenuItem>Support</DropdownMenuItem>
        <DropdownMenuItem Disabled="true">API</DropdownMenuItem>
    </DropdownMenuContent>
</DropdownMenu>

Shortcuts

<DropdownMenu>
    <DropdownMenuTrigger>
        <Button Variant="@Button.ButtonVariant.Outline">Open</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
        <DropdownMenuGroup>
            <DropdownMenuLabel>My Account</DropdownMenuLabel>
            <DropdownMenuItem>
                Profile
                <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
            </DropdownMenuItem>
            <DropdownMenuItem>
                Billing
                <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
            </DropdownMenuItem>
            <DropdownMenuItem>
                Settings
                <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
            </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
            Log out
            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
        </DropdownMenuItem>
    </DropdownMenuContent>
</DropdownMenu>

Icons

<DropdownMenu>
    <DropdownMenuTrigger>
        <Button Variant="@Button.ButtonVariant.Outline">Open</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
        <DropdownMenuItem>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 7a4 4 0 1 1 8 0a4 4 0 0 1 -8 0" /><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /></svg>
            Profile
        </DropdownMenuItem>
        <DropdownMenuItem>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2" /><path d="M3 10h18" /></svg>
            Billing
        </DropdownMenuItem>
        <DropdownMenuItem>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 15.5a3.5 3.5 0 1 0 0 -7a3.5 3.5 0 0 0 0 7z" /><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06 .06a2 2 0 1 1 -2.83 2.83l-.06 -.06a1.65 1.65 0 0 0 -1.82 -.33a1.65 1.65 0 0 0 -1 1.51V21a2 2 0 1 1 -4 0v-.09a1.65 1.65 0 0 0 -1 -1.51a1.65 1.65 0 0 0 -1.82 .33l-.06 .06a2 2 0 1 1 -2.83 -2.83l.06 -.06a1.65 1.65 0 0 0 .33 -1.82a1.65 1.65 0 0 0 -1.51 -1H3a2 2 0 1 1 0 -4h.09a1.65 1.65 0 0 0 1.51 -1a1.65 1.65 0 0 0 -.33 -1.82l-.06 -.06a2 2 0 1 1 2.83 -2.83l.06 .06a1.65 1.65 0 0 0 1.82 .33h.08a1.65 1.65 0 0 0 1 -1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51h.08a1.65 1.65 0 0 0 1.82 -.33l.06 -.06a2 2 0 1 1 2.83 2.83l-.06 .06a1.65 1.65 0 0 0 -.33 1.82v.08a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0 -1.51 1z" /></svg>
            Settings
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem Variant="@DropdownMenuItem.DropdownMenuItemVariant.Destructive">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 12h4" /><path d="M12 10v4" /><path d="M15 21H5a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h10" /><path d="M19 16l4 -4l-4 -4" /><path d="M23 12h-13" /></svg>
            Log out
        </DropdownMenuItem>
    </DropdownMenuContent>
</DropdownMenu>

Avatar

<DropdownMenu>
    <DropdownMenuTrigger>
        <Button Variant="@Button.ButtonVariant.Ghost" Size="@Button.ButtonSize.Icon" Class="rounded-full p-0">
            <Avatar>
                <AvatarImage Src="https://github.com/shadcn.png" Alt="shadcn" />
                <AvatarFallback>LR</AvatarFallback>
            </Avatar>
        </Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent Class="w-48">
        <DropdownMenuGroup>
            <DropdownMenuItem>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 7a4 4 0 1 1 8 0a4 4 0 0 1 -8 0" /><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /></svg>
                Account
            </DropdownMenuItem>
            <DropdownMenuItem>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2" /><path d="M3 10h18" /></svg>
                Billing
            </DropdownMenuItem>
            <DropdownMenuItem>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 17h5l-1.405 -1.405A2.032 2.032 0 0 1 18 14.158V11a6.002 6.002 0 0 0 -4 -5.659V5a2 2 0 1 0 -4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5" /><path d="M9 17a3 3 0 0 0 6 0" /></svg>
                Notifications
            </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 12h4" /><path d="M12 10v4" /><path d="M15 21H5a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h10" /><path d="M19 16l4 -4l-4 -4" /><path d="M23 12h-13" /></svg>
            Sign Out
        </DropdownMenuItem>
    </DropdownMenuContent>
</DropdownMenu>

Complex

<DropdownMenu>
    <DropdownMenuTrigger>
        <Button Variant="@Button.ButtonVariant.Outline">Complex Menu</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent Class="w-52">
        <DropdownMenuGroup>
            <DropdownMenuLabel>File</DropdownMenuLabel>
            <DropdownMenuItem>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /></svg>
                New File
                <DropdownMenuShortcut>?N</DropdownMenuShortcut>
            </DropdownMenuItem>
            <DropdownMenuItem>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3l-1 2h-3a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2 -2v-8a2 2 0 0 0 -2 -2h-7l-2 -4z" /></svg>
                New Folder
                <DropdownMenuShortcut>??N</DropdownMenuShortcut>
            </DropdownMenuItem>
            <DropdownMenuSub>
                <DropdownMenuSubTrigger>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 19l14 0" /><path d="M5 5l14 0" /><path d="M5 12l14 0" /></svg>
                    Open Recent
                </DropdownMenuSubTrigger>
                <DropdownMenuPortal>
                    <DropdownMenuSubContent>
                        <DropdownMenuGroup>
                            <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>
                            <DropdownMenuItem>Project Alpha</DropdownMenuItem>
                            <DropdownMenuItem>Project Beta</DropdownMenuItem>
                            <DropdownMenuSub>
                                <DropdownMenuSubTrigger>More Projects</DropdownMenuSubTrigger>
                                <DropdownMenuPortal>
                                    <DropdownMenuSubContent>
                                        <DropdownMenuItem>Project Gamma</DropdownMenuItem>
                                        <DropdownMenuItem>Project Delta</DropdownMenuItem>
                                    </DropdownMenuSubContent>
                                </DropdownMenuPortal>
                            </DropdownMenuSub>
                        </DropdownMenuGroup>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem>Browse...</DropdownMenuItem>
                    </DropdownMenuSubContent>
                </DropdownMenuPortal>
            </DropdownMenuSub>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
            <DropdownMenuLabel>Account</DropdownMenuLabel>
            <DropdownMenuItem>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 7a4 4 0 1 1 8 0a4 4 0 0 1 -8 0" /><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /></svg>
                Profile
                <DropdownMenuShortcut>??P</DropdownMenuShortcut>
            </DropdownMenuItem>
            <DropdownMenuSub>
                <DropdownMenuSubTrigger>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 15.5a3.5 3.5 0 1 0 0 -7a3.5 3.5 0 0 0 0 7z" /><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06 .06a2 2 0 1 1 -2.83 2.83l-.06 -.06a1.65 1.65 0 0 0 -1.82 -.33a1.65 1.65 0 0 0 -1 1.51V21a2 2 0 1 1 -4 0v-.09a1.65 1.65 0 0 0 -1 -1.51a1.65 1.65 0 0 0 -1.82 .33l-.06 .06a2 2 0 1 1 -2.83 -2.83l.06 -.06a1.65 1.65 0 0 0 .33 -1.82a1.65 1.65 0 0 0 -1.51 -1H3a2 2 0 1 1 0 -4h.09a1.65 1.65 0 0 0 1.51 -1a1.65 1.65 0 0 0 -.33 -1.82l-.06 -.06a2 2 0 1 1 2.83 -2.83l.06 .06a1.65 1.65 0 0 0 1.82 .33h.08a1.65 1.65 0 0 0 1 -1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51h.08a1.65 1.65 0 0 0 1.82 -.33l.06 -.06a2 2 0 1 1 2.83 2.83l-.06 .06a1.65 1.65 0 0 0 -.33 1.82v.08a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0 -1.51 1z" /></svg>
                    Settings
                </DropdownMenuSubTrigger>
                <DropdownMenuPortal>
                    <DropdownMenuSubContent>
                        <DropdownMenuGroup>
                            <DropdownMenuLabel>Preferences</DropdownMenuLabel>
                            <DropdownMenuItem>Keyboard Shortcuts</DropdownMenuItem>
                            <DropdownMenuItem>Language</DropdownMenuItem>
                            <DropdownMenuSub>
                                <DropdownMenuSubTrigger>Notifications</DropdownMenuSubTrigger>
                                <DropdownMenuPortal>
                                    <DropdownMenuSubContent>
                                        <DropdownMenuItem>Push Notifications</DropdownMenuItem>
                                        <DropdownMenuItem>Email Notifications</DropdownMenuItem>
                                    </DropdownMenuSubContent>
                                </DropdownMenuPortal>
                            </DropdownMenuSub>
                        </DropdownMenuGroup>
                    </DropdownMenuSubContent>
                </DropdownMenuPortal>
            </DropdownMenuSub>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
            <DropdownMenuItem>Help &amp; Support</DropdownMenuItem>
            <DropdownMenuItem>Documentation</DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem Variant="@DropdownMenuItem.DropdownMenuItemVariant.Destructive">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 12h4" /><path d="M12 10v4" /><path d="M15 21H5a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h10" /><path d="M19 16l4 -4l-4 -4" /><path d="M23 12h-13" /></svg>
            Sign Out
            <DropdownMenuShortcut>??Q</DropdownMenuShortcut>
        </DropdownMenuItem>
    </DropdownMenuContent>
</DropdownMenu>

Destructive

<DropdownMenu>
    <DropdownMenuTrigger>
        <Button Variant="@Button.ButtonVariant.Outline">Project</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent Class="w-44">
        <DropdownMenuItem>Rename</DropdownMenuItem>
        <DropdownMenuItem>Duplicate</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem Variant="@DropdownMenuItem.DropdownMenuItemVariant.Destructive">Delete project</DropdownMenuItem>
    </DropdownMenuContent>
</DropdownMenu>

API Reference

DropdownMenu

Prop	Type	Default
Open	`bool`	false
OpenChanged	`EventCallback<bool>`	-
DefaultOpen	`bool`	false
Class	`string?`	null

DropdownMenuTrigger

Prop	Type	Default
Class	`string?`	null

DropdownMenuContent

Prop	Type	Default
Class	`string?`	null

DropdownMenuGroup

Prop	Type	Default
Class	`string?`	null

DropdownMenuItem

Prop	Type	Default
Variant	`Default \| Destructive`	Default
Disabled	`bool`	false
OnSelect	`EventCallback`	-
Class	`string?`	null

DropdownMenuLabel

Prop	Type	Default
Class	`string?`	null

DropdownMenuPortal

Acts as a structural wrapper for submenu content. It has no public parameters beyond ChildContent.

DropdownMenuSeparator

Prop	Type	Default
Class	`string?`	null

DropdownMenuShortcut

Prop	Type	Default
Class	`string?`	null

DropdownMenuSub

Prop	Type	Default
Class	`string?`	null

DropdownMenuSubTrigger

Prop	Type	Default
Class	`string?`	null

DropdownMenuSubContent

Prop	Type	Default
Class	`string?`	null

Internal Types

DropdownMenuContext, DropdownMenuSubContext, and DropdownMenuSubGroupContext are internal state containers used for cascading menu and submenu coordination. They are included in the install copy but are not authored directly in Razor markup.

On This Page

Installation Usage Examples API Reference