Vox Mente
Navegação

Componentes

Navigation Menu

beta

Navegação entre destinos, não ações. Serve mais ao site institucional — nas telas autenticadas quem navega é a barra lateral da casca.

Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/navigation-menu

Playground
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuLink href="/" className={navigationMenuTriggerStyle()}>
        Início
      </NavigationMenuLink>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Trilhas</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink href="/trilhas/leitura">Leitura</NavigationMenuLink>
        <NavigationMenuLink href="/trilhas/escrita">Escrita</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Anatomia

As partes deste componente e como se aninham. A árvore vem das demonstrações desta página, então descreve um exemplo que renderiza.
NavigationMenu
  └─ NavigationMenuList
    └─ NavigationMenuItem
      └─ NavigationMenuTrigger
      └─ NavigationMenuContent
        └─ NavigationMenuLink

Exportadas, mas sem demonstração nesta página: NavigationMenuIndicator, NavigationMenuPositioner.

Uso

Leva de uma página para outra. Não executa comando nem lista ações sobre um item — isso é papel do dropdown-menu. Se o rótulo descreve um destino ("Sobre", "Trilhas"), é navegação; se descreve uma ação ("Excluir", "Exportar"), não é. No produto, esse componente serve ao site institucional — as telas autenticadas navegam pela barra lateral da casca de tela, não por aqui.

Alinhamento do popup

`align` é prop do `NavigationMenu` (raiz), não do item — vale para todos os popups abertos por ele. `start` alinha à esquerda do gatilho; use `center` quando a barra fica centralizada na página.

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger não têm props próprias — aceitam apenas as props herdadas, incluindo className e os atributos de DOM.

Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.

Origem do dado
  • Anatomia: exemplo desta página
  • Demonstrações e playground: componente real de @voxmente/ui
  • Referência da API: TypeScript do pacote
  • Cor, espaçamento e raio das demonstrações: tokens de theme.css