home Docs Components Samples

DropdownMenu

Dropdown menu with trigger and content; requires PopoverProvider in layout.

Installation

Add the DropdownMenu component using the CLI:

shadcnblazor component add dropdownmenu

Usage

The DropdownMenu component displays a menu triggered by a button or custom trigger. Use DropdownMenuTrigger with AsChild to render a custom trigger (e.g., Button), DropdownMenuContent for the panel, and DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, and DropdownMenuSeparator to structure the menu. Requires PopoverProvider in your layout (already present in the docs).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<DropdownMenu>
    <DropdownMenuTrigger AsChild="true">
        <Button Variant="Variant.Outline">Open</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
        <DropdownMenuGroup>
            <DropdownMenuLabel>My Account</DropdownMenuLabel>
            <DropdownMenuItem>Profile</DropdownMenuItem>
            <DropdownMenuItem>Billing</DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuItem>Team</DropdownMenuItem>
            <DropdownMenuItem>Subscription</DropdownMenuItem>
        </DropdownMenuGroup>
    </DropdownMenuContent>
</DropdownMenu>

Avatar

An account switcher dropdown triggered by an avatar. Use DropdownMenuTrigger with AsChild="true" and pass an Avatar as the trigger.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
@using EasyAppDev.Blazor.Icons.Lucide

<DropdownMenu>
    <DropdownMenuTrigger AsChild="true">
        <Avatar Src="https://github.com/shadcn.png" Alt="shadcn" Class="cursor-pointer" />
    </DropdownMenuTrigger>
    <DropdownMenuContent>
        <DropdownMenuGroup>
            <DropdownMenuLabel>My Account</DropdownMenuLabel>
            <DropdownMenuItem>
                <LuUser class="h-4 w-4 shrink-0" />
                Account
            </DropdownMenuItem>
            <DropdownMenuItem>
                <LuCreditCard class="h-4 w-4 shrink-0" />
                Billing
            </DropdownMenuItem>
            <DropdownMenuItem>
                <LuBell class="h-4 w-4 shrink-0" />
                Notifications
            </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
            <LuLogOut class="h-4 w-4 shrink-0" />
            Sign Out
        </DropdownMenuItem>
    </DropdownMenuContent>
</DropdownMenu>

Complex

A richer example combining groups, icons, shortcuts, a checked state, and a destructive action.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
@using EasyAppDev.Blazor.Icons.Lucide

<DropdownMenu>
    <DropdownMenuTrigger AsChild="true">
        <Button Variant="Variant.Outline">Complex Menu</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent Class="min-w-[12rem]">
        <DropdownMenuGroup>
            <DropdownMenuLabel>File</DropdownMenuLabel>
            <DropdownMenuItem Shortcut="⌘N">
                <LuFilePlus class="h-4 w-4 shrink-0" />
                New File
            </DropdownMenuItem>
            <DropdownMenuItem Shortcut="⇧⌘N">
                <LuFolderPlus class="h-4 w-4 shrink-0" />
                New Folder
            </DropdownMenuItem>
            <DropdownMenuItem>
                <LuFolderOpen class="h-4 w-4 shrink-0" />
                Open Recent
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem Shortcut="⌘S">
                <LuSave class="h-4 w-4 shrink-0" />
                Save
            </DropdownMenuItem>
            <DropdownMenuItem Shortcut="⇧⌘E">
                <LuDownload class="h-4 w-4 shrink-0" />
                Export
            </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
            <DropdownMenuLabel>View</DropdownMenuLabel>
            <DropdownMenuItem OnClick="@(_ => _showSidebar = !_showSidebar)">
                <LuPanelLeft class="h-4 w-4 shrink-0" />
                <span class="flex-1">Show Sidebar</span>
                @if (_showSidebar)
                {
                    <LuCheck class="h-4 w-4 shrink-0" />
                }
            </DropdownMenuItem>
            <DropdownMenuItem>
                <LuPanelBottom class="h-4 w-4 shrink-0" />
                Show Status Bar
            </DropdownMenuItem>
            <DropdownMenuItem>
                <LuPalette class="h-4 w-4 shrink-0" />
                Theme
            </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
            <DropdownMenuLabel>Account</DropdownMenuLabel>
            <DropdownMenuItem Shortcut="⇧⌘P">
                <LuUser class="h-4 w-4 shrink-0" />
                Profile
            </DropdownMenuItem>
            <DropdownMenuItem>
                <LuCreditCard class="h-4 w-4 shrink-0" />
                Billing
            </DropdownMenuItem>
            <DropdownMenuItem>
                <LuSettings class="h-4 w-4 shrink-0" />
                Settings
            </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
            <DropdownMenuLabel>Help & Support</DropdownMenuLabel>
            <DropdownMenuItem>
                <LuFileText class="h-4 w-4 shrink-0" />
                Documentation
            </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem Class="text-destructive" Shortcut="⇧⌘Q" OnClick="HandleSignOut">
            <LuLogOut class="h-4 w-4 shrink-0" />
            Sign Out
        </DropdownMenuItem>
    </DropdownMenuContent>
