1'use client';
2
3import { CodeIcon, PaintBoardIcon, PuzzleIcon } from '@hugeicons/core-free-icons';
4import { HugeiconsIcon } from '@hugeicons/react';
5import { NavigationMenu } from '@/components/ui/navigation-menu';
6
7const products = [
8  {
9    icon: PuzzleIcon,
10    title: 'Components',
11    description: 'Accessible React primitives, ready to copy.',
12    href: '#',
13  },
14  {
15    icon: PaintBoardIcon,
16    title: 'Themes',
17    description: 'Design tokens for light and dark out of the box.',
18    href: '#',
19  },
20  {
21    icon: CodeIcon,
22    title: 'CLI',
23    description: 'Pull source files straight into your project.',
24    href: '#',
25  },
26];
27
28export function Default() {
29  return (
30    <NavigationMenu className="min-h-64 items-start">
31      <NavigationMenu.Item>
32        <NavigationMenu.Trigger className="text-sm">Products</NavigationMenu.Trigger>
33        <NavigationMenu.Content>
34          {products.map((product) => (
35            <NavigationMenu.Link
36              key={product.title}
37              href={product.href}
38              title={product.title}
39              description={product.description}
40              icon={<HugeiconsIcon icon={product.icon} size={16} strokeWidth={1.6} />}
41            />
42          ))}
43        </NavigationMenu.Content>
44      </NavigationMenu.Item>
45      <a href="#" className="text-muted-foreground hover:text-foreground text-sm transition-colors">
46        Docs
47      </a>
48      <a href="#" className="text-muted-foreground hover:text-foreground text-sm transition-colors">
49        Pricing
50      </a>
51    </NavigationMenu>
52  );
53}

Instalación

pnpm dlx nachui add navigation-menu

Anatomía

1import { NavigationMenu } from '@/components/ui/navigation-menu';

1<NavigationMenu>
2  <NavigationMenu.Item>
3    <NavigationMenu.Trigger>Productos</NavigationMenu.Trigger>
4    <NavigationMenu.Content>
5      <NavigationMenu.Link
6        href="/components"
7        title="Componentes"
8        description="Primitivos de React accesibles, listos para copiar."
9      />
10    </NavigationMenu.Content>
11  </NavigationMenu.Item>
12  <a href="/docs">Docs</a>
13</NavigationMenu>

Composición

Usa la siguiente composición para construir un NavigationMenu:

NavigationMenu
├── NavigationMenu.Item
│   ├── NavigationMenu.Trigger
│   └── NavigationMenu.Content
│       └── NavigationMenu.Link
└── (links planos)

La raíz renderiza un <nav> y distribuye sus hijos en fila, así que los anchors comunes y los links del router conviven con los items desplegables. Cada Item maneja su propio estado: se abre con clic, nunca con hover, así los paneles solo aparecen cuando el lector los pide, y se cierra con Escape, con un clic afuera, o al navegar por un link. El panel lleva una pequeña flecha que apunta al trigger que lo abrió.

Links del router

NavigationMenu.Link renderiza un <a> por defecto. Para mantener la navegación client-side (o el routing con locale), pasá asChild con el Link de tu framework como único hijo — el contenido de la fila se inyecta adentro y el menú igual se cierra al navegar:

1<NavigationMenu.Link
2  asChild
3  title="Componentes"
4  description="Primitivos de React accesibles."
5  icon={<HugeiconsIcon icon={PuzzleIcon} size={16} />}
6>
7  <Link href="/docs/elements/ui" />
8</NavigationMenu.Link>

Variantes

Con badges

Las filas aceptan un slot badge al lado del título — y cualquier otra cosa que pongas dentro de Content se renderiza tal cual, como esta fila "próximamente" no interactiva:

1'use client';
2
3import { Book02Icon, PuzzleIcon, ServerStack01Icon } from '@hugeicons/core-free-icons';
4import { HugeiconsIcon } from '@hugeicons/react';
5import { Badge } from '@/components/ui/badge';
6import { NavigationMenu } from '@/components/ui/navigation-menu';
7
8const resources = [
9  {
10    icon: PuzzleIcon,
11    title: 'Components',
12    description: 'Free and open source, forever.',
13    badge: { variant: 'success', label: 'Open source' },
14  },
15  {
16    icon: Book02Icon,
17    title: 'Changelog',
18    description: '12 components shipped since v2.13.',
19    badge: { variant: 'info', label: 'New' },
20  },
21  {
22    icon: ServerStack01Icon,
23    title: 'MCP server',
24    description: 'Pull component source into your editor.',
25    badge: { variant: 'warning', label: 'Beta' },
26  },
27] as const;
28
29export function Badges() {
30  return (
31    <NavigationMenu className="min-h-64 items-start">
32      <NavigationMenu.Item>
33        <NavigationMenu.Trigger className="text-sm">Resources</NavigationMenu.Trigger>
34        <NavigationMenu.Content>
35          {resources.map((resource) => (
36            <NavigationMenu.Link
37              key={resource.title}
38              href="#"
39              title={resource.title}
40              description={resource.description}
41              badge={<Badge variant={resource.badge.variant}>{resource.badge.label}</Badge>}
42              icon={<HugeiconsIcon icon={resource.icon} size={16} strokeWidth={1.6} />}
43            />
44          ))}
45        </NavigationMenu.Content>
46      </NavigationMenu.Item>
47    </NavigationMenu>
48  );
49}

Referencia de API

NavigationMenu.Item

Envuelve un par trigger + panel y maneja su estado de apertura.

Prop	Type	Default	Description
`className`	`string`	-	Clases CSS adicionales

NavigationMenu.Trigger

Un botón con un chevron que rota mientras el panel está abierto.

Prop	Type	Default	Description
`className`	`string`	-	Clases CSS adicionales

NavigationMenu.Content

El panel flotante, anclado debajo del item y animado al abrir/cerrar.

Prop	Type	Default	Description
`className`	`string`	-	Clases CSS adicionales

NavigationMenu.Link

Prop	Type	Default	Description
`title`	`string`	-	Título de la fila (requerido)
`description`	`string`	-	Descripción de una línea en color muted
`icon`	`React.ReactNode`	-	Se renderiza dentro de la cajita de ícono
`badge`	`React.ReactNode`	-	Se renderiza al lado del título
`asChild`	`boolean`	`false`	Inyecta la fila en un `<Link>` de routing hijo
`href`	`string`	-	Destino del anchor cuando no se usa `asChild`
`className`	`string`	-	Clases CSS adicionales

¿Encontraste algo que mejorar?

¿Notaste un error, tipografía o detalle faltante en esta página? Ayúdanos a mejorar la documentación abriendo un issue en GitHub.

Crear un Issue

AnteriorMessage

SiguientePagination

Navigation Menu