Context Menu

A menu that appears at the pointer position in response to a right-click.

Right-click here

Last action: None

Installation

biji-ui = { version = "0.5.0", features = ["context_menu"] }

Usage

use leptos::prelude::*;
use biji_ui::components::context_menu;

#[component]
pub fn MyContextMenu() -> impl IntoView {
    view! {
        <context_menu::Root>
            <context_menu::Trigger class="flex h-32 w-48 items-center justify-center rounded-md border border-dashed border-border text-sm text-muted-foreground">
                "Right-click here"
            </context_menu::Trigger>
            <context_menu::Content class="z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-background py-1 shadow-md text-sm">
                <context_menu::Item
                    class="px-3 py-1.5 cursor-default select-none outline-none hover:bg-accent data-[highlighted]:bg-accent"
                    on_select={Callback::new(|_| { /* handle action */ })}
                >
                    "Copy"
                </context_menu::Item>
                <context_menu::Item
                    class="px-3 py-1.5 cursor-default select-none outline-none hover:bg-accent data-[highlighted]:bg-accent"
                >
                    "Paste"
                </context_menu::Item>
                <context_menu::Separator class="my-1 border-t border-border" />
                <context_menu::Item
                    class="px-3 py-1.5 cursor-default select-none outline-none hover:bg-accent data-[highlighted]:bg-accent text-destructive"
                    on_select={Callback::new(|_| { /* handle action */ })}
                >
                    "Delete"
                </context_menu::Item>
            </context_menu::Content>
        </context_menu::Root>
    }
}

RootWith

Use RootWith to access ContextMenuState inline via the let: binding. The state exposes open, pointer_x, and pointer_y as reactive signals.

Right-click to open

Right-click here

use leptos::prelude::*;
use biji_ui::components::context_menu;

#[component]
pub fn MyContextMenu() -> impl IntoView {
    view! {
        <context_menu::RootWith let:m>
            <p class="text-sm text-muted-foreground">
                {move || if m.open.get() { "Menu is open" } else { "Right-click to open" }}
            </p>
            <context_menu::Trigger class="flex h-24 w-48 items-center justify-center rounded-md border border-dashed border-border text-sm text-muted-foreground">
                "Right-click here"
            </context_menu::Trigger>
            <context_menu::Content class="z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-background py-1 shadow-md text-sm">
                <context_menu::Item class="px-3 py-1.5 cursor-default select-none outline-none hover:bg-accent">
                    "Copy"
                </context_menu::Item>
                <context_menu::Item class="px-3 py-1.5 cursor-default select-none outline-none hover:bg-accent">
                    "Paste"
                </context_menu::Item>
            </context_menu::Content>
        </context_menu::RootWith>
    }
}

API Reference

Root / RootWith

Name	Type	Default	Description
class	String	""	CSS class applied to the root wrapper element.
allow_loop	bool	true	Whether keyboard navigation wraps around at the ends.
hide_delay	Duration	200ms	Delay before the panel is removed from the DOM after closing.
on_open_change	Option<Callback<bool>>	None	Fired with true when the menu opens and false when it closes.

Trigger

Name	Type	Default	Description
class	String	""	CSS class applied to the trigger div.

Content

Name	Type	Default	Description
class	String	""	CSS class applied to the floating menu panel.
show_class	String	""	Extra class added while the panel is visible.
hide_class	String	""	Extra class added while the panel is animating out.

Item

Name	Type	Default	Description
class	String	""	CSS class applied to the item element.
disabled	bool	false	When true, the item cannot be selected.
on_select	Option<Callback<()>>	None	Fired when the item is selected by click or Enter/Space.

Data Attributes

Attribute	Description
data-state	"open" or "closed". Present on Trigger.
data-highlighted	Present on Item when it has keyboard focus or the mouse is over it.
data-disabled	Present on Item when it is disabled.

Keyboard Navigation

Key	Description
`ArrowDown`	Moves focus to the next item.
`ArrowUp`	Moves focus to the previous item.
`Home`	Moves focus to the first item.
`End`	Moves focus to the last item.
`Enter / Space`	Activates the focused item and closes the menu.
`Escape`	Closes the menu.
`Tab`	Closes the menu.