Docs

Molecules

NavigationMenu

Top-level site navigation menu with rich popover panels.

5 examplesInteractive ComponentReact 19 & Next.js 16Tailwind CSS v4

Install

pnpm add @quinkit/ui

Import

import { NavigationMenu } from "@quinkit/ui";

Interactive Examples

Live previews · code · themes · viewport · dark mode

Basic Top Nav

Simple horizontal navigation links.

Responsive Mobile Navigation

Collapses into a Sheet menu on small screens.

Active State Navigation

Highlighted active menu item with primary accent styling.

Product Solutions Dropdown

Product feature dropdown with icons and supporting text.

Overview

NavigationMenu is part of the Week 4–6 free core component set. It follows the shared component standard with TypeScript exports, semantic token styling, accessibility-minded markup, and Storybook examples.

Accessibility Details

Uses semantic HTML or Radix primitives where applicable.
Interactive components expose keyboard/focus behavior through native controls or Radix.
ARIA roles, states, and labels are applied where relevant.

Styling

Uses semantic design tokens such as bg-background, text-foreground, border-border, bg-popover, and text-muted-foreground.
Motion-heavy components include reduced-motion compatible classes where applicable.

Accessibility & Keyboard

NavigationMenu adheres to WAI-ARIA design patterns for accessible web components.

Keyboard Navigation

Tab / Shift + Tab — Focuses control and moves between interactive elements.
Space / Enter — Triggers action or toggles selection.
Escape — Closes open popovers, overlays, or dropdown menus.

ARIA Standards

Built with semantic HTML tags and explicit aria-* attributes.
Uses high-contrast focus rings (ring-ring) visible in both light & dark mode.
Supports screen readers with non-visual label fallbacks.

Registry Install

Add a shadcn-compatible bridge file to your project that re-exports from @quinkit/ui.

Registry

npx shadcn@latest add https://quinkit-ui.vercel.app/r/navigation-menu.json