NavigationMenu

Menú de navegación complejo con submenús animados y contenido enriquecido.

---

Import

import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuLink,
  NavigationMenuViewport,
  navigationMenuTriggerStyle,
} from '@imansi/ui';

---

Uso básico

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Productos</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul className="grid w-[400px] gap-3 p-4">
          <li>
            <NavigationMenuLink href="/productos/auth">
              <div className="font-medium">Autenticación</div>
              <p className="text-sm text-muted-foreground">
                Login, registro y 2FA
              </p>
            </NavigationMenuLink>
          </li>
          <li>
            <NavigationMenuLink href="/productos/dashboard">
              <div className="font-medium">Dashboard</div>
              <p className="text-sm text-muted-foreground">
                4 variantes listas
              </p>
            </NavigationMenuLink>
          </li>
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>

    <NavigationMenuItem>
      <NavigationMenuLink
        href="/docs"
        className={navigationMenuTriggerStyle()}
      >
        Docs
      </NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

---

Con grid de contenido

<NavigationMenuContent>
  <div className="grid gap-3 p-6 md:grid-cols-2 lg:grid-cols-3">
    {items.map((item) => (
      <NavigationMenuLink key={item.href} href={item.href}>
        <div className="text-sm font-medium">{item.title}</div>
        <p className="text-sm text-muted-foreground">{item.description}</p>
      </NavigationMenuLink>
    ))}
  </div>
</NavigationMenuContent>

---

Accesibilidad

• Navegación completa con teclado
• Escape cierra los submenús
• Flechas navegan entre triggers
• Apertura al hover o al focus