NavigationMenu
Site navigation: links and panels of links.
import { NavigationMenu } from "@flinbu/seed";A panel and links
import { NavigationMenu } from "@flinbu/seed";
import { BookOpen, Component, Download, Palette } from "lucide-react";
<div className="flex min-h-80 w-full justify-center">
<NavigationMenu items={[
{ label: "Product", links: [
{ label: "Tokens", href: "#", description: "Every value, in Light and Dark", icon: <Palette /> },
{ label: "Components", href: "#", description: "Synced with Figma", icon: <Component /> },
{ label: "Docs", href: "#", description: "Written with Pluto", icon: <BookOpen /> },
{ label: "Export", href: "#", description: "CSS, Tailwind, iOS, Android", icon: <Download /> },
], columns: 2, footer: "New: themes with one command." },
{ label: "Pricing", href: "#" },
{ label: "Docs", href: "#", current: true },
]} />
</div>Use it for
- Marketing and docs headers.
Use something else for
- App navigation: use the Sidebar.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | NavigationItem[] | – | { label, href, current? } or { label, links: { label, href, description?, icon? }[], columns?, footer? }. |
linkAs | ElementType | 'a' | Your router's Link. |
Accessibility
- Built on Radix NavigationMenu: a nav landmark, triggers report aria-expanded, arrow keys move, Escape closes; the current page has aria-current=page.