shadcn-rails

Navigation Menu

A collection of links for navigating websites.

Requires JavaScript
navigation-menu/default 
<%= render Shadcn::NavigationMenuComponent.new do |nav| %>
  <% nav.with_list do |list| %>
    <% list.with_item do |item| %>
      <% item.with_link(href: "/docs") { "Documentation" } %>
    <% end %>
    <% list.with_item do |item| %>
      <% item.with_link(href: "/components") { "Components" } %>
    <% end %>
    <% list.with_item do |item| %>
      <% item.with_link(href: "/examples", active: true) { "Examples" } %>
    <% end %>
  <% end %>
<% end %>

Installation

Add the component to your project:

rails generate shadcn:add navigation_menu

Usage

<%= render Shadcn::NavigationMenuComponent.new do |nav| %>
  <% nav.with_list do |list| %>
    <% list.with_item do |item| %>
      <% item.with_link(href: "/docs") { "Documentation" } %>
    <% end %>
    <% list.with_item do |item| %>
      <% item.with_link(href: "/components") { "Components" } %>
    <% end %>
    <% list.with_item do |item| %>
      <% item.with_link(href: "/examples", active: true) { "Examples" } %>
    <% end %>
  <% end %>
<% end %>

Examples

Simple Links

Use with_link for items that navigate directly without a dropdown. 

<%= render Shadcn::NavigationMenuComponent.new do |nav| %>
  <% nav.with_list do |list| %>
    <% list.with_item do |item| %>
      <% item.with_link(href: "/docs") { "Documentation" } %>
    <% end %>
    <% list.with_item do |item| %>
      <% item.with_link(href: "/components") { "Components" } %>
    <% end %>
    <% list.with_item do |item| %>
      <% item.with_link(href: "/examples", active: true) { "Examples" } %>
    <% end %>
  <% end %>
<% end %>

With Dropdown Content

Add dropdown content with with_trigger and with_dropdown.

API Reference

NavigationMenuComponent

The root container for the navigation menu.

Slots

Slot Description
with_list Container for navigation items (yields NavigationMenuListComponent)

NavigationMenuListComponent Slots

Slot Description
with_item Individual navigation item (yields NavigationMenuItemComponent)

NavigationMenuItemComponent Slots

Slot Props Description
with_trigger - Button that opens dropdown content
with_dropdown - Dropdown content area
with_link href:, active: Direct link (no dropdown)

Stimulus Controller

This component requires JavaScript. The Stimulus controller shadcn--navigation-menu provides interactivity.

Handles navigation menu interactions with dropdown content areas.

Installation

Add to your config/importmap.rb:

pin "shadcn", to: "index.esm.js"

Then in your app/javascript/controllers/index.js:

import { Application } from "@hotwired/stimulus"
import { registerShadcnControllers } from "shadcn"

const application = Application.start()
registerShadcnControllers(application)

Or import just this controller:

import NavigationMenuController from "shadcn-rails-stimulus/controllers/navigation_menu_controller"

application.register("shadcn--navigation-menu", NavigationMenuController)

Targets

Name Description
list Navigation list container
item Individual menu items
trigger Dropdown trigger buttons
content Dropdown content areas
viewport Content viewport

Values

Name Type Default Description
openIndex Number -1 Currently open item index
delayDuration Number 200 Hover delay before opening (ms)
skipDelayDuration Number 300 Delay before closing (ms)

Actions

Action Description
toggle Toggle dropdown open/closed
hoverOpen Open on hover (with delay)
hoverClose Close on hover leave (with delay)

TypeScript

Type definitions are included. Import types as needed: 

import type { NavigationMenuController } from "shadcn-rails-stimulus"

Accessibility

  • Uses role="navigation" via semantic <nav> element
  • Triggers have proper aria-expanded state
  • Keyboard navigation:
    • Arrow Left/Arrow Right to navigate between items
    • Escape to close dropdown
  • Click outside to close dropdown