How to Add a Navigation Menu to a React App

Before installing the Navigation Menu, confirm your React project has the three things Drivn assumes: Tailwind CSS v4 installed and processing your styles, TypeScript configured (the component ships as a .tsx file), and a @/ path alias pointing at your source directory. If you scaffolded with create-next-app, npm create vite, or npx drivn@latest create, all three are already wired. For a custom setup, check the compilerOptions.paths entry in tsconfig.json; the installation page lists the minimal config. The Navigation Menu imports the ChevronDown glyph from lucide-react for the trigger caret, so keep that package installed — it is the component's only import beyond React and the cn utility.

Run the CLI from your project root to add the Navigation Menu source file. The command prompts once for your install directory (defaulting to src/components/ui/), writes navigation-menu.tsx, and finishes. No global config file is created; the result is one TypeScript file you edit like any other component. Confirm it landed in your editor, then commit it for a clean baseline. If your project uses a monorepo layout or a non-standard source path, the CLI docs cover the flags for targeting a custom location during install. For single-trigger menus that open on click rather than hover, add the Drivn Dropdown alongside it with the same command.

Import NavigationMenu from your UI directory and render the bar. The root renders a <nav>, NavigationMenu.List renders the <ul> row, and each NavigationMenu.Item holds either a Trigger/Content pair for a dropdown or a bare NavigationMenu.Link for a flat top-level entry like "Docs". The Trigger renders a button and appends a ChevronDown that rotates 180 degrees when the panel opens. Because the trigger runs an onPointerDown handler to dismiss focus on a second tap, the source carries a 'use client' directive — import it into a client component, or in the App Router render it inside a layout Next.js treats as a client boundary. In a Vite + React app there is no boundary to think about: everything runs on the client already.

A real header mixes dropdown items with direct links. Give a dropdown item a NavigationMenu.Trigger plus a NavigationMenu.Content panel, and give a direct link a single NavigationMenu.Link with no trigger — the Item wrapper keeps both aligned in the row. Each NavigationMenu.Link renders a native <a href> styled with the styles.link class, a flex w-full gap-3 row, so drop a Lucide icon and a <span> label inside it, or stack a bold title over a muted <p> description by passing className="flex-col gap-0.5" on that link. The panel itself is a min-w-[220px] card, so fill it with a single column, a two-column grid, or a custom layout. For richer link cards with a thumbnail, pair the panel with the Drivn Card component.

The panels open with no JavaScript state. Each NavigationMenu.Item carries group/item, and the styles.content class starts at opacity-0 invisible and flips to opacity-100 visible under both group-hover/item: and group-focus-within/item: — so the same panel appears whether the user hovers the trigger with a pointer or tabs into it with the keyboard. That focus-within half is what keeps the menu accessible without a single event handler. Every class the menu renders lives in one styles object at the top of the file you own — root, list, item, trigger, triggerIcon, content, and link. Widen the panel by bumping min-w-[220px] in content, restyle the trigger hover state through trigger, or change the caret spin through triggerIcon. Because the colors read Tailwind tokens like bg-card and bg-accent, changing them in theming re-themes the whole menu for dark and light mode. The styles.content object below is copied verbatim from navigation-menu.ts.