Context Menu

A menu opened with the right mouse button, positioned at the pointer, with keyboard navigation.

Installation

Shadwire follows shadcn/ui's open code model: the component's source is copied into your application and becomes yours. Install it with the CLI:

shadwire add context-menu --yes

The context-menu registry item installs these files:

app/components/ui_component.rb
app/components/ui/context_menu_component.rb
app/components/ui/context_menu/trigger_component.rb
app/components/ui/context_menu/content_component.rb
app/components/ui/context_menu/item_component.rb
app/components/ui/context_menu/label_component.rb
app/components/ui/context_menu/separator_component.rb
app/components/ui/context_menu/group_component.rb
app/components/ui/context_menu/shortcut_component.rb
app/helpers/ui/context_menu_helper.rb
app/javascript/controllers/ui_context_menu_controller.js
vendor/shadwire/shadwire.css

This component uses Stimulus, so the application needs importmap-rails and stimulus-rails with automatic controller loading.

Haven't installed the CLI yet? gem install shadwire, then shadwire init.

Usage

<%= ui_context_menu do %>
  <%= ui_context_menu_trigger { "Right-click here" } %>
  <%= ui_context_menu_content do %>
    <%= ui_context_menu_item { "Voltar" } %>
  <% end %>
<% end %>

Examples

Default

An area that opens the menu on right-click.

Right-click here

<%= ui_context_menu do %>
  <%= ui_context_menu_trigger(class: "flex h-32 w-72 items-center justify-center rounded-md border border-dashed text-sm text-muted-foreground") { "Right-click here" } %>
  <%= ui_context_menu_content(class: "w-48") do %>
    <%= ui_context_menu_label { "Actions" } %>
    <%= ui_context_menu_item do %>
      Back
      <%= ui_context_menu_shortcut { "⌘[" } %>
    <% end %>

<%= ui_context_menu do %>
  <%= ui_context_menu_trigger(class: "flex h-32 w-72 items-center justify-center rounded-md border border-dashed text-sm text-muted-foreground") { "Right-click here" } %>
  <%= ui_context_menu_content(class: "w-48") do %>
    <%= ui_context_menu_label { "Actions" } %>
    <%= ui_context_menu_item do %>
      Back
      <%= ui_context_menu_shortcut { "⌘[" } %>
    <% end %>
    <%= ui_context_menu_item { "Forward" } %>
    <%= ui_context_menu_separator %>
    <%= ui_context_menu_item(variant: :destructive) { "Delete" } %>
  <% end %>
<% end %>

API reference

Every part accepts class / class_name and **attrs.

Component	Argument	Default	Description
`ContextMenu::Item`	`inset`	`false`	Indents it to line up with the items that have an icon.
`ContextMenu::Item`	`variant`	`:default`	`:destructive` marks a dangerous action.
`ContextMenu::Item`	`disabled`	`false`	Disables it: not clickable, and skipped by the keyboard.
`ContextMenu::Item`	`tag`	`:button`	`:a` with `href:` for an item that navigates.
`ContextMenu::Label`	`inset`	`false`	Indents it to line up with the items that have an icon.