Headless Context Menu

Overview of the Phoenix and LiveView Headless Context Menu Component

The Mishka Chelekom Headless Context Menu ships zero opinionated styling - only the semantic markup, full WAI-ARIA wiring, and paired-presence state (data-open/data-closed). Right-click or long-press the trigger area to open the popup at the cursor, clamped to the viewport. It is composed from per-row function components - item, checkbox item, radio group / radio item, link item, separator, group, and submenu - so you can either use the idiomatic :item / :submenu slots for flat rows or compose the context_menu_* row components as children for arbitrary order and nested submenus - even mix both. Every part is addressable through a *_class attribute, so you style it entirely with your own Tailwind classes while the accessibility and behavior keep working underneath.

**Headless = bring your own design.** The examples below are a faithful port of Base UI's own Context Menu demo. Copy them, then swap the classes for your design system - the behavior never changes.

Base UI Context Menu example - flat items (Phoenix headless)

Right click here

<.context_menu
  id="baseui-context_menu-hero"
  trigger_class="flex h-[12rem] w-[15rem] items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none font-normal dark:border-white dark:bg-neutral-950 dark:text-white"
  popup_class="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
>
  <:trigger>Right click here</:trigger>
  <:item class="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[disabled]:text-neutral-500 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-neutral-400">
    Add to Library
  </:item>
  <:item class="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[disabled]:text-neutral-500 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-neutral-400">
    Add to Playlist
  </:item>
  <:item type="separator" class="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
  <:item class="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[disabled]:text-neutral-500 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-neutral-400">
    Play Next
  </:item>
  <:item class="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[disabled]:text-neutral-500 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-neutral-400">
    Play Last
  </:item>
  <:item type="separator" class="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
  <:item class="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[disabled]:text-neutral-500 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-neutral-400">
    Favorite
  </:item>
  <:item class="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[disabled]:text-neutral-500 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-neutral-400">
    Share
  </:item>
</.context_menu>

Base UI Context Menu example - nested submenu (Phoenix headless)

Right click here

<.context_menu
  id="baseui-context_menu-submenu"
  trigger_class="flex h-[12rem] w-[15rem] items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none font-normal dark:border-white dark:bg-neutral-950 dark:text-white"
  popup_class="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
>
  <:trigger>Right click here</:trigger>
  <.context_menu_item class="flex cursor-default py-2 pr-6 pl-4 text-sm leading-4 outline-hidden select-none data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 data-[disabled]:text-neutral-500 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white dark:data-[disabled]:text-neutral-400">
    Add to Library
  </.context_menu_item>
  <.context_menu_submenu
    id="baseui-context_menu-submenu-playlist"
    label="Add to Playlist"
    trigger_class="flex cursor-default items-center justify-between gap-4 py-2 pr-2 pl-4 text-sm leading-4 outline-hidden select-none data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 data-[disabled]:text-neutral-500 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white dark:data-[disabled]:text-neutral-400"
    popup_class="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
  >
    <:chevron>
      <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style="display: block">
        <path d="M6 12V4l4.5 4z" />
      </svg>
    </:chevron>
    <.context_menu_item class="flex cursor-default py-2 pr-6 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-['']">
      Get Up!
    </.context_menu_item>
    <.context_menu_item class="flex cursor-default py-2 pr-6 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-['']">
      Inside Out
    </.context_menu_item>
    <.context_menu_item class="flex cursor-default py-2 pr-6 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-['']">
      Night Beats
    </.context_menu_item>
    <.context_menu_separator class="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
    <.context_menu_item class="flex cursor-default py-2 pr-6 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-['']">
      New playlist…
    </.context_menu_item>
  </.context_menu_submenu>
  <.context_menu_separator class="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
  <.context_menu_item class="flex cursor-default py-2 pr-6 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-['']">
    Play Next
  </.context_menu_item>
  <.context_menu_item class="flex cursor-default py-2 pr-6 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-['']">
    Play Last
  </.context_menu_item>
  <.context_menu_separator class="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
  <.context_menu_item class="flex cursor-default py-2 pr-6 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-['']">
    Favorite
  </.context_menu_item>
  <.context_menu_item class="flex cursor-default py-2 pr-6 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-['']">
    Share
  </.context_menu_item>
</.context_menu>

Parts & data attributes

Each part carries a stable data-part and a structural chelekom-context_menu__* class you can target, plus paired-presence state for open/closed transitions.

Part	data-part	State / ARIA	Purpose
Trigger	trigger	aria-haspopup, aria-expanded, aria-controls, data-popup-open	The area to right-click / long-press to open the menu at the cursor.
Popup	popup	role="menu", data-open, data-closed, data-starting-style	The menu surface; positioned fixed at the cursor.
Item	item	role="menuitem", data-highlighted, data-disabled	A plain, activatable row.
Checkbox item	checkbox-item	role="menuitemcheckbox", aria-checked, data-checked, data-unchecked, data-highlighted, data-disabled	A toggleable row with a checked indicator span.
Radio group / Radio item	radio-group / radio-item	role="group" / role="menuitemradio", aria-checked, data-value, data-checked, data-unchecked, data-highlighted, data-disabled	Single-select rows sharing a name/group.
Link item	link-item	role="menuitem", data-highlighted	Renders as an anchor with an href.
Separator / Group / Group label	separator / group / group-label	role="separator" / role="group" / role="presentation"	Visual divider and labeled row groupings.
Submenu trigger / Submenu popup	submenu-trigger / submenu-popup	aria-haspopup, aria-expanded, aria-controls, data-popup-open, data-highlighted, data-disabled, data-open, data-closed	Opens a nested menu on hover or ArrowRight.

Accessibility

Follows the WAI-ARIA Menu pattern : focus moves into the popup on open and is restored to the previous element on close. Up/Down navigate, Home/End jump to the first/last enabled row, ArrowRight opens a submenu, ArrowLeft or Escape closes it, and typing performs typeahead. Enter or Space activates the highlighted row.

Name	Type	Required	Description
id	string	Yes	Unique id; anchors the aria relationships.
disabled	boolean	No	Disable all interaction.
on_open_change	string	No	LiveView event pushed on open/close (payload carries the open flag).
on_open_change_target	string	No	Optional pushEventTo target for on_open_change.
class / trigger_class / popup_class	any	No	Extra classes for the root, trigger wrapper, and popup surface.
trigger (slot)	slot	Yes	The area to right-click / long-press to open the menu.
item (slot)	type, disabled, checked, value, name, href, label, keep_open, on_change, on_change_target, class	No	A flat menu row; type selects item / checkbox / radio / link / separator / label.
submenu (slot)	label, disabled, trigger_class, popup_class	No	A nested submenu; put its :item rows inside.
inner_block (slot)	slot	No	Compose rows with the context_menu_item / context_menu_checkbox / context_menu_radio_group / context_menu_radio / context_menu_link / context_menu_separator / context_menu_group / context_menu_submenu components instead of the item/submenu slots.
rest	global	No	Any other HTML attributes are passed through to the root.

Name	Type	Options	Recommended?
`--type`	string	context_menu	Yes
`--only`	string	context_menu	Yes
`--module`	string	Something	NO

Mishka

Overview of the Phoenix and LiveView Headless Context Menu Component

Base UI Context Menu example - flat items (Phoenix headless)

Base UI Context Menu example - nested submenu (Phoenix headless)

Parts & data attributes

Accessibility

Headless Context Menu component props

ContextMenu CLI Arguments