Navigation Menu

Quando usar

Use o NavigationMenu para a navegacao de topo de uma area do produto: um conjunto pequeno e estavel de destinos (Mercado, Portfolio, Relatorios...), onde alguns itens navegam direto e outros abrem um submenu com mais opcoes relacionadas. E o primitivo genérico por tras da barra de navegacao do Header do produto, mas nao e o Header em si: ele nao sabe nada sobre logo, busca, resultado do dia ou controles de janela, so resolve a mecanica de item, trigger, submenu e link.

Quando nao usar

Nao use para um menu de acoes contextual (clique com o botao direito, menu de "..." de uma linha de tabela): isso e o dropdown-menu, que abre por clique e nao tem a semantica de rota persistente. Nao use para a barra de menus de uma aplicacao desktop com Arquivo, Editar, Exibir: esse vocabulario e o Menubar. Nao use para navegacao com poucas opcoes e sem submenu nenhum: uma lista de Button, variante ghost, resolve com menos peso.

Anatomia

• NavigationMenu (data-slot="navigation-menu"): a raiz. Aceita viewport (padrao true) para decidir se todo Content compartilha um unico painel flutuante que troca de tamanho ao trocar de item, ou se cada Content se posiciona sozinho sob o proprio trigger.
• NavigationMenuList (data-slot="navigation-menu-list"): a lista horizontal de itens.
• NavigationMenuItem (data-slot="navigation-menu-item"): um destino da barra. Pode conter so um NavigationMenuLink (navega direto) ou um NavigationMenuTrigger seguido de um NavigationMenuContent (abre submenu).
• NavigationMenuTrigger (data-slot="navigation-menu-trigger"): abre o submenu do item. Traz a seta (data-slot="navigation-menu-trigger-icon") que gira quando o submenu esta aberto.
• NavigationMenuContent (data-slot="navigation-menu-content"): o painel do submenu. Normalmente contém uma lista de NavigationMenuLink.
• NavigationMenuLink (data-slot="navigation-menu-link"): o destino em si, dentro ou fora de um submenu. Aceita asChild, herdado do primitivo do Radix, para compor com o Link do Next sem perder foco nem estado ativo: <NavigationMenuLink asChild><Link href="/mercado">Mercado</Link></NavigationMenuLink>.
• NavigationMenuIndicator (data-slot="navigation-menu-indicator"): a setinha que aponta para o trigger do item aberto no momento. Fica como ultimo filho de NavigationMenuList, junto dos itens (e assim que o Radix calcula a posicao dela).
• NavigationMenuViewport (data-slot="navigation-menu-viewport"): o painel compartilhado. A raiz ja monta um automaticamente quando viewport e true (o padrao); so precisa ser usado à mao quando viewport={false} na raiz e mesmo assim se quiser um painel compartilhado em outro ponto da arvore.

Acessibilidade

O NavigationMenu monta um <nav> por baixo: passe aria-label na raiz descrevendo a barra ("Navegacao principal", por exemplo), porque duas <nav> sem rotulo na mesma pagina confundem leitor de tela. A navegacao por teclado e nativa do Radix: Tab entra na barra, Seta esquerda e Seta direita movem entre os triggers e links de topo, Enter/Espaco abre o submenu do item focado, Esc fecha o submenu aberto e devolve o foco ao trigger que o abriu. Foco sempre visivel via focus-visible:ring-2, tanto no trigger quanto em cada link do submenu.