Headless Menu

New version v0.0.9 🚀

An unstyled, fully accessible menu button for Phoenix LiveView, roving highlight, typeahead, checkbox/radio items, labeled groups, hover-to-open, and nested submenus built in. You bring the styling.

Installation:

mix mishka.ui.gen.headless menu

Source: View Source

Package: Mishka Chelekom

Tags:

Headless Base UI Accessible JS

Overview of the Phoenix and LiveView Headless Menu Component

The Mishka Chelekom Headless Menu ships zero opinionated styling - only the semantic markup, full WAI-ARIA wiring, and paired-presence state (data-open/data-closed). Click (or, with open_on_hover, hover) the trigger to open the popup, anchored by side/ align with edge-flip and viewport clamp. It is composed from per-row parts - item, checkbox item, radio group / radio item, link item, group / group label, separator, and submenu trigger / submenu popup - so you can either use the idiomatic :item / :submenu slots for flat rows or compose the 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 Menu demo. Copy them, then swap the classes for your design system - the behavior never changes.

Base UI Menu example - flat items (Phoenix headless)

<.menu
  id="baseui-menu-hero"
  side_offset={8}
  trigger_class="flex h-8 items-center justify-center gap-1.5 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 pl-3 pr-2 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-[disabled]:bg-neutral-100 dark:hover:not-data-[disabled]:bg-neutral-800 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800"
  popup_class="relative origin-[var(--transform-origin)] border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 py-1 text-neutral-950 dark:text-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none 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"
>
  <:trigger>
    Song
    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M12 6H4l4 4.5z" /></svg>
  </:trigger>
  <:item class="flex cursor-default py-2 pr-8 pl-4 text-sm select-none outline-hidden data-[highlighted]:relative data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-10 data-[highlighted]:before:bg-neutral-950 dark:data-[highlighted]:before:bg-white data-[highlighted]:text-white dark:data-[highlighted]:text-neutral-950">
    Add to Library
  </:item>
  <:item class="flex cursor-default py-2 pr-8 pl-4 text-sm select-none outline-hidden data-[highlighted]:relative data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-10 data-[highlighted]:before:bg-neutral-950 dark:data-[highlighted]:before:bg-white data-[highlighted]:text-white dark:data-[highlighted]:text-neutral-950">
    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 select-none outline-hidden data-[highlighted]:relative data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-10 data-[highlighted]:before:bg-neutral-950 dark:data-[highlighted]:before:bg-white data-[highlighted]:text-white dark:data-[highlighted]:text-neutral-950">
    Play Next
  </:item>
  <:item class="flex cursor-default py-2 pr-8 pl-4 text-sm select-none outline-hidden data-[highlighted]:relative data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-10 data-[highlighted]:before:bg-neutral-950 dark:data-[highlighted]:before:bg-white data-[highlighted]:text-white dark:data-[highlighted]:text-neutral-950">
    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 select-none outline-hidden data-[highlighted]:relative data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-10 data-[highlighted]:before:bg-neutral-950 dark:data-[highlighted]:before:bg-white data-[highlighted]:text-white dark:data-[highlighted]:text-neutral-950">
    Favorite
  </:item>
  <:item class="flex cursor-default py-2 pr-8 pl-4 text-sm select-none outline-hidden data-[highlighted]:relative data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-10 data-[highlighted]:before:bg-neutral-950 dark:data-[highlighted]:before:bg-white data-[highlighted]:text-white dark:data-[highlighted]:text-neutral-950">
    Share
  </:item>
</.menu>

Base UI Menu example - labeled radio and checkbox groups (Phoenix headless)

<.menu
  id="baseui-menu-group-labels"
  side_offset={8}
  trigger_class="flex h-8 items-center justify-center gap-1.5 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 pl-3 pr-2 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-[disabled]:bg-neutral-100 dark:hover:not-data-[disabled]:bg-neutral-800 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800"
  popup_class="relative origin-[var(--transform-origin)] border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 py-1 text-neutral-950 dark:text-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none 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"
