Menubar

A horizontal menu bar (the WAI-ARIA menubar pattern) coordinated by a controller.

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 menubar --yes

The menubar registry item installs these files:

app/components/ui_component.rb
app/components/ui/menubar_component.rb
app/components/ui/menubar/menu_component.rb
app/components/ui/menubar/trigger_component.rb
app/components/ui/menubar/content_component.rb
app/components/ui/menubar/item_component.rb
app/components/ui/menubar/separator_component.rb
app/components/ui/menubar/label_component.rb
app/components/ui/menubar/shortcut_component.rb
app/helpers/ui/menubar_helper.rb
app/javascript/controllers/ui_menubar_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_menubar do %>
  <%= ui_menubar_menu do %>
    <%= ui_menubar_trigger { "File" } %>
    <%= ui_menubar_content do %>
      <%= ui_menubar_item { "New" } %>
    <% end %>
  <% end %>
<% end %>

Examples

Default

Two menus with items, separators and shortcuts.

<%= ui_menubar do %>
  <%= ui_menubar_menu do %>
    <%= ui_menubar_trigger { "File" } %>
    <%= ui_menubar_content do %>
      <%= ui_menubar_item do %>
        New
        <%= ui_menubar_shortcut { "⌘N" } %>
      <% end %>

<%= ui_menubar do %>
  <%= ui_menubar_menu do %>
    <%= ui_menubar_trigger { "File" } %>
    <%= ui_menubar_content do %>
      <%= ui_menubar_item do %>
        New
        <%= ui_menubar_shortcut { "⌘N" } %>
      <% end %>
      <%= ui_menubar_item { "Open" } %>
      <%= ui_menubar_separator %>
      <%= ui_menubar_item { "Print" } %>
    <% end %>
  <% end %>
  <%= ui_menubar_menu do %>
    <%= ui_menubar_trigger { "Edit" } %>
    <%= ui_menubar_content do %>
      <%= ui_menubar_item { "Undo" } %>
      <%= ui_menubar_item { "Redo" } %>
    <% end %>
  <% end %>
<% end %>

API reference

Every part accepts class / class_name and **attrs.

Component	Argument	Default	Description
`Menubar::Content`	`align`	`:start`	Aligns the menu with its trigger: `:start`, `:center` or `:end`.
`Menubar::Item`	`inset`	`false`	Indents it to line up with the items that have an icon.
`Menubar::Item`	`variant`	`:default`	`:destructive` marks a dangerous action.
`Menubar::Item`	`disabled`	`false`	Disables it: not clickable, and skipped by the keyboard.
`Menubar::Item`	`tag`	`:button`	`:a` with `href:` for an item that navigates.
`Menubar::Label`	`inset`	`false`	Indents it to line up with the items that have an icon.