Context Menu

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

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-md border border-dashed text-sm">
                "Right click here"
            </ContextMenuTrigger>
            <ContextMenuContent>
                <ContextMenuGroup>
                    <ContextMenuLabel>"My Account"</ContextMenuLabel>
                    <ContextMenuItem>
                        "Profile" <ContextMenuShortcut>"⇧⌘P"</ContextMenuShortcut>
                    </ContextMenuItem>
                    <ContextMenuItem>
                        "Billing" <ContextMenuShortcut>"⌘B"</ContextMenuShortcut>
                    </ContextMenuItem>
                    <ContextMenuItem>
                        "Settings" <ContextMenuShortcut>"⌘S"</ContextMenuShortcut>
                    </ContextMenuItem>
                    <ContextMenuItem>
                        "Keyboard shortcuts" <ContextMenuShortcut>"⌘K"</ContextMenuShortcut>
                    </ContextMenuItem>
                </ContextMenuGroup>
                <ContextMenuSeparator />
                <ContextMenuGroup>
                    <ContextMenuItem>"GitHub"</ContextMenuItem>
                    <ContextMenuItem>"Support"</ContextMenuItem>
                    <ContextMenuItem disabled=true>"API"</ContextMenuItem>
                </ContextMenuGroup>
                <ContextMenuSeparator />
                <ContextMenuGroup>
                    <ContextMenuItem variant="destructive">
                        {icon!(icondata::LuTrash2)} "Delete Account"
                    </ContextMenuItem>
                    <ContextMenuItem>
                        {icon!(icondata::LuLogOut)} "Logout"
                        <ContextMenuShortcut>"⇧⌘Q"</ContextMenuShortcut>
                    </ContextMenuItem>
                </ContextMenuGroup>
            </ContextMenuContent>
        </ContextMenu>
    }
}

Anatomy

Import all parts and piece them together.

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

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

API Reference

ContextMenu

Contains all the parts of a context menu.

Implements global attributes.

ContextMenuContent

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

Implements global attributes.

ContextMenuGroup

Contains multiple items.

Implements global attributes.

ContextMenuItem

Contains a menu item.

Custom Attributes
Name	Type	Default	Description
disabled	bool	false	Controls whether the item appears disabled or not.
variant	String	""	Set the display variant of the item. Accepted values: "destructive".

Implements global and li attributes.

ContextMenuLabel

Labels groups.

Implements global attributes.

ContextMenuSeparator

Visually separates groups of menu items.

Implements global attributes.

ContextMenuShortcut

Displays next to the item content and indicates keyboard shortcuts.

Implements global attributes.

ContextMenuTrigger

Defines the area where the context menu can be triggered.

Implements global attributes.