>
  <:trigger>
    View
    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M12 6H4l4 4.5z" /></svg>
  </:trigger>
  <:check_icon>
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="m2.5 8.5 4 4 7-9" /></svg>
  </:check_icon>
  <:item type="label" class="py-2 pr-8 pl-[2.125rem] text-sm text-neutral-500 dark:text-neutral-400 select-none">
    Sort
  </:item>
  <:item type="radio" name="view-sort" value="date" checked={true} class="grid grid-cols-[1rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm select-none outline-hidden data-[highlighted]:relative data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-10 data-[highlighted]:before:bg-neutral-950 dark:data-[highlighted]:before:bg-white data-[highlighted]:text-white dark:data-[highlighted]:text-neutral-950" indicator_class="col-start-1 data-[unchecked]:invisible">
    <span class="col-start-2">Date</span>
  </:item>
  <:item type="radio" name="view-sort" value="name" class="grid grid-cols-[1rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm select-none outline-hidden data-[highlighted]:relative data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-10 data-[highlighted]:before:bg-neutral-950 dark:data-[highlighted]:before:bg-white data-[highlighted]:text-white dark:data-[highlighted]:text-neutral-950" indicator_class="col-start-1 data-[unchecked]:invisible">
    <span class="col-start-2">Name</span>
  </:item>
  <:item type="radio" name="view-sort" value="type" class="grid grid-cols-[1rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm select-none outline-hidden data-[highlighted]:relative data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-10 data-[highlighted]:before:bg-neutral-950 dark:data-[highlighted]:before:bg-white data-[highlighted]:text-white dark:data-[highlighted]:text-neutral-950" indicator_class="col-start-1 data-[unchecked]:invisible">
    <span class="col-start-2">Type</span>
  </:item>
  <:item type="separator" class="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
  <:item type="label" class="py-2 pr-8 pl-[2.125rem] text-sm text-neutral-500 dark:text-neutral-400 select-none">
    Workspace
  </:item>
  <:item type="checkbox" checked={true} class="grid grid-cols-[1rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm select-none outline-hidden data-[highlighted]:relative data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-10 data-[highlighted]:before:bg-neutral-950 dark:data-[highlighted]:before:bg-white data-[highlighted]:text-white dark:data-[highlighted]:text-neutral-950" indicator_class="col-start-1 data-[unchecked]:invisible">
    <span class="col-start-2">Minimap</span>
  </:item>
  <:item type="checkbox" checked={true} class="grid grid-cols-[1rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm select-none outline-hidden data-[highlighted]:relative data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-10 data-[highlighted]:before:bg-neutral-950 dark:data-[highlighted]:before:bg-white data-[highlighted]:text-white dark:data-[highlighted]:text-neutral-950" indicator_class="col-start-1 data-[unchecked]:invisible">
    <span class="col-start-2">Search</span>
  </:item>
  <:item type="checkbox" checked={false} class="grid grid-cols-[1rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm select-none outline-hidden data-[highlighted]:relative data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-10 data-[highlighted]:before:bg-neutral-950 dark:data-[highlighted]:before:bg-white data-[highlighted]:text-white dark:data-[highlighted]:text-neutral-950" indicator_class="col-start-1 data-[unchecked]:invisible">
    <span class="col-start-2">Sidebar</span>
  </:item>
</.menu>

Base UI Menu example - nested submenu (Phoenix headless)

<.menu
  id="baseui-menu-submenu"
  side_offset={8}
  trigger_class="flex h-8 items-center justify-center gap-1.5 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 pl-3 pr-2 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-[disabled]:bg-neutral-100 dark:hover:not-data-[disabled]:bg-neutral-800 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800"
  popup_class="relative origin-[var(--transform-origin)] border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 py-1 text-neutral-950 dark:text-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none 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"
