shadcn-rails

Navigation Menu

A collection of links for navigating websites.

Requires JavaScript

Installation

Add the component to your project:

rails generate shadcn:component navigation_menu

Usage

<%= render Shadcn::NavigationMenuComponent.new do |nav| %>
  <% nav.with_list do |list| %>
    <% list.with_item do |item| %>
      <% item.with_trigger { "Getting Started" } %>
      <% item.with_dropdown do %>
        <ul class="grid gap-3 p-4 md:w-[400px]">
          <li>
            <a href="#" class="block p-3 rounded-md hover:bg-accent">
              <div class="text-sm font-medium">Introduction</div>
              <p class="text-sm text-muted-foreground">Learn about the library.</p>
            </a>
          </li>
          <li>
            <a href="#" class="block p-3 rounded-md hover:bg-accent">
              <div class="text-sm font-medium">Installation</div>
              <p class="text-sm text-muted-foreground">How to set up your project.</p>
            </a>
          </li>
        </ul>
      <% end %>
    <% end %>
    <% list.with_item do |item| %>
      <% item.with_link(href: "/docs") { "Documentation" } %>
    <% 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. 

<%= render Shadcn::NavigationMenuComponent.new do |nav| %>
  <% nav.with_list do |list| %>
    <% list.with_item do |item| %>
      <% item.with_trigger { "Products" } %>
      <% item.with_dropdown do %>
        <ul class="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2">
          <li>
            <a href="#" class="block select-none space-y-1 rounded-md p-3 hover:bg-accent">
              <div class="text-sm font-medium">Analytics</div>
              <p class="text-sm text-muted-foreground">
                Track your metrics and performance.
              </p>
            </a>
          </li>
          <li>
            <a href="#" class="block select-none space-y-1 rounded-md p-3 hover:bg-accent">
              <div class="text-sm font-medium">Engagement</div>
              <p class="text-sm text-muted-foreground">
                Tools to boost user engagement.
              </p>
            </a>
          </li>
        </ul>
      <% end %>
    <% end %>
  <% end %>
<% end %>

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-rails", to: "shadcn/index.js"

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

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

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

Or import just this controller:

import NavigationMenuController from "shadcn-rails/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"

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