DocsComponentsContext menu

Context menu

A menu opened with a right click on its area.

Alpine.jsdepends on dropdown-menu1 file

<pb-ui.context-menu>
  <pb-slot:trigger><div class="grid h-40 w-72 place-items-center rounded-md border border-dashed text-sm text-muted-foreground">Right click here</div></pb-slot:trigger>
  <pb-ui.dropdown-menu-item>Previous</pb-ui.dropdown-menu-item>
  <pb-ui.dropdown-menu-item>Next</pb-ui.dropdown-menu-item>
  <pb-ui.dropdown-menu-item>Reload</pb-ui.dropdown-menu-item>
  <pb-ui.dropdown-menu-separator />
  <pb-ui.dropdown-menu-label>Tools</pb-ui.dropdown-menu-label>
  <pb-ui.dropdown-menu-item>Save page as…</pb-ui.dropdown-menu-item>
  <pb-ui.dropdown-menu-item variant="destructive">Delete</pb-ui.dropdown-menu-item>
</pb-ui.context-menu>

Installation

pyblade-ui add context-menu

Install the dependencies
dropdown-menu and Alpine.js, loaded in your <head>.

Copy this file into your project

components/ui/context_menu.html

@props({'trigger': ''})
<div data-slot="context-menu" x-data="{ open: false, x: 0, y: 0 }"
  x-on:contextmenu.prevent="open = true; x = Math.min($event.clientX, window.innerWidth - 224); y = Math.min($event.clientY, window.innerHeight - 40)"
  x-on:keydown.escape.window="open = false" x-on:scroll.window="open = false" class="contents">
  <div data-slot="context-menu-trigger" class="contents">{{ trigger }}</div>
  <div role="menu" data-slot="context-menu-content" x-show="open" x-cloak x-on:click.outside="open = false" x-on:click="open = false"
    x-bind:style="{ left: x + 'px', top: y + 'px' }"
    x-transition:enter="duration-100 ease-out" x-transition:enter-start="scale-95 opacity-0" x-transition:enter-end="scale-100 opacity-100"
    {{ attributes.cn("fixed z-50 min-w-[12rem] origin-top-left overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md") }}>{{ slot }}</div>
</div>

Update the path to fit your project
The components folder is the one set in pyblade.toml.

Usage

The tag <pb-ui.context-menu> is available in all your templates.

<pb-ui.context-menu>
  <pb-slot:trigger><div class="grid h-36 place-items-center rounded-md border border-dashed">Right click here</div></pb-slot:trigger>
  <pb-ui.dropdown-menu-item>Back</pb-ui.dropdown-menu-item>
  <pb-ui.dropdown-menu-item>Reload</pb-ui.dropdown-menu-item>
</pb-ui.context-menu>

Props

Prop	Default
trigger	''

Any other attribute (class, id, x-on:click, hx-post…) is passed to the root element; your Tailwind classes win over the component's.

‹ Dropdown menu Menubar ›