blatui

Components

Context Menu

Displays a menu located at the pointer, triggered by a right click.

php artisan blatui:add context-menu
Right click here 
<x-ui.context-menu>
    <x-ui.context-menu-trigger class="border-input flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
        Right click here
    </x-ui.context-menu-trigger>
    <x-ui.context-menu-content class="w-64">
        <x-ui.context-menu-item inset>
            Back
            <x-ui.context-menu-shortcut>⌘[</x-ui.context-menu-shortcut>
        </x-ui.context-menu-item>
        <x-ui.context-menu-item inset disabled>
            Forward
            <x-ui.context-menu-shortcut>⌘]</x-ui.context-menu-shortcut>
        </x-ui.context-menu-item>
        <x-ui.context-menu-item inset>
            Reload
            <x-ui.context-menu-shortcut>⌘R</x-ui.context-menu-shortcut>
        </x-ui.context-menu-item>
        <x-ui.context-menu-separator />
        <x-ui.context-menu-checkbox-item :checked="true">
            Show Bookmarks Bar
            <x-ui.context-menu-shortcut>⌘⇧B</x-ui.context-menu-shortcut>
        </x-ui.context-menu-checkbox-item>
        <x-ui.context-menu-checkbox-item>Show Full URLs</x-ui.context-menu-checkbox-item>
        <x-ui.context-menu-separator />
        <x-ui.context-menu-label inset>People</x-ui.context-menu-label>
        <x-ui.context-menu-radio-group value="pedro">
            <x-ui.context-menu-radio-item value="pedro">Pedro Duarte</x-ui.context-menu-radio-item>
            <x-ui.context-menu-radio-item value="colm">Colm Tuite</x-ui.context-menu-radio-item>
        </x-ui.context-menu-radio-group>
    </x-ui.context-menu-content>
</x-ui.context-menu>

Submenu

Right click here 
<x-ui.context-menu>
    <x-ui.context-menu-trigger class="border-input flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
        Right click here
    </x-ui.context-menu-trigger>
    <x-ui.context-menu-content class="w-52">
        <x-ui.context-menu-item>Back</x-ui.context-menu-item>
        <x-ui.context-menu-item>Reload</x-ui.context-menu-item>
        <x-ui.context-menu-sub>
            <x-ui.context-menu-sub-trigger>More tools</x-ui.context-menu-sub-trigger>
            <x-ui.context-menu-sub-content class="w-44">
                <x-ui.context-menu-item>Save page as…</x-ui.context-menu-item>
                <x-ui.context-menu-item>Create shortcut…</x-ui.context-menu-item>
                <x-ui.context-menu-separator />
                <x-ui.context-menu-item>Developer tools</x-ui.context-menu-item>
            </x-ui.context-menu-sub-content>
        </x-ui.context-menu-sub>
        <x-ui.context-menu-separator />
        <x-ui.context-menu-item>View source</x-ui.context-menu-item>
    </x-ui.context-menu-content>
</x-ui.context-menu>

With Icons

Right click here 
<x-ui.context-menu>
    <x-ui.context-menu-trigger class="border-input flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
        Right click here
    </x-ui.context-menu-trigger>
    <x-ui.context-menu-content class="w-52">
        <x-ui.context-menu-item><x-lucide-copy aria-hidden="true" /> Copy <x-ui.context-menu-shortcut>⌘C</x-ui.context-menu-shortcut></x-ui.context-menu-item>
        <x-ui.context-menu-item><x-lucide-scissors aria-hidden="true" /> Cut <x-ui.context-menu-shortcut>⌘X</x-ui.context-menu-shortcut></x-ui.context-menu-item>
        <x-ui.context-menu-item><x-lucide-clipboard aria-hidden="true" /> Paste <x-ui.context-menu-shortcut>⌘V</x-ui.context-menu-shortcut></x-ui.context-menu-item>
        <x-ui.context-menu-separator />
        <x-ui.context-menu-item variant="destructive"><x-lucide-trash-2 aria-hidden="true" /> Delete</x-ui.context-menu-item>
    </x-ui.context-menu-content>
</x-ui.context-menu>

API Reference

Props, slots and exposed methods for <x-ui.context-menu>.

Props

Prop Type Default Description
href string — Set on <x-ui.context-menu-item>. Renders the item as a link (<a>) to this URL instead of a button.
variant string 'default' Set on <x-ui.context-menu-item>. Use destructive to style dangerous actions in the destructive color.
default destructive
inset bool false Set on an item, label, or sub-trigger to add left padding so its text aligns with items that have a leading icon or check.
disabled bool false Set on <x-ui.context-menu-item> to disable it (not focusable, not clickable, dimmed).
closeOnSelect bool true Set on <x-ui.context-menu-item> (true) — closes the menu after the item is chosen. On checkbox/radio items it defaults to false so the menu stays open while toggling.
checked bool false Set on <x-ui.context-menu-checkbox-item> for its initial checked state.
value string — On <x-ui.context-menu-radio-group> it is the initially selected value; on each <x-ui.context-menu-radio-item> it is that option's value. The matching item is shown as selected.

Slots

Slot Description
default Compose the menu from <x-ui.context-menu-trigger> and <x-ui.context-menu-content>. The wrapper holds the shared open/position state.
trigger Content of <x-ui.context-menu-trigger> — the region the user right-clicks to open the menu at the pointer.
content Content of <x-ui.context-menu-content> — items, labels, separators, groups, checkbox/radio items, and submenus. Teleported to <body> and positioned at the cursor.

Methods

Available on the component's Alpine scope — call them from markup in the slot (e.g. @click="…").

Method Description
openAt(event) Opens the menu at the pointer position from a contextmenu event (the trigger wires this on @contextmenu) and focuses the first item.
closeMenu(returnFocus = true) Closes the menu and, unless returnFocus is false, restores focus to the trigger.