Components / Context Menu

Context Menu

Stable Stimulus: senren--context-menu

right-click actions on rows or canvases

Right-click anywhere in this area

Usage example #

Copy this ERB into a Rails view after installing the component. The snippet below is the same code used by the live preview above.

app/views/.../context_menu_example.html.erb

<%= render Senren::ContextMenuComponent.new do |menu| %>
  <% menu.with_trigger do %>
    <div class="flex h-32 w-full max-w-md items-center justify-center rounded-lg border border-dashed border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-muted)/0.4)] text-sm text-[hsl(var(--senren-muted-foreground))]">
      Right-click anywhere in this area
    </div>
  <% end %>
  <% menu.with_item(href: "#") { "Open" } %>
  <% menu.with_item(href: "#") { "Rename" } %>
  <% menu.with_item(href: "#", destructive: true) { "Delete" } %>
<% end %>

Install this component #

Copy the official component into your app

This component requires Stimulus. Keep --client so the controller is copied with the ViewComponent.

Terminal

bin/rails senren:add context_menu --client

Create a custom component with the same conventions

Use this when you need an app-specific component that follows Senren's ViewComponent and Stimulus structure. --client is required for this behavior.

Terminal

bin/rails generate senren:component context_menu --client

Dependencies are resolved by senren:add: dropdown_menu.

At a glance #

Category Overlays

Class name Senren::ContextMenuComponent

Stimulus senren--context-menu

Variants default

Depends on dropdown_menu

Pairs with table, data_table

Source #

app/components/senren/context_menu_component.html.erb

<div data-controller="senren--context-menu" class="relative" data-senren-component="context_menu">
  <div data-senren--context-menu-target="trigger" data-action="contextmenu->senren--context-menu#open">
    <%= trigger %>
  </div>
  <div data-senren--context-menu-target="menu" role="menu" hidden
       class="absolute z-50 w-56 rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-popover))] text-[hsl(var(--senren-popover-foreground))] p-1 shadow-md">
    <% items.each do |it| %>
      <%= it %>
    <% end %>
  </div>
</div>

app/components/senren/context_menu_component.rb

# frozen_string_literal: true

module Senren
  class ContextMenuComponent < BaseComponent
    renders_one  :trigger
    renders_many :items, DropdownMenuComponent::ItemTag

    VARIANTS = { default: '' }.freeze
    SIZES    = { md: '' }.freeze
  end
end

AI agent rules #

Use for

+right-click actions on rows or canvases

Avoid

-primary navigation; main page actions

Accessibility #

Triggered by right-click and keyboard equivalent (Shift+F10).
Must be reachable without a pointer.

Sheet

Breadcrumb