home Docs Components Samples

ContextMenu

Right-click context menu with support for items, checkboxes, radio groups, and submenus.

Installation

Add the ContextMenu component using the CLI:

shadcnblazor component add contextmenu

Usage

The ContextMenu component displays a menu triggered by right-clicking on the ContextMenuTrigger area. Use ContextMenuContent for the panel, and ContextMenuGroup, ContextMenuLabel, ContextMenuItem, and ContextMenuSeparator to structure the menu.

Right click here
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ContextMenu>
    <ContextMenuTrigger>
        <div class="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-border text-sm text-muted-foreground select-none cursor-context-menu">
            Right click here
        </div>
    </ContextMenuTrigger>
    <ContextMenuContent>
        <ContextMenuItem>Back</ContextMenuItem>
        <ContextMenuItem>Forward</ContextMenuItem>
        <ContextMenuItem>Reload</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>Save As...</ContextMenuItem>
        <ContextMenuItem>Print...</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>Inspect</ContextMenuItem>
    </ContextMenuContent>
</ContextMenu>

Examples

Shortcuts

Use ContextMenuShortcut inside a ContextMenuItem to display a keyboard shortcut hint.

Right click here
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
<ContextMenu>
    <ContextMenuTrigger>
        <div class="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-border text-sm text-muted-foreground select-none cursor-context-menu">
            Right click here
        </div>
    </ContextMenuTrigger>
    <ContextMenuContent>
        <ContextMenuItem>
            Back
            <ContextMenuShortcut>⌘[</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
            Forward
            <ContextMenuShortcut>⌘]</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
            Reload
            <ContextMenuShortcut>⌘R</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
            Full Reload
            <ContextMenuShortcut>⌘⇧R</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>
            Print
            <ContextMenuShortcut>⌘P</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
            Save
            <ContextMenuShortcut>⌘S</ContextMenuShortcut>
        </ContextMenuItem>
    </ContextMenuContent>
</ContextMenu>

Groups

Use ContextMenuGroup and ContextMenuLabel to organize items into labeled sections.

Right click here
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
<ContextMenu>
    <ContextMenuTrigger>
        <div class="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-border text-sm text-muted-foreground select-none cursor-context-menu">
            Right click here
        </div>
    </ContextMenuTrigger>
    <ContextMenuContent>
        <ContextMenuGroup>
            <ContextMenuLabel>Navigation</ContextMenuLabel>
            <ContextMenuItem>Back</ContextMenuItem>
            <ContextMenuItem>Forward</ContextMenuItem>
            <ContextMenuItem>Reload</ContextMenuItem>
        </ContextMenuGroup>
        <ContextMenuSeparator />
        <ContextMenuGroup>
            <ContextMenuLabel>Page</ContextMenuLabel>
            <ContextMenuItem>Save As...</ContextMenuItem>
            <ContextMenuItem>Print...</ContextMenuItem>
            <ContextMenuItem>View Source</ContextMenuItem>
        </ContextMenuGroup>
        <ContextMenuSeparator />
        <ContextMenuGroup>
            <ContextMenuLabel>Developer</ContextMenuLabel>
            <ContextMenuItem>Inspect Element</ContextMenuItem>
            <ContextMenuItem>JavaScript Console</ContextMenuItem>
        </ContextMenuGroup>
    </ContextMenuContent>
</ContextMenu>

Icons

Add icons inside ContextMenuItem using SVG or an icon library component.

Right click here
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
<ContextMenu>
    <ContextMenuTrigger>
        <div class="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-border text-sm text-muted-foreground select-none cursor-context-menu">
            Right click here
        </div>
    </ContextMenuTrigger>
    <ContextMenuContent>
        <ContextMenuItem>
            <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" aria-hidden="true"><polyline points="15 18 9 12 15 6"></polyline></svg>
            Back
        </ContextMenuItem>
        <ContextMenuItem>
            <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" aria-hidden="true"><polyline points="9 18 15 12 9 6"></polyline></svg>
            Forward
        </ContextMenuItem>
        <ContextMenuItem>
            <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" aria-hidden="true"><polyline points="1 4 1 10 7 10"></polyline><path d="M3.51 15a9 9 0 1 0 .49-3.37"></path></svg>
            Reload
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>
            <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" aria-hidden="true"><polyline points="6 9 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect x="6" y="14" width="12" height="8"></rect></svg>
            Print...
        </ContextMenuItem>
        <ContextMenuItem>
            <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" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
            Save As...
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>
            <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" aria-hidden="true"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
            Inspect
        </ContextMenuItem>
    </ContextMenuContent>
</ContextMenu>

Checkbox Items

Use ContextMenuCheckboxItem for toggleable menu items with a checkmark indicator.

Right click here
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@code {
    private bool _showBookmarks = true;
    private bool _showFullUrls = false;
}

<ContextMenu>
    <ContextMenuTrigger>
        <div class="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-border text-sm text-muted-foreground select-none cursor-context-menu">
            Right click here
        </div>
    </ContextMenuTrigger>
    <ContextMenuContent>
        <ContextMenuLabel>Appearance</ContextMenuLabel>
        <ContextMenuSeparator />
        <ContextMenuCheckboxItem Checked="_showBookmarks" CheckedChanged="v => _showBookmarks = v">
            Show Bookmarks Bar
        </ContextMenuCheckboxItem>
        <ContextMenuCheckboxItem Checked="_showFullUrls" CheckedChanged="v => _showFullUrls = v">
            Show Full URLs
        </ContextMenuCheckboxItem>
        <ContextMenuSeparator />
        <ContextMenuItem>Reload</ContextMenuItem>
    </ContextMenuContent>
</ContextMenu>

Radio Items

Use ContextMenuRadioGroup and ContextMenuRadioItem for single-selection groups within the menu.

Right click here

Selected layout: Default

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@code {
    private string _layout = "Default";
}

<ContextMenu>
    <ContextMenuTrigger>
        <div class="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-border text-sm text-muted-foreground select-none cursor-context-menu">
            Right click here
        </div>
    </ContextMenuTrigger>
    <ContextMenuContent>
        <ContextMenuLabel>Layout</ContextMenuLabel>
        <ContextMenuSeparator />
        <ContextMenuRadioGroup Value="@_layout" ValueChanged="v => _layout = v">
            <ContextMenuRadioItem Value="Default">Default</ContextMenuRadioItem>
            <ContextMenuRadioItem Value="Comfortable">Comfortable</ContextMenuRadioItem>
            <ContextMenuRadioItem Value="Compact">Compact</ContextMenuRadioItem>
        </ContextMenuRadioGroup>
        <ContextMenuSeparator />
        <ContextMenuItem>Reload</ContextMenuItem>
    </ContextMenuContent>
</ContextMenu>

<p class="mt-2 text-sm text-muted-foreground">Selected layout: <strong>@_layout</strong></p>

Destructive Item

Use the Destructive parameter on ContextMenuItem to style a dangerous action in the destructive color.

Right click here
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<ContextMenu>
    <ContextMenuTrigger>
        <div class="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-border text-sm text-muted-foreground select-none cursor-context-menu">
            Right click here
        </div>
    </ContextMenuTrigger>
    <ContextMenuContent>
        <ContextMenuItem>View</ContextMenuItem>
        <ContextMenuItem>Edit</ContextMenuItem>
        <ContextMenuItem>Duplicate</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>Archive</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem Destructive="true">Delete Page</ContextMenuItem>
    </ContextMenuContent>
</ContextMenu>

Loading...

An unhandled error has occurred. Reload 🗙