Context Menu

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

This component uses newly available browser features

This component uses CSS Anchor Positioning which has only been widely supported since January 2026. If you're targeting older or less mainstream browsers then maybe this component isn't for you, yet.

Alternatively you can use Singlestage 0.4 which positions the component correctly but with limited flexibility for alignment, or roll your own using Singlestage CSS classes for consistent styling.

More Info

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn ContextMenuExample() -> impl IntoView {
    view! {
        <ContextMenu>
            <ContextMenuTrigger class="flex h-[150px] w-[300px] items-center justify-center rounded-xl border border-dashed text-sm">
                <span class="pointer-fine:hidden">"Long press here"</span>
                <span class="pointer-coarse:hidden">"Right click here"</span>
            </ContextMenuTrigger>
            <ContextMenuContent class="w-48">
                <ContextMenuGroup>
                    <ContextMenuItem>
                        "Back" <ContextMenuShortcut>"⌘["</ContextMenuShortcut>
                    </ContextMenuItem>
                    <ContextMenuItem disabled=true>
                        "Forward" <ContextMenuShortcut>"⌘]"</ContextMenuShortcut>
                    </ContextMenuItem>
                    <ContextMenuItem>
                        "Reload" <ContextMenuShortcut>"⌘R"</ContextMenuShortcut>
                    </ContextMenuItem>
                    <ContextMenuSub>
                        <ContextMenuSubTrigger>"More Tools"</ContextMenuSubTrigger>
                        <ContextMenuSubContent class="w-44">
                            <ContextMenuGroup>
                                <ContextMenuItem>"Save Page..."</ContextMenuItem>
                                <ContextMenuItem>"Create Shortcut..."</ContextMenuItem>
                                <ContextMenuItem>"Name Window..."</ContextMenuItem>
                            </ContextMenuGroup>
                            <ContextMenuSeparator />
                            <ContextMenuGroup>
                                <ContextMenuItem>"Developer Tools"</ContextMenuItem>
                            </ContextMenuGroup>
                            <ContextMenuSeparator />
                            <ContextMenuGroup>
                                <ContextMenuItem variant="destructive">"Delete"</ContextMenuItem>
                            </ContextMenuGroup>
                        </ContextMenuSubContent>
                    </ContextMenuSub>
                </ContextMenuGroup>
                <ContextMenuSeparator />
                <ContextMenuGroup>
                    <ContextMenuCheckboxItem checked=true>"Show Bookmarks"</ContextMenuCheckboxItem>
                    <ContextMenuCheckboxItem>"Show Full URLs"</ContextMenuCheckboxItem>
                </ContextMenuGroup>
                <ContextMenuSeparator />
                <ContextMenuGroup>
                    <ContextMenuRadioGroup value="pedro">
                        <ContextMenuLabel>"People"</ContextMenuLabel>
                        <ContextMenuRadioItem value="pedro">"Pedro Duarte"</ContextMenuRadioItem>
                        <ContextMenuRadioItem value="colm">"Colm Tuite"</ContextMenuRadioItem>
                    </ContextMenuRadioGroup>
                </ContextMenuGroup>
            </ContextMenuContent>
        </ContextMenu>
    }
}

Basic

A simple context menu with a few actions.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn ContextBasicExample() -> impl IntoView {
    view! {
        <ContextMenu>
            <ContextMenuTrigger class="flex h-[150px] w-[300px] items-center justify-center rounded-xl border border-dashed text-sm">
                <span class="pointer-fine:hidden">"Long press here"</span>
                <span class="pointer-coarse:hidden">"Right click here"</span>
            </ContextMenuTrigger>
            <ContextMenuContent>
                <ContextMenuGroup>
                    <ContextMenuItem>"Back"</ContextMenuItem>
                    <ContextMenuItem disabled=true>"Forward"</ContextMenuItem>
                    <ContextMenuItem>"Reload"</ContextMenuItem>
                </ContextMenuGroup>
            </ContextMenuContent>
        </ContextMenu>
    }
}

Submenu

