Dropdown Menu

Um menu de ações ou opções disparado por um botão.

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 dropdown-menu --yes

O item dropdown-menu do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/dropdown_menu_component.rb
app/components/ui/dropdown_menu/trigger_component.rb
app/components/ui/dropdown_menu/content_component.rb
app/components/ui/dropdown_menu/item_component.rb
app/components/ui/dropdown_menu/label_component.rb
app/components/ui/dropdown_menu/separator_component.rb
app/components/ui/dropdown_menu/group_component.rb
app/components/ui/dropdown_menu/shortcut_component.rb
app/components/ui/button_component.rb
app/helpers/ui/dropdown_menu_helper.rb
app/helpers/ui/button_helper.rb
app/javascript/controllers/ui_dropdown_menu_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

O controller ui-dropdown-menu implementa o padrão WAI-ARIA de menu: ↑/↓ movem o foco entre os itens (do último, voltam ao primeiro), Home/End vão para as pontas, digitar as primeiras letras leva ao item, e o menu fecha com Esc, Tab ou um clique fora.

<%= ui_dropdown_menu do %>
  <%= ui_dropdown_menu_trigger(variant: :outline) { "Open" } %>
  <%= ui_dropdown_menu_content do %>
    <%= ui_dropdown_menu_label { "My account" } %>
    <%= ui_dropdown_menu_separator %>
    <%= ui_dropdown_menu_item do %>
      Profile
      <%= ui_dropdown_menu_shortcut { "⇧⌘P" } %>

<%= ui_dropdown_menu do %>
  <%= ui_dropdown_menu_trigger(variant: :outline) { "Open" } %>
  <%= ui_dropdown_menu_content do %>
    <%= ui_dropdown_menu_label { "My account" } %>
    <%= ui_dropdown_menu_separator %>
    <%= ui_dropdown_menu_item do %>
      Profile
      <%= ui_dropdown_menu_shortcut { "⇧⌘P" } %>
    <% end %>
  <% end %>
<% end %>

Ou renderize os componentes diretamente:

<%= render Ui::DropdownMenuComponent.new do %>
  <%= render Ui::DropdownMenu::TriggerComponent.new do %>
    Open
  <% end %>
  <%= render Ui::DropdownMenu::ContentComponent.new do %>
    <%= render Ui::DropdownMenu::ItemComponent.new(variant: :destructive) do %>
      Delete
    <% end %>

<%= render Ui::DropdownMenuComponent.new do %>
  <%= render Ui::DropdownMenu::TriggerComponent.new do %>
    Open
  <% end %>
  <%= render Ui::DropdownMenu::ContentComponent.new do %>
    <%= render Ui::DropdownMenu::ItemComponent.new(variant: :destructive) do %>
      Delete
    <% end %>
  <% end %>
<% end %>

Composição

DropdownMenu (data-controller="ui-dropdown-menu")
|-- DropdownMenu::Trigger (Button, aria-haspopup="menu")
`-- DropdownMenu::Content (role="menu")
    |-- DropdownMenu::Label
    |-- DropdownMenu::Separator
    |-- DropdownMenu::Group
    |   `-- DropdownMenu::Item (button/link) > DropdownMenu::Shortcut
    `-- DropdownMenu::Item (variant: :destructive)

DropdownMenu (data-controller="ui-dropdown-menu")
|-- DropdownMenu::Trigger (Button, aria-haspopup="menu")
`-- DropdownMenu::Content (role="menu")
    |-- DropdownMenu::Label
    |-- DropdownMenu::Separator
    |-- DropdownMenu::Group
    |   `-- DropdownMenu::Item (button/link) > DropdownMenu::Shortcut
    `-- DropdownMenu::Item (variant: :destructive)

CheckboxItem, RadioItem and submenus are out of scope for this version.

Exemplos

Padrão

Rótulo, grupos e itens com atalhos. As setas navegam, digitar as primeiras letras leva ao item e Esc fecha.

<%= ui_dropdown_menu do %>
  <%= ui_dropdown_menu_trigger(variant: :outline) { "Open" } %>
  <%= ui_dropdown_menu_content(class: "w-56") do %>
    <%= ui_dropdown_menu_label { "My account" } %>
    <%= ui_dropdown_menu_separator %>
    <%= ui_dropdown_menu_group do %>
      <%= ui_dropdown_menu_item do %>
        Profile

<%= ui_dropdown_menu do %>
  <%= ui_dropdown_menu_trigger(variant: :outline) { "Open" } %>
  <%= ui_dropdown_menu_content(class: "w-56") do %>
    <%= ui_dropdown_menu_label { "My account" } %>
    <%= ui_dropdown_menu_separator %>
    <%= ui_dropdown_menu_group do %>
      <%= ui_dropdown_menu_item do %>
        Profile
        <%= ui_dropdown_menu_shortcut { "⇧⌘P" } %>
      <% end %>
      <%= ui_dropdown_menu_item do %>
        Settings
        <%= ui_dropdown_menu_shortcut { "⌘," } %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

Inset, links e destrutivo

inset: alinha com itens que têm ícone; tag: :a transforma o item em link; variant: :destructive destaca ações perigosas.

<%= ui_dropdown_menu do %>
  <%= ui_dropdown_menu_trigger(variant: :outline) { "Actions" } %>
  <%= ui_dropdown_menu_content(class: "w-56") do %>
    <%= ui_dropdown_menu_label(inset: true) { "Application" } %>
    <%= ui_dropdown_menu_item(inset: true) { "Duplicate" } %>
    <%= ui_dropdown_menu_item(disabled: true, inset: true) { "Unavailable" } %>
    <%= ui_dropdown_menu_separator %>
    <%= ui_dropdown_menu_item(tag: :a, href: "#docs", inset: true) { "Documentation" } %>

<%= ui_dropdown_menu do %>
  <%= ui_dropdown_menu_trigger(variant: :outline) { "Actions" } %>
  <%= ui_dropdown_menu_content(class: "w-56") do %>
    <%= ui_dropdown_menu_label(inset: true) { "Application" } %>
    <%= ui_dropdown_menu_item(inset: true) { "Duplicate" } %>
    <%= ui_dropdown_menu_item(disabled: true, inset: true) { "Unavailable" } %>
    <%= ui_dropdown_menu_separator %>
    <%= ui_dropdown_menu_item(tag: :a, href: "#docs", inset: true) { "Documentation" } %>
    <%= ui_dropdown_menu_separator %>
    <%= ui_dropdown_menu_item(variant: :destructive) do %>
      <%= ui_icon("trash-2") %>
      Delete
    <% end %>
  <% end %>
<% end %>

Referência da API

Todas as partes aceitam class / class_name e **attrs.

Componente	Argumento	Padrão	Descrição
`DropdownMenu::Trigger`	`variant`, `size`	`:outline`, `:default`	Repassados ao `Ui::ButtonComponent` que ele renderiza.
`DropdownMenu::Content`	`side`, `align`	`:bottom`, `:start`	A posição do menu, feita com utilitários.
`DropdownMenu::Item`	`variant`	`:default`	`:destructive` destaca ações perigosas.
`DropdownMenu::Item`	`inset`, `disabled`	`false`	Recua o item para alinhar com os que têm ícone; um item desabilitado é pulado na navegação.
`DropdownMenu::Item`	`tag`	`:button`	Use `:a` com `href` para itens de link.