Context Menu

A menu at the pointer, opened by right-click. Keyboard navigation, typeahead, and viewport collision handling.

Basic Context Menu

Right-click the trigger; navigate with arrow keys / Home / End / Enter / Escape / typeahead.

Last action: (none)

<BitBhContextMenu>
    <BitBhContextMenuTrigger class="grid place-items-center w-full min-h-36 px-8 py-8 rounded-xl border-2 border-dashed border-zinc-300 text-sm text-zinc-500 select-none cursor-context-menu transition-colors data-state-open:border-blue-600 data-state-open:text-blue-700">
        Right-click here
    </BitBhContextMenuTrigger>
    <BitBhContextMenuContent class="z-[9999] m-0 min-w-44 list-none rounded-lg border border-zinc-200 bg-white p-1 shadow-lg outline-none">
        <BitBhContextMenuItem OnClick='@(() => Log("Back"))'    class="flex items-center gap-2 rounded-md px-2.5 py-2 text-sm cursor-pointer text-zinc-900 list-none data-active:bg-blue-50 data-active:text-blue-700 data-disabled:opacity-40 data-disabled:cursor-not-allowed" Label="Back">Back</BitBhContextMenuItem>
        <BitBhContextMenuItem OnClick='@(() => Log("Forward"))' class="flex items-center gap-2 rounded-md px-2.5 py-2 text-sm cursor-pointer text-zinc-900 list-none data-active:bg-blue-50 data-active:text-blue-700 data-disabled:opacity-40 data-disabled:cursor-not-allowed" Label="Forward" Disabled="true">Forward</BitBhContextMenuItem>
        <BitBhContextMenuItem OnClick='@(() => Log("Reload"))'  class="flex items-center gap-2 rounded-md px-2.5 py-2 text-sm cursor-pointer text-zinc-900 list-none data-active:bg-blue-50 data-active:text-blue-700 data-disabled:opacity-40 data-disabled:cursor-not-allowed" Label="Reload">Reload</BitBhContextMenuItem>
    </BitBhContextMenuContent>
</BitBhContextMenu>

@code {
    private string? lastAction;
    private void Log(string action) => lastAction = action;
}

Labels, groups and separators

Label, Group and Separator structure the menu; they're skipped by keyboard nav.

Last action: (none)

<BitBhContextMenu>
    <BitBhContextMenuTrigger class="grid place-items-center w-full min-h-36 px-8 py-8 rounded-xl border-2 border-dashed border-zinc-300 text-sm text-zinc-500 select-none cursor-context-menu transition-colors data-state-open:border-blue-600 data-state-open:text-blue-700">
        Right-click for a structured menu
    </BitBhContextMenuTrigger>
    <BitBhContextMenuContent class="z-[9999] m-0 min-w-44 list-none rounded-lg border border-zinc-200 bg-white p-1 shadow-lg outline-none">
        <BitBhContextMenuLabel class="px-2.5 pt-1.5 pb-0.5 text-xs font-semibold uppercase tracking-wider text-zinc-500 list-none">Edit</BitBhContextMenuLabel>
        <BitBhContextMenuGroup class="list-none">
            <BitBhContextMenuItem OnClick='@(() => Log("Cut"))'   class="flex items-center gap-2 rounded-md px-2.5 py-2 text-sm cursor-pointer text-zinc-900 list-none data-active:bg-blue-50 data-active:text-blue-700" Label="Cut">Cut <span class="ml-auto text-xs text-zinc-500">⌘X</span></BitBhContextMenuItem>
            <BitBhContextMenuItem OnClick='@(() => Log("Copy"))'  class="flex items-center gap-2 rounded-md px-2.5 py-2 text-sm cursor-pointer text-zinc-900 list-none data-active:bg-blue-50 data-active:text-blue-700" Label="Copy">Copy <span class="ml-auto text-xs text-zinc-500">⌘C</span></BitBhContextMenuItem>
            <BitBhContextMenuItem OnClick='@(() => Log("Paste"))' class="flex items-center gap-2 rounded-md px-2.5 py-2 text-sm cursor-pointer text-zinc-900 list-none data-active:bg-blue-50 data-active:text-blue-700" Label="Paste">Paste <span class="ml-auto text-xs text-zinc-500">⌘V</span></BitBhContextMenuItem>
        </BitBhContextMenuGroup>
        <BitBhContextMenuSeparator class="my-1 block h-px bg-zinc-200 list-none" />
        <BitBhContextMenuLabel class="px-2.5 pt-1.5 pb-0.5 text-xs font-semibold uppercase tracking-wider text-zinc-500 list-none">Danger zone</BitBhContextMenuLabel>
        <BitBhContextMenuItem OnClick='@(() => Log("Delete"))' class="flex items-center gap-2 rounded-md px-2.5 py-2 text-sm cursor-pointer text-red-600 list-none data-active:bg-red-50 data-active:text-red-700" Label="Delete">Delete</BitBhContextMenuItem>
    </BitBhContextMenuContent>
</BitBhContextMenu>

Disabled menu

Disabled="true" on the root lets the native browser menu through.

Right-click here (disabled — native menu shows)

<BitBhContextMenu Disabled="true">
    <BitBhContextMenuTrigger class="grid place-items-center w-full min-h-36 px-8 py-8 rounded-xl border-2 border-dashed border-zinc-300 text-sm text-zinc-500 select-none cursor-default">
        Right-click here (disabled — native menu shows)
    </BitBhContextMenuTrigger>
    <BitBhContextMenuContent class="z-[9999] m-0 min-w-44 list-none rounded-lg border border-zinc-200 bg-white p-1 shadow-lg outline-none">
        <BitBhContextMenuItem OnClick='@(() => Log("Never"))' class="..." Label="Never">Never runs</BitBhContextMenuItem>
    </BitBhContextMenuContent>
</BitBhContextMenu>