Use MenuSub to nest secondary actions.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn ContextSubExample() -> impl IntoView {
    view! {
        <ContextMenu>
            <ContextMenuTrigger class="flex h-[150px] w-[300px] items-center justify-center rounded-xl border border-dashed text-sm">
                <span class="pointer-fine:hidden">"Long press here"</span>
                <span class="pointer-coarse:hidden">"Right click here"</span>
            </ContextMenuTrigger>
            <ContextMenuContent>
                <ContextMenuGroup>
                    <ContextMenuItem>
                        "Copy" <ContextMenuShortcut>"⌘C"</ContextMenuShortcut>
                    </ContextMenuItem>
                    <ContextMenuItem>
                        "Cut" <ContextMenuShortcut>"⌘X"</ContextMenuShortcut>
                    </ContextMenuItem>
                </ContextMenuGroup>
                <ContextMenuSub>
                    <ContextMenuSubTrigger>"More Tools"</ContextMenuSubTrigger>
                    <ContextMenuSubContent>
                        <ContextMenuGroup>
                            <ContextMenuItem>"Save Page..."</ContextMenuItem>
                            <ContextMenuItem>"Create Shortcut..."</ContextMenuItem>
                            <ContextMenuItem>"Name Window..."</ContextMenuItem>
                        </ContextMenuGroup>
                        <ContextMenuSeparator />
                        <ContextMenuGroup>
                            <ContextMenuItem>"Developer Tools"</ContextMenuItem>
                        </ContextMenuGroup>
                        <ContextMenuSeparator />
                        <ContextMenuGroup>
                            <ContextMenuItem variant="destructive">"Delete"</ContextMenuItem>
                        </ContextMenuGroup>
                    </ContextMenuSubContent>
                </ContextMenuSub>
            </ContextMenuContent>
        </ContextMenu>
    }
}

Shortcuts

Add MenuShortcut to show keyboard hints.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn ContextShortcutsExample() -> impl IntoView {
    view! {
        <ContextMenu>
            <ContextMenuTrigger class="flex h-[150px] w-[300px] items-center justify-center rounded-xl border border-dashed text-sm">
                <span class="pointer-fine:hidden">"Long press here"</span>
                <span class="pointer-coarse:hidden">"Right click here"</span>
            </ContextMenuTrigger>
            <ContextMenuContent>
                <ContextMenuGroup>
                    <ContextMenuItem>
                        "Back" <ContextMenuShortcut>"⌘["</ContextMenuShortcut>
                    </ContextMenuItem>
                    <ContextMenuItem disabled=true>
                        "Forward" <ContextMenuShortcut>"⌘]"</ContextMenuShortcut>
                    </ContextMenuItem>
                    <ContextMenuItem>
                        "Reload" <ContextMenuShortcut>"⌘R"</ContextMenuShortcut>
                    </ContextMenuItem>
                </ContextMenuGroup>
                <ContextMenuSeparator />
                <ContextMenuGroup>
                    <ContextMenuItem>
                        "Save" <ContextMenuShortcut>"⌘S"</ContextMenuShortcut>
                    </ContextMenuItem>
                    <ContextMenuItem>
                        "Save As..." <ContextMenuShortcut>"⇧⌘S"</ContextMenuShortcut>
                    </ContextMenuItem>
                </ContextMenuGroup>
            </ContextMenuContent>
        </ContextMenu>
    }
}

Groups

Group related actions and separate them with dividers.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn ContextGroupsExample() -> impl IntoView {
    view! {
        <ContextMenu>
            <ContextMenuTrigger class="flex h-[150px] w-[300px] items-center justify-center rounded-xl border border-dashed text-sm">
                <span class="pointer-fine:hidden">"Long press here"</span>
                <span class="pointer-coarse:hidden">"Right click here"</span>
            </ContextMenuTrigger>
            <ContextMenuContent>
                <ContextMenuGroup>
                    <ContextMenuLabel>"File"</ContextMenuLabel>
                    <ContextMenuItem>
                        "New File" <ContextMenuShortcut>"⌘N"</ContextMenuShortcut>
                    </ContextMenuItem>
                    <ContextMenuItem>
                        "Open File" <ContextMenuShortcut>"⌘O"</ContextMenuShortcut>
                    </ContextMenuItem>
                    <ContextMenuItem>
                        "Save" <ContextMenuShortcut>"⌘S"</ContextMenuShortcut>
                    </ContextMenuItem>
                </ContextMenuGroup>
                <ContextMenuSeparator />
                <ContextMenuGroup>
                    <ContextMenuLabel>"Edit"</ContextMenuLabel>
                    <ContextMenuItem>
                        "Undo" <ContextMenuShortcut>"⌘Z"</ContextMenuShortcut>
                    </ContextMenuItem>
                    <ContextMenuItem>
                        "Redo" <ContextMenuShortcut>"⇧⌘Z"</ContextMenuShortcut>
                    </ContextMenuItem>
                </ContextMenuGroup>
                <ContextMenuSeparator />
                <ContextMenuGroup>
                    <ContextMenuItem>
                        "Cut" <ContextMenuShortcut>"⌘X"</ContextMenuShortcut>
                    </ContextMenuItem>
                    <ContextMenuItem>
                        "Copy" <ContextMenuShortcut>"⌘C"</ContextMenuShortcut>
                    </ContextMenuItem>
                    <ContextMenuItem>
                        "Paste" <ContextMenuShortcut>"⌘V"</ContextMenuShortcut>
                    </ContextMenuItem>
                </ContextMenuGroup>
                <ContextMenuSeparator />
                <ContextMenuGroup>
                    <ContextMenuItem variant="destructive">
                        "Delete" <ContextMenuShortcut>"⌫"</ContextMenuShortcut>
                    </ContextMenuItem>
                </ContextMenuGroup>
            </ContextMenuContent>
        </ContextMenu>
    }
}

