Menubar

Uma barra de menus horizontal (padrão WAI-ARIA menubar) coordenada por um controller.

Instalação

O Shadwire segue o modelo open code do shadcn/ui: o código-fonte do componente é copiado para o seu app e passa a ser seu. Instale com a CLI:

shadwire add menubar --yes

O item menubar do registry instala estes arquivos:

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

Este componente usa Stimulus, então a aplicação precisa de importmap-rails e stimulus-rails com carregamento automático de controllers.

Ainda não instalou a CLI? gem install shadwire e depois shadwire init.

Uso

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

Exemplos

Padrão

Dois menus com itens, separadores e atalhos.

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

<%= ui_menubar do %>
  <%= ui_menubar_menu do %>
    <%= ui_menubar_trigger { "Arquivo" } %>
    <%= ui_menubar_content do %>
      <%= ui_menubar_item do %>
        Novo
        <%= ui_menubar_shortcut { "⌘N" } %>
      <% end %>
      <%= ui_menubar_item { "Abrir" } %>
      <%= ui_menubar_separator %>
      <%= ui_menubar_item { "Imprimir" } %>
    <% end %>
  <% end %>
  <%= ui_menubar_menu do %>
    <%= ui_menubar_trigger { "Editar" } %>
    <%= ui_menubar_content do %>
      <%= ui_menubar_item { "Desfazer" } %>
      <%= ui_menubar_item { "Refazer" } %>
    <% end %>
  <% end %>
<% end %>

Referência da API

Toda parte aceita class / class_name e **attrs.

Componente	Argumento	Padrão	Descrição
`Menubar::Content`	`align`	`:start`	Alinha o menu com o gatilho: `:start`, `:center` ou `:end`.
`Menubar::Item`	`inset`	`false`	Recua o texto para alinhar com os itens que têm ícone.
`Menubar::Item`	`variant`	`:default`	`:destructive` marca uma ação perigosa.
`Menubar::Item`	`disabled`	`false`	Desabilita: não recebe clique e o teclado o pula.
`Menubar::Item`	`tag`	`:button`	`:a` com `href:` para um item que navega.
`Menubar::Label`	`inset`	`false`	Recua o texto para alinhar com os itens que têm ícone.