Documentation

Topic navigation for the Shadwire documentation.

Shadwire

Search the documentation

Search the documentation and component pages by title and by content.

Get started
Introduction
Installation
shadwire.json
Theming
Dark mode
Tools
CLI
Agent skill
Registry
llms.txt
Guides
Composition
Styling
Forms
Icons
Accessibility
Localisation
Blocks
Overview
Components
Overview
Accordion
Alert
Alert Dialog
Aspect Ratio
Avatar
Badge
Breadcrumb
Button
Button Group
Calendar
Card
Carousel
Chart
Checkbox
Collapsible
Combobox
Command
Context Menu
Data Table
Date Picker
Dialog
Drawer
Dropdown Menu
Empty
Field
Hover Card
Icon
Input
Input Group
Input OTP
Item
Kbd
Label
Menubar
Native Select
Navigation Menu
Pagination
Popover
Progress
Radio Group
Resizable
Scroll Area
Select
Separator
Sheet
Sidebar
Skeleton
Slider
Sonner
Spinner
Switch
Table
Tabs
Textarea
Toggle
Toggle Group
Tooltip

Navigation Menu

Navigation whose triggers reveal content panels, one at a time.

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

The navigation-menu registry item installs these files:

  • 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

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

Examples

Default

A trigger with a panel, and a plain link.

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

API reference

Every part accepts class / class_name and **attrs.

Component Argument Default Description
NavigationMenu::Link active false Marks the current page: sets aria-current="page" and data-active.