# NavigationMenu

> El mega menú de un sitio: un trigger abre un panel donde cada ítem es un link.

```tsx
import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, … } from "sebs7n-ui/navigation-menu"
```

## Ejemplos

### Un panel con links

`NavigationMenuViewport` va una sola vez, hermano de la lista.

```tsx
import { BookOpenIcon, PaletteIcon, ShieldCheckIcon } from "lucide-react"
import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport } from "sebs7n-ui/navigation-menu"

function Basico() {
  return (
    <NavigationMenu render={<div />}>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Documentación</NavigationMenuTrigger>
          <NavigationMenuContent className="sm:w-[28rem]" keepMounted>
            <ul className="grid gap-0.5 sm:grid-cols-2">
              <li>
                <NavigationMenuLink
                  description="Una dependencia y tres variables"
                  href="/docs/instalacion"
                  icon={<BookOpenIcon />}
                  title="Instalación"
                />
              </li>
              <li>
                <NavigationMenuLink
                  description="Color, tipografía, radios y sombras"
                  href="/docs/tokens"
                  icon={<PaletteIcon />}
                  title="Tokens"
                />
              </li>
              <li>
                <NavigationMenuLink
                  description="Lo que garantiza el paquete"
                  href="/docs/accesibilidad"
                  icon={<ShieldCheckIcon />}
                  title="Accesibilidad"
                />
              </li>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink href="/docs/changelog">Changelog</NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
      <NavigationMenuViewport />
    </NavigationMenu>
  )
}
```

## Props

### NavigationMenu

Hereda las props de `NavigationMenu.Root`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string \| ((state: State) => string)` | — | CSS class applied to the element, or a function that returns a class based on the component's state. |

### NavigationMenuContent

Hereda las props de `NavigationMenu.Content`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### NavigationMenuItem

Hereda las props de `NavigationMenu.Item`.

Sin props propias: pasa todo al primitivo.

### NavigationMenuLink

Hereda las props de `NavigationMenu.Link`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `description` | `React.ReactNode` | — | Una línea, no dos: se trunca. Dice a quién le sirve la página, no qué es. |
| `icon` | `React.ReactNode` | — | Ícono de 16px a la izquierda. Opcional. |
| `title` | `React.ReactNode` | — | Título del ítem. Con él, el link se arma como tarjeta del mega menú. |
| `className` | `string` | — | — |

### NavigationMenuList

Hereda las props de `NavigationMenu.List`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string \| ((state: State) => string)` | — | CSS class applied to the element, or a function that returns a class based on the component's state. |

### NavigationMenuPopup

Hereda las props de `NavigationMenu.Popup`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### NavigationMenuPositioner

Hereda las props de `NavigationMenu.Positioner` y `NavigationMenu.Portal`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `align` | `"center" \| "start" \| "end"` | `"start"` | How to align the popup relative to the specified side. |
| `collisionPadding` | `Padding` | `16` | Additional space to maintain from the edge of the collision boundary. |
| `container` | `HTMLElement \| ShadowRoot \| React.RefObject<HTMLElement \| ShadowRoot \| null>` | — | A parent element to render the portal element into. |
| `side` | `"top" \| "bottom" \| "left" \| "right" \| "inline-end" \| "inline-start"` | `"bottom"` | Which side of the anchor element to align the popup against. May automatically change to avoid collisions. |
| `sideOffset` | `number \| OffsetFunction` | `8` | Distance between the anchor and the popup in pixels. Also accepts a function that returns the distance to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`. - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`. - `data.side`: which side of the anchor element the positioner is aligned against. - `data.align`: how the positioner is aligned relative to the specified side. |
| `className` | `string \| ((state: State) => string)` | — | CSS class applied to the element, or a function that returns a class based on the component's state. |

### NavigationMenuTrigger

Hereda las props de `NavigationMenu.Trigger`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `active` | `boolean` | — | Si alguna de las páginas del panel es la que se está leyendo. |
| `chevron` | `boolean` | `true` | `false` saca el chevron (un trigger que ya se explica solo). |
| `className` | `string` | — | — |

### NavigationMenuViewport

Hereda las props de `NavigationMenu.Viewport` y `NavigationMenu.Positioner` y `NavigationMenu.Portal`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `align` | `"center" \| "start" \| "end"` | — | — |
| `container` | `NavigationMenuPrimitive.Portal.Props["container"]` | — | — |
| `popupClassName` | `string` | — | Clases de la superficie (ancho máximo, padding). |
| `positionerClassName` | `string` | — | Clases y props de posición del posicionador. |
| `side` | `"top" \| "bottom" \| "left" \| "right" \| "inline-end" \| "inline-start"` | — | — |
| `sideOffset` | `NavigationMenuPrimitive.Positioner.Props["sideOffset"]` | — | — |
| `className` | `string` | — | — |

## Teclado

| Tecla | Qué hace |
|---|---|
| Enter · Espacio · ↓ | Abre el panel. |
| Tab | Recorre los links del panel. |
| Escape | Cierra y devuelve el foco al trigger. |
| Hover | También abre, con 50 ms de retardo. |

## Accesibilidad

- Emite `<nav>` + `<ul>` + `<a>`: el modo de navegación por links del lector los encuentra.
- El trigger **no** lleva `aria-current`: no es un link. Para marcar la sección está `active`, que solo pinta.
- `keepMounted` deja los links en el HTML del server para que los vea un crawler, que nunca abre el menú.
- `aria-expanded` y `aria-controls` los pone Base UI; el movimiento pasa por `motion-reduce`.

## Reglas de uso

- **Si los ítems navegan, `NavigationMenu`; si ejecutan algo, `DropdownMenu`.** El menú de idioma y el de usuario son `DropdownMenu`.
- `NavigationMenuViewport` va **una sola vez**, hermano de la lista: el panel es uno para todos los ítems.
- Adentro de un `<nav>` que ya existe, `render={<div />}` para no anidar dos landmarks.

## Relacionados

[dropdown-menu](/docs/components/dropdown-menu.md) · [sidebar](/docs/components/sidebar.md) · [tabs](/docs/components/tabs.md)