Visão geral

O NavigationMenu é para navegação principal de aplicações web com submenus e painéis de conteúdo.

Demo

Import

import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu"

Padrão de implementação

Estrutura base do Navigation Menu.

Navigation Menu com submenu

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Produtos</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul className="grid gap-3 p-4 w-[400px] grid-cols-2">
          <li>
            <NavigationMenuLink asChild>
              <a href="/produto-1">
                <div className="font-medium">Produto 1</div>
                <p className="text-sm text-muted-foreground">Descrição breve.</p>
              </a>
            </NavigationMenuLink>
          </li>
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="/sobre" className={navigationMenuTriggerStyle()}>
        Sobre
      </NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter