// Generated by scripts/generate-showcase.mjs. Do not edit directly. page ContextMenuDetail { layout = "showcase" state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"label\":\"Open dashboard\",\"description\":\"View the operational workspace\",\"value\":\"dashboard\",\"icon\":\"icon-[lucide--layout-dashboard]\"},{\"label\":\"Share record\",\"value\":\"share\",\"icon\":\"icon-[lucide--share-2]\",\"shortcut\":\"Ctrl S\"},{\"type\":\"divider\"},{\"label\":\"Delete record\",\"value\":\"delete\",\"icon\":\"icon-[lucide--trash-2]\",\"danger\":true}]") state playground_open = (ctx.url.searchParams.get("pg_open") ?? "false") === "true" state playground_defaultOpen = (ctx.url.searchParams.get("pg_defaultOpen") ?? "false") === "true" state playground_trigger = ctx.url.searchParams.get("pg_trigger") ?? "click" state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "pointer" state playground_align = ctx.url.searchParams.get("pg_align") ?? "start" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "raised" state playground_title = ctx.url.searchParams.get("pg_title") ?? "Context Menu example" state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default context menu for a modern application." state playground_label = ctx.url.searchParams.get("pg_label") ?? "Context Menu" state playground_closeOnSelect = (ctx.url.searchParams.get("pg_closeOnSelect") ?? "true") === "true" state playground_closeOnOutside = (ctx.url.searchParams.get("pg_closeOnOutside") ?? "true") === "true" state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true" state playground_minWidth = ctx.url.searchParams.get("pg_minWidth") ?? "14rem" state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "20rem" state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" seo { title = "Context Menu" description = "Open an accessible keyboard-aware action menu from pointer or keyboard context interactions." } view {
Overlays component

Context Menu

Open an accessible keyboard-aware action menu from pointer or keyboard context interactions.

18 props4 slots4 outputsTheme readyResponsive
Interactive playground

Configure Context Menu

Change any prop and inspect the server-rendered component immediately.

Live preview
Right-click for contextual actions
Component code
<ContextMenu
  items='[
    {
      "id": "context-menu-0-1",
      "key": "context-menu-0-1",
      "value": "primary",
      "label": "Primary workflow",
      "title": "Primary workflow",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "A configurable sample message.",
      "href": "#context-menu-demo",
      "actionHref": "#context-menu-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 16,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "context-menu-0-2",
      "key": "context-menu-0-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "Another configurable message.",
      "href": "#context-menu-demo",
      "actionHref": "#context-menu-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 32,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
  title="Context Menu example"
  description="A polished default context menu for a modern application."
  label="Context Menu">
  <div data-slot="trigger">
    <div class="showcase-slot">trigger slot</div>
  </div>
  <div data-slot="header">
    <div class="showcase-slot">header slot</div>
  </div>
  <div data-slot="footer">
    <div class="showcase-slot">footer slot</div>
  </div>
</ContextMenu>
Event outputInteract with the preview to inspect the typed payload.
Component props18 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Right-click record actions

Expose actions that apply to the selected record or canvas location.

01
Live preview

Right-click or use the trigger button

Right-click for contextual actions
Component usage.wrn
<ContextMenu
  items='[
    {
      "label": "Open dashboard",
      "description": "View the operational workspace",
      "value": "dashboard",
      "icon": "icon-[lucide--layout-dashboard]"
    },
    {
      "label": "Share record",
      "value": "share",
      "icon": "icon-[lucide--share-2]",
      "shortcut": "Ctrl S"
    },
    {
      "type": "divider"
    },
    {
      "label": "Delete record",
      "value": "delete",
      "icon": "icon-[lucide--trash-2]",
      "danger": true
    }
  ]'
  title="Record actions"
  description="Right-click the target surface"
  label="Context Menu">
  <div data-slot="trigger">
    <div class="showcase-context-target">Right-click for contextual actions</div>
  </div>
  <div data-slot="header">
    <div class="showcase-slot">header slot</div>
  </div>
  <div data-slot="footer">
    <div class="showcase-slot">footer slot</div>
  </div>
</ContextMenu>
Compact

Click-triggered compact menu

Use a button-triggered context menu when discoverability matters.

02
Live preview

Right-click or use the trigger button

Component usage.wrn
<ContextMenu
  items='[
    {
      "label": "Open dashboard",
      "description": "View the operational workspace",
      "value": "dashboard",
      "icon": "icon-[lucide--layout-dashboard]"
    },
    {
      "label": "Share record",
      "value": "share",
      "icon": "icon-[lucide--share-2]",
      "shortcut": "Ctrl S"
    },
    {
      "type": "divider"
    },
    {
      "label": "Delete record",
      "value": "delete",
      "icon": "icon-[lucide--trash-2]",
      "danger": true
    }
  ]'
  trigger="click"
  align="center"
  size="sm"
  variant="secondary"
  title="Quick actions"
  description="A compact configuration for dashboards and dense product surfaces."
  label="Compact example"
  minWidth="12rem">
  <div data-slot="trigger">
    <button type="button" class="showcase-action">Open quick actions</button>
  </div>
  <div data-slot="header">
    <div class="showcase-slot">header slot</div>
  </div>
  <div data-slot="footer">
    <div class="showcase-slot">footer slot</div>
  </div>
</ContextMenu>
Advanced

Pointer and keyboard menu

Support right-click, click, and keyboard activation without forcing the menu open.

03
Live preview

Right-click or use the trigger button

Component usage.wrn
<ContextMenu
  items='[
    {
      "label": "Open dashboard",
      "description": "View the operational workspace",
      "value": "dashboard",
      "icon": "icon-[lucide--layout-dashboard]"
    },
    {
      "label": "Share record",
      "value": "share",
      "icon": "icon-[lucide--share-2]",
      "shortcut": "Ctrl S"
    },
    {
      "type": "divider"
    },
    {
      "label": "Delete record",
      "value": "delete",
      "icon": "icon-[lucide--trash-2]",
      "danger": true
    }
  ]'
  trigger="both"
  placement="bottom-start"
  align="end"
  size="lg"
  variant="soft"
  title="Accessible actions"
  description="A richer configuration demonstrating additional content and hierarchy."
  label="Advanced example">
  <div data-slot="trigger">
    <button type="button" class="showcase-action">Click, press Enter, or right-click</button>
  </div>
  <div data-slot="header">
    <div class="showcase-slot">header slot</div>
  </div>
  <div data-slot="footer">
    <div class="showcase-slot">footer slot</div>
  </div>
</ContextMenu>
Component outputs

Receive every typed component output

Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.

@openFires after the component opens.
@closeFires after the component closes.
@selectFires when an item, option, card, or result is selected.
@actionFires when the component's primary or item action is activated.
Declarative handlers.wrn
<ContextMenu
  @open='console.log(payload)'
  @close='console.log(payload)'
  @select='console.log(payload)'
  @action='console.log(payload)'
/>
Direct output handlers.js
import { registerOutputHandler } from "@wrnexus/csr/outputs"

const component = document.querySelector("[data-ui-component=\"ContextMenu\"], [data-component=\"ContextMenu\"]")

if (component) registerOutputHandler(component, "open", (payload) => {
  console.log("open", payload)
})

if (component) registerOutputHandler(component, "close", (payload) => {
  console.log("close", payload)
})

if (component) registerOutputHandler(component, "select", (payload) => {
  console.log("select", payload)
})

if (component) registerOutputHandler(component, "action", (payload) => {
  console.log("action", payload)
})
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
itemsunknown[][]No
openbooleanfalseNo
defaultOpenbooleanfalseNo
triggerstring"contextmenu"No
placementstring"pointer"No
alignstring"start"No
sizestring"default"No
colorstring"primary"No
variantstring"raised"No
titlestring""No
descriptionstring""No
labelstring"Context menu"No
closeOnSelectbooleantrueNo
closeOnOutsidebooleantrueNo
disabledbooleanfalseNo
minWidthstring"14rem"No
maxWidthstring"20rem"No
classstring""No
} }