Icons

Combine icons with labels for quick scanning.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn ContextIconsExample() -> impl IntoView {
    view! {
        <ContextMenu>
            <ContextMenuTrigger class="flex h-[150px] w-[300px] items-center justify-center rounded-xl border border-dashed text-sm">
                <span class="pointer-fine:hidden">"Long press here"</span>
                <span class="pointer-coarse:hidden">"Right click here"</span>
            </ContextMenuTrigger>
            <ContextMenuContent>
                <ContextMenuGroup>
                    <ContextMenuItem>{icon!(icondata::LuCopy)} "Copy"</ContextMenuItem>
                    <ContextMenuItem>{icon!(icondata::LuScissors)} "Cut"</ContextMenuItem>
                    <ContextMenuItem>{icon!(icondata::LuClipboardPaste)} "Paste"</ContextMenuItem>
                </ContextMenuGroup>
                <ContextMenuSeparator />
                <ContextMenuGroup>
                    <ContextMenuItem variant="destructive">
                        {icon!(icondata::LuTrash)} "Delete"
                    </ContextMenuItem>
                </ContextMenuGroup>
            </ContextMenuContent>
        </ContextMenu>
    }
}

Checkboxes

Checkboxes can be used in context menus.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn ContextCheckboxesExample() -> impl IntoView {
    view! {
        <ContextMenu>
            <ContextMenuTrigger class="flex h-[150px] w-[300px] items-center justify-center rounded-xl border border-dashed text-sm">
                <span class="pointer-fine:hidden">"Long press here"</span>
                <span class="pointer-coarse:hidden">"Right click here"</span>
            </ContextMenuTrigger>
            <ContextMenuContent>
                <ContextMenuGroup>
                    <ContextMenuCheckboxItem checked=true>
                        "Show Bookmarks Bar"
                    </ContextMenuCheckboxItem>
                    <ContextMenuCheckboxItem>"Show Full URLs"</ContextMenuCheckboxItem>
                    <ContextMenuCheckboxItem checked=true>
                        "Show Developer Tools"
                    </ContextMenuCheckboxItem>
                </ContextMenuGroup>
            </ContextMenuContent>
        </ContextMenu>
    }
}

Radio

Radio buttons can be used in context menus.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn ContextRadioExample() -> impl IntoView {
    let user = RwSignal::new("pedro".to_string());
    let theme = RwSignal::new("light".to_string());

    view! {
        <ContextMenu>
            <ContextMenuTrigger class="flex h-[150px] w-[300px] items-center justify-center rounded-xl border border-dashed text-sm">
                <span class="pointer-fine:hidden">"Long press here"</span>
                <span class="pointer-coarse:hidden">"Right click here"</span>
            </ContextMenuTrigger>
            <ContextMenuContent>
                <ContextMenuGroup>
                    <ContextMenuLabel>"People"</ContextMenuLabel>
                    <ContextMenuRadioGroup value=user>
                        <ContextMenuRadioItem value="pedro">"Pedro Duarte"</ContextMenuRadioItem>
                        <ContextMenuRadioItem value="colm">"Colm Tuite"</ContextMenuRadioItem>
                    </ContextMenuRadioGroup>
                </ContextMenuGroup>
                <ContextMenuSeparator />
                <ContextMenuGroup>
                    <ContextMenuLabel>"Theme"</ContextMenuLabel>
                    <ContextMenuRadioGroup value=theme>
                        <ContextMenuRadioItem value="light">"Light"</ContextMenuRadioItem>
                        <ContextMenuRadioItem value="dark">"Dark"</ContextMenuRadioItem>
                        <ContextMenuRadioItem value="system">"System"</ContextMenuRadioItem>
                    </ContextMenuRadioGroup>
                </ContextMenuGroup>
            </ContextMenuContent>
        </ContextMenu>
    }
}

Destructive

Use the destructive variant for irreversible actions.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn ContextDestructiveExample() -> impl IntoView {
    view! {
        <ContextMenu>
            <ContextMenuTrigger class="flex h-[150px] w-[300px] items-center justify-center rounded-xl border border-dashed text-sm">
                <span class="pointer-fine:hidden">"Long press here"</span>
                <span class="pointer-coarse:hidden">"Right click here"</span>
            </ContextMenuTrigger>
            <ContextMenuContent>
                <ContextMenuGroup>
                    <ContextMenuItem>{icon!(icondata::LuPencil)} "Edit"</ContextMenuItem>
                    <ContextMenuItem>{icon!(icondata::LuShare)} "Share"</ContextMenuItem>
                </ContextMenuGroup>
                <ContextMenuSeparator />
                <ContextMenuGroup>
                    <ContextMenuItem variant="destructive">
                        {icon!(icondata::LuTrash)} "Delete"
                    </ContextMenuItem>
                </ContextMenuGroup>
            </ContextMenuContent>
        </ContextMenu>
    }
}