</DropdownMenu>

@code {
    private bool _showSidebar = true;

    private void HandleSignOut()
    {
        // Sign out logic
    }
}

Checkbox Items

Use DropdownMenuCheckboxItem for togglable options. Checkbox items do not close the menu on selection, allowing multiple toggles.

Notifications: On

Sound: Off

Dark mode: Off

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
@using ShadcnBlazor.Components.Button
@using ShadcnBlazor.Components.DropdownMenu

<div class="flex flex-col gap-4">
    <DropdownMenu>
        <DropdownMenuTrigger AsChild="true">
            <Button Variant="Variant.Outline">Settings</Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent>
            <DropdownMenuLabel>Preferences</DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuCheckboxItem
                Checked="showNotifications"
                CheckedChanged="@((val) => showNotifications = val)">
                Show notifications
            </DropdownMenuCheckboxItem>
            <DropdownMenuCheckboxItem
                Checked="enableSound"
                CheckedChanged="@((val) => enableSound = val)">
                Enable sound
            </DropdownMenuCheckboxItem>
            <DropdownMenuCheckboxItem
                Checked="darkMode"
                CheckedChanged="@((val) => darkMode = val)">
                Dark mode
            </DropdownMenuCheckboxItem>
        </DropdownMenuContent>
    </DropdownMenu>

    <div class="text-sm">
        <p>Notifications: @(showNotifications ? "On" : "Off")</p>
        <p>Sound: @(enableSound ? "On" : "Off")</p>
        <p>Dark mode: @(darkMode ? "On" : "Off")</p>
    </div>
</div>

@code {
    private bool showNotifications = true;
    private bool enableSound = false;
    private bool darkMode = false;
}

Radio Items

Use DropdownMenuRadioGroup with DropdownMenuRadioItem for mutually exclusive selections. Radio items close the menu on selection.

Selected: medium

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
@using ShadcnBlazor.Components.Button
@using ShadcnBlazor.Components.DropdownMenu

<div class="flex flex-col gap-4">
    <DropdownMenu>
        <DropdownMenuTrigger AsChild="true">
            <Button Variant="Variant.Outline">Font Size</Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent>
            <DropdownMenuLabel>Choose Size</DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuRadioGroup
                SelectedValue="fontSize"
                SelectedValueChanged="@((val) => fontSize = val)">
                <DropdownMenuRadioItem Value="small">Small</DropdownMenuRadioItem>
                <DropdownMenuRadioItem Value="medium">Medium</DropdownMenuRadioItem>
                <DropdownMenuRadioItem Value="large">Large</DropdownMenuRadioItem>
                <DropdownMenuRadioItem Value="xlarge">Extra Large</DropdownMenuRadioItem>
            </DropdownMenuRadioGroup>
        </DropdownMenuContent>
    </DropdownMenu>

    <div class="text-sm">
        <p>Selected: @fontSize</p>
    </div>
</div>

@code {
    private string fontSize = "medium";
}

API Reference

DropdownMenu

Root container for a dropdown menu; requires PopoverProvider in layout.

Properties

Name Type Description
ChildContent RenderFragment The trigger and content of the dropdown menu.

Methods

Method Returns Description
Equals bool
GetHashCode int
GetType Type
SetParametersAsync Task
ToString string
Mobile support for API reference coming soon.

Loading...

An unhandled error has occurred. Reload 🗙