Navigation Menu

A horizontal nav menu for site headers. Ports the structural pieces of shadcn/ui's Radix Navigation Menu — no dropdown viewport.

Example

live_example do
  sui.navigation_menu do
    sui.navigation_menu_item { sui.navigation_menu_link "Home", root_path }
    sui.navigation_menu_item { sui.navigation_menu_link "Docs", docs_path }
    sui.navigation_menu_item { sui.navigation_menu_link "Blocks", blocks_path }
    sui.navigation_menu_item { sui.navigation_menu_link "GitHub", "https://github.com/accountaim/shadcn-rb", target: "_blank", rel: "noopener" }
  end
end

Active state

Pass active: true explicitly or let it auto-detect via current_page? when you pass a Rails path. The marketing header on this site uses auto-detection — whichever page you're on gets an accent background.

Composing with dropdown_menu

Need a dropdown under a nav item? Nest a dropdown_menu inside navigation_menu_item. The wrapper is structural — it doesn't assume a specific trigger type.

API