Anatomy

Import all parts and piece them together.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn ContextMenuAnatomy() -> impl IntoView {
    view! {
        <ContextMenu>
            <ContextMenuTrigger />
            <ContextMenuContent>
                <ContextMenuGroup>
                    <ContextMenuLabel />
                    <ContextMenuItem>
                        <ContextMenuShortcut />
                    </ContextMenuItem>
                </ContextMenuGroup>
                <ContextMenuSeparator />
                <ContextMenuSub>
                    <ContextMenuSubTrigger />
                    <ContextMenuSubContent>
                        <ContextMenuGroup>
                            <ContextMenuCheckboxItem />
                            <ContextMenuCheckboxItem />
                        </ContextMenuGroup>
                        <ContextMenuSeparator />
                        <ContextMenuGroup>
                            <ContextMenuRadioGroup>
                                <ContextMenuRadioItem />
                                <ContextMenuRadioItem />
                                <ContextMenuRadioItem />
                            </ContextMenuRadioGroup>
                        </ContextMenuGroup>
                    </ContextMenuSubContent>
                </ContextMenuSub>
            </ContextMenuContent>
        </ContextMenu>
    }
}

API Reference

CheckboxItem

A checkbox item for popover menus.

Custom Attributes
Name	Type	Default	Description
disabled	bool	false	Controls whether the item appears disabled or not.
dismiss	bool	true	Toggle whether clicking this item dismisses the parent menu.
inset	bool	false	Set whether or not this element should display inset from its normal position.
variant	String	""	Set the display variant of the item. Accepted values: "destructive".

Implements global and li attributes.

ContextMenu

Contains all the parts of a context menu.

Custom Attributes
Name	Type	Default	Description
open	bool	false	Reactive signal that can remotely control the open state of the popover but is not coupled to the actual state of the popover.

Implements global attributes.

ContextMenuTrigger

Defines the area where the context menu can be triggered.

Implements global attributes.

Label

Labels groups.

Custom Attributes
Name	Type	Default	Description
inset	bool	false	Set whether or not this element should display inset from its normal position.

Implements global attributes.

MenuContent

The component that pops out when the context menu is open.

Implements global attributes.

MenuGroup

Contains multiple items.

Implements global attributes.

MenuItem

Contains a menu item.

Custom Attributes
Name	Type	Default	Description
disabled	bool	false	Controls whether the item appears disabled or not.
dismiss	bool	true	Toggle whether clicking this item dismisses the parent menu.
inset	bool	false	Set whether or not this element should display inset from its normal position.
variant	String	""	Set the display variant of the item. Accepted values: "destructive".

Implements global and li attributes.

MenuShortcut

Displays next to the item content and indicates keyboard shortcuts.

Implements global attributes.

ContextSubMenu

Contains all the parts of a sub menu.

Custom Attributes
Name	Type	Default	Description
open	bool	false	Reactive signal that can remotely control the open state of the popover but is not coupled to the actual state of the popover.

Implements global attributes.

MenuSubContent

The component that pops out when the sub trigger is triggered.

Implements global attributes.

MenuSubTrigger

Defines the area where a sub menu can be triggered.

Custom Attributes
Name	Type	Default	Description
disabled	bool	false	Controls whether the item appears disabled or not.
inset	bool	false	Set whether or not this element should display inset from its normal position.
variant	String	""	Set the display variant of the item. Accepted values: "destructive".

Implements global and li attributes.

RadioItem

A radio item for popover menus.

Custom Attributes
Name	Type	Default	Description
disabled	bool	false	Controls whether the item appears disabled or not.
dismiss	bool	true	Toggle whether clicking this item dismisses the parent menu.
inset	bool	false	Set whether or not this element should display inset from its normal position.
variant	String	""	Set the display variant of the item. Accepted values: "destructive".

Implements global and li attributes.

Separator

Visually separates groups of menu items.

Implements global attributes.

Getting Started

Components

Context Menu

This component uses newly available browser features

Basic

Submenu

Shortcuts

Groups

Icons

Checkboxes

Radio

Destructive

Anatomy

API Reference

CheckboxItem

ContextMenu

ContextMenuTrigger

Label

MenuContent

MenuGroup

MenuItem

MenuShortcut

ContextSubMenu

MenuSubContent

MenuSubTrigger

RadioItem

Separator