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, 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_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 %>

<%= 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 %>
  <% end %>
<% end %>

Exemplos

Padrão

Um 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 { "Products" } %>
      <%= ui_navigation_menu_content(class: "w-64") do %>
        <%= ui_navigation_menu_link(href: "#") do %>
          <span class="text-sm font-medium">Components</span>
          <span class="text-xs text-muted-foreground">Ready-made building blocks.</span>

<%= ui_navigation_menu do %>
  <%= ui_navigation_menu_list do %>
    <%= ui_navigation_menu_item do %>
      <%= ui_navigation_menu_trigger { "Products" } %>
      <%= ui_navigation_menu_content(class: "w-64") do %>
        <%= ui_navigation_menu_link(href: "#") do %>
          <span class="text-sm font-medium">Components</span>
          <span class="text-xs text-muted-foreground">Ready-made building blocks.</span>
        <% end %>
        <%= ui_navigation_menu_link(href: "#") do %>
          <span class="text-sm font-medium">Templates</span>
          <span class="text-xs text-muted-foreground">Whole pages.</span>
        <% end %>
      <% end %>
    <% end %>
    <%= ui_navigation_menu_item do %>
      <%= ui_navigation_menu_link(href: "#", class: "inline-flex h-9 items-center px-4 font-medium") { "Documentation" } %>
    <% end %>
  <% end %>
<% end %>

Referência da API

Toda parte aceita class / class_name e **attrs.

Componente	Argumento	Padrão	Descrição
`NavigationMenu::Link`	`active`	`false`	Marca a página atual: define `aria-current="page"` e `data-active`.

Documentação

Navigation Menu

Instalação

Uso

Exemplos

Padrão

Referência da API