>
  <:trigger>
    Song
    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M12 6H4l4 4.5z" /></svg>
  </:trigger>
  <.menu_item class="flex cursor-default py-2 pr-6 pl-4 text-sm select-none outline-hidden data-[highlighted]:relative data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-10 data-[highlighted]:before:bg-neutral-950 dark:data-[highlighted]:before:bg-white data-[highlighted]:text-white dark:data-[highlighted]:text-neutral-950">
    Add to Library
  </.menu_item>
  <.menu_submenu
    id="baseui-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 select-none outline-hidden data-[popup-open]:relative data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:-z-10 data-[popup-open]:before:bg-neutral-100 dark:data-[popup-open]:before:bg-neutral-800 data-[highlighted]:relative data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-10 data-[highlighted]:before:bg-neutral-950 dark:data-[highlighted]:before:bg-white data-[highlighted]:text-white dark:data-[highlighted]:text-neutral-950"
    popup_class="relative origin-[var(--transform-origin)] border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 py-1 text-neutral-950 dark:text-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none 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"
  >
    <:chevron>
      <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M6 12V4l4.5 4z" /></svg>
    </:chevron>
    <.menu_item class="flex cursor-default py-2 pr-6 pl-4 text-sm select-none outline-hidden data-[highlighted]:relative data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-10 data-[highlighted]:before:bg-neutral-950 dark:data-[highlighted]:before:bg-white data-[highlighted]:text-white dark:data-[highlighted]:text-neutral-950">
      Get Up!
    </.menu_item>
    <.menu_item class="flex cursor-default py-2 pr-6 pl-4 text-sm select-none outline-hidden data-[highlighted]:relative data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-10 data-[highlighted]:before:bg-neutral-950 dark:data-[highlighted]:before:bg-white data-[highlighted]:text-white dark:data-[highlighted]:text-neutral-950">
      Inside Out
    </.menu_item>
    <.menu_separator class="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
    <.menu_item class="flex cursor-default py-2 pr-6 pl-4 text-sm select-none outline-hidden data-[highlighted]:relative data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-10 data-[highlighted]:before:bg-neutral-950 dark:data-[highlighted]:before:bg-white data-[highlighted]:text-white dark:data-[highlighted]:text-neutral-950">
      New playlist…
    </.menu_item>
  </.menu_submenu>
  <.menu_separator class="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
  <.menu_item class="flex cursor-default py-2 pr-6 pl-4 text-sm select-none outline-hidden data-[highlighted]:relative data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-10 data-[highlighted]:before:bg-neutral-950 dark:data-[highlighted]:before:bg-white data-[highlighted]:text-white dark:data-[highlighted]:text-neutral-950">
    Play Next
  </.menu_item>
  <.menu_item class="flex cursor-default py-2 pr-6 pl-4 text-sm select-none outline-hidden data-[highlighted]:relative data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-10 data-[highlighted]:before:bg-neutral-950 dark:data-[highlighted]:before:bg-white data-[highlighted]:text-white dark:data-[highlighted]:text-neutral-950">
    Play Last
  </.menu_item>
</.menu>

Parts & data attributes

Each part carries a stable data-part and a structural chelekom-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, data-disabled	The button that opens the menu.
Popup	popup	role="menu", data-open, data-closed, data-side, data-align	The menu surface, anchored and flipped to stay in the viewport.
Item	item	role="menuitem", data-highlighted, data-disabled	A plain, activatable row.
Checkbox item / indicator	checkbox-item / checkbox-item-indicator	role="menuitemcheckbox", aria-checked, data-checked, data-unchecked, data-highlighted, data-disabled	A toggleable row with a checked indicator span.
Radio group / Radio item / indicator	radio-group / radio-item / radio-item-indicator	role="group" / role="menuitemradio", aria-checked, data-value, data-checked, data-unchecked, data-highlighted, data-disabled	Single-select rows sharing a name.
Link item	link-item	role="menuitem", data-highlighted	Renders as an anchor with an href.
Group / Group label	group / group-label	role="group" / role="presentation", aria-labelledby	Labeled row groupings.
Separator	separator	role="separator", data-orientation	A visual divider between rows.
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 Button pattern : focus moves into the popup on open and is restored to the trigger 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.

Headless Menu component props

Name	Type	Required	Description
id	string	Yes	Unique id; anchors the aria relationships.
disabled	boolean	No	Disable all interaction.
on_open_change / on_open_change_target	string	No	LiveView event pushed on open/close (payload carries the open flag), and an optional pushEventTo target.
side	"top" \| "right" \| "bottom" \| "left"	No	Preferred side to anchor the popup. Defaults to "bottom".
align	"start" \| "center" \| "end"	No	Alignment along the side. Defaults to "start".
side_offset / align_offset	integer	No	Gap between the trigger and popup, and offset along the alignment axis (px).
open_on_hover / delay / close_delay	boolean / integer	No	Open the menu on trigger hover, with configurable open/close delay (ms).
loop	boolean	No	Loop arrow-key focus past the ends. Defaults to true.
class / trigger_class / popup_class	any	No	Extra classes for the root, trigger button, and popup surface.
trigger (slot)	slot	Yes	The button that opens the menu.
check_icon (slot)	slot	No	Shared glyph rendered inside every checkbox/radio indicator (overrides the default check mark / dot).
item (slot)	type, disabled, checked, value, name, href, label, keep_open, on_change, on_change_target, class, indicator_class	No	A flat menu row; type selects item / checkbox / radio / link / separator / label.
submenu (slot)	label, disabled	No	A nested submenu; put its rows (menu_item, ...) inside.
inner_block (slot)	slot	No	Compose rows with the menu_item / menu_checkbox / menu_radio_group / menu_radio / menu_link / menu_separator / menu_group / menu_submenu components instead of the item/submenu slots.
rest	global	No	Any other HTML attributes are passed through to the root.

Menu CLI Arguments

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