ContextMenu · shadcn/ui for Phoenix LiveView

Basic

Right-click the dashed area to open a context menu with navigation items and shortcuts.

Right click here

Full Demo

Sub-menus, checkbox items (Show Bookmarks, Show Full URLs), and a radio group (People: Pedro/Colm). Mirrors shadcn's official demo.

Right click here

Server state: bookmarks=true, full_urls=false, person=Pedro

<.context_menu id="full-ctx">
  <.context_menu_trigger>
    <div class="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
      Right click here
    </div>
  </.context_menu_trigger>
  <.context_menu_content class="w-64">
    <.context_menu_item>
      Back
      <.context_menu_shortcut>⌘[</.context_menu_shortcut>
    </.context_menu_item>
    <.context_menu_item>
      Forward
      <.context_menu_shortcut>⌘]</.context_menu_shortcut>
    </.context_menu_item>
    <.context_menu_item>
      Reload
      <.context_menu_shortcut>⌘R</.context_menu_shortcut>
    </.context_menu_item>
    <.context_menu_sub>
      <.context_menu_sub_trigger>More Tools</.context_menu_sub_trigger>
      <.context_menu_sub_content>
        <.context_menu_item>
          Save Page As...
          <.context_menu_shortcut>⇧⌘S</.context_menu_shortcut>
        </.context_menu_item>
        <.context_menu_item>Create Shortcut...</.context_menu_item>
        <.context_menu_item>Name Window...</.context_menu_item>
        <.context_menu_separator />
        <.context_menu_item>Developer Tools</.context_menu_item>
      </.context_menu_sub_content>
    </.context_menu_sub>
    <.context_menu_separator />
    <.context_menu_checkbox_item checked={@show_bookmarks} phx-click="toggle-bookmarks">
      Show Bookmarks Bar
      <.context_menu_shortcut>⌘⇧B</.context_menu_shortcut>
    </.context_menu_checkbox_item>
    <.context_menu_checkbox_item checked={@show_full_urls} phx-click="toggle-full-urls">
      Show Full URLs
    </.context_menu_checkbox_item>
    <.context_menu_separator />
    <.context_menu_label inset>People</.context_menu_label>
    <.context_menu_radio_group>
      <.context_menu_radio_item
        :for={name <- ~w(Pedro Colm)}
        checked={@person == name}
        phx-click="set-person"
        phx-value-val={name}
      >
        {name}
      </.context_menu_radio_item>
    </.context_menu_radio_group>
  </.context_menu_content>
</.context_menu>

With Icons

Items with leading icons.

Right click here

Destructive Item

Use variant="destructive" for dangerous actions.

Right click here

Disabled Items

Disabled items are visually dimmed and skipped by keyboard navigation.

Right click here