Next.js Navigation Menu with Dropdowns

Drivn installs through a small CLI that writes component source directly into your repository — there is no runtime package to version-lock. From the root of your Next.js 16 project run npx drivn add navigation-menu. The component imports the ChevronDown glyph from lucide-react for the trigger caret, so keep that package installed; the CLI writes a single navigation-menu.tsx file and leaves the rest of your tree untouched. The CLI reference documents every flag, including targeting a custom directory or installing several components at once. After install you own the file, and future Drivn releases will not overwrite it. Commit it for a clean baseline before wiring the menu into your layout.

Because the trigger runs an onPointerDown handler that manually toggles focus — so a tap opens the panel and a second tap closes it on touch devices — the component source carries a 'use client' directive. Import it into your header or layout as you would any client component; Next.js draws the boundary at the file that renders it. 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 Link for a flat top-level entry. The Trigger appends a ChevronDown that rotates 180 degrees when the panel opens. Render the bar once in your root layout so it persists across App Router navigations, and pair it with the Drivn Dropdown when you need a click-driven menu instead.

Each NavigationMenu.Link renders a native <a href> styled with the styles.link class — a flex w-full gap-3 row with hover and focus-visible rings. Point href at any App Router route and the link works immediately. One Next.js nuance matters: a native anchor performs a full-document navigation, so for the soft, client-side transitions the App Router is known for, render Next's <Link> inside the NavigationMenu.Item and hand it the same styles.link classes. For external URLs — a status page, a changelog on another domain — the native NavigationMenu.Link is exactly right. You can mix both inside one NavigationMenu.Content panel: Next <Link> for in-app routes, NavigationMenu.Link for anything off-site. The panel itself is a min-w-[220px] card with bg-card border border-border rounded-xl p-2, so fill it with icons, stacked descriptions, or a custom grid — every NavigationMenu.Link accepts children and merges an extra className for per-link layout tweaks.

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. The focus-within half is what keeps the menu accessible: a keyboard user tabs to the trigger, the panel becomes visible because focus is inside the item, and the links inside become reachable in order. The transition runs on opacity and visibility with ease-in on close and ease-out on open, so the panel fades rather than snapping. Because the logic is Tailwind classes rather than a useState boolean, there is no hydration cost for the open and close behavior and nothing to fall out of sync between the server and client render.

Every class the menu renders lives in one styles object at the top of the file you own after install — root, list, item, trigger, triggerIcon, content, and link. Restyle the trigger's hover state by editing trigger, widen the panel by bumping min-w-[220px] in content, or change the caret spin through triggerIcon, whose group-hover/item:rotate-180 and group-focus-within/item:rotate-180 rules turn the ChevronDown when the panel opens. Because the colors read from Tailwind tokens — bg-card, border-border, bg-accent — changing them in theming re-themes the whole menu for dark and light mode at once. Edit the object in place and every menu in your app updates together. For copy-paste panel layouts see the Navigation Menu examples.