Wraps content with a context menu that opens on right-click (or long-press where the platform maps it to contextmenu) at the pointer, and from the keyboard with Shift+F10 or the Menu key, anchored to the focused element.

<.context_menu id="file-ctx" label="File actions">
  <.card>Right-click me</.card>
  <:menu>
    <.menu_item phx-click="open">Open</.menu_item>
    <.menu_item phx-click="rename">Rename</.menu_item>
    <.menu_separator />
    <.menu_item color="danger" phx-click="delete">Delete</.menu_item>
  </:menu>
</.context_menu>

The items support everything menu/1 items do, submenus included. Focus returns to where it was when the menu closes. The wrapper is focusable so keyboard users can open the menu even when the content has no focusable element; pass tabindex="-1" to opt out when it does.

Attributes

• id (:string) (required)
• label (:string) - accessible name of the menu, defaults to "Context menu". Defaults to nil.
• tabindex (:string) - Defaults to "0".
• class (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• menu (required)
• inner_block (required)

Renders a menu button and its dropdown.

<.menu id="user-menu" placement="bottom-end">
  <:trigger variant="outline">Account <.icon name="chevron-down" /></:trigger>
  <.menu_label>Signed in as mc</.menu_label>
  <.menu_item navigate={~p"/settings"}><.icon name="cog" /> Settings</.menu_item>
  <.menu_separator />
  <.menu_item color="danger" phx-click="logout"><.icon name="logout" /> Sign out</.menu_item>
</.menu>

Keyboard: Enter/Space/Arrow keys open, arrows move, Home/End jump, typing jumps by label, Escape and Tab close. All positioning is CSS anchor positioning with a JS fallback for older engines.

Attributes

• id (:string) (required)
• placement (:string) - Defaults to "bottom-start". Must be one of "bottom-start", "bottom-end", "top-start", or "top-end".
• class (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• trigger (required) - Accepts attributes:
  • style (:string)
  • variant (:string)
  • color (:string)
  • size (:string)
  • icon (:boolean)
  • aria_label (:string)
  • class (:any)
• inner_block (required)

A menu item. Renders a link when navigate, patch or href is set.

Attributes

• color (:string) - Defaults to "neutral". Must be one of "neutral", or "danger".
• disabled (:boolean) - Defaults to false.
• keep_open (:boolean) - don't close the menu when activated. Defaults to false.
• href (:any) - Defaults to nil.
• navigate (:string) - Defaults to nil.
• patch (:string) - Defaults to nil.
• class (:any) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["method", "download", "target"].

Slots

• inner_block (required)

A non-interactive label inside a menu.

Slots

• inner_block (required)

A separator between menu groups.

A submenu: a menu item that opens a nested menu beside it.

<.menu_sub id="share-sub" label="Share">
  <.menu_item>Copy link</.menu_item>
  <.menu_item>Email</.menu_item>
</.menu_sub>

Opens on hover, click, or ArrowRight; ArrowLeft and Escape close it and return focus to the parent item.

Attributes

• id (:string) (required)
• label (:string) (required)
• disabled (:boolean) - Defaults to false.
• class (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• icon
• inner_block (required)