Shadwire
Componentes

Navigation Menu

Uma navegação com gatilhos que revelam painéis de conteúdo, um de cada vez.

Instalação

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

shadwire add navigation-menu --yes

O item navigation-menu do registry instala estes arquivos:

  • app/components/ui_component.rb
  • app/components/ui/navigation_menu_component.rb
  • app/components/ui/navigation_menu/list_component.rb
  • app/components/ui/navigation_menu/item_component.rb
  • app/components/ui/navigation_menu/trigger_component.rb
  • app/components/ui/navigation_menu/content_component.rb
  • app/components/ui/navigation_menu/link_component.rb
  • app/components/ui/icon_component.rb
  • app/helpers/ui/navigation_menu_helper.rb
  • app/helpers/ui/icon_helper.rb
  • app/javascript/controllers/ui_navigation_menu_controller.js
  • vendor/shadwire/shadwire.css

Este componente usa Stimulus: 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_navigation_menu do %>
  <%= ui_navigation_menu_list do %>
    <%= ui_navigation_menu_item do %>
      <%= ui_navigation_menu_trigger { "Produtos" } %>
      <%= ui_navigation_menu_content do %>
        <%= ui_navigation_menu_link(href: "#") { "Item" } %>
      <% end %>
    <% end %>

Exemplos

Padrão

Gatilho com painel e um link simples.

<%= ui_navigation_menu do %>
  <%= ui_navigation_menu_list do %>
    <%= ui_navigation_menu_item do %>
      <%= ui_navigation_menu_trigger { "Produtos" } %>
      <%= ui_navigation_menu_content(class: "w-64") do %>
        <%= ui_navigation_menu_link(href: "#") do %>
          <span class="text-sm font-medium">Componentes</span>
          <span class="text-xs text-muted-foreground">Blocos prontos para usar.</span>