# NavigationMenu

A navegação de topo de site, com painel por secao.

Não e `Menu`: aquele lista ações que se executam, este lista lugares para onde
ir, e o painel pode ter texto, imagem e várias colunas. O leitor de tela anuncia
os dois de formas diferentes, e trocar um pelo outro faz o menu de ações
prometer navegação que não existe.

**Em tela de aplicação, `Sidebar` costuma servir melhor.** Este e para página de
marketing e portal.

```tsx
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Produtos</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink href="/notas">Emissao de notas</NavigationMenuLink>
        <NavigationMenuLink href="/cobranca">Cobranca</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>
```

O painel e único e fica fora da lista: e ele que desliza de uma secao para a
outra em vez de piscar entre paineis.

## As partes

`NavigationMenuViewport` é o painel onde o conteúdo do item aberto aparece.
Fica fora dos itens, e não dentro de cada um: assim a troca entre dois menus
vizinhos anima de um para o outro em vez de fechar e abrir.

## No React Native

Não porta, por decisão - idioma de mesa; navegação nativa é tab bar e drawer do router. Não é fila: não vai existir. A [tabela de paridade](/react-native) diz o porquê de cada uma.

## Importação

```tsx
import { NavigationMenu } from '@rivocode/ui'
```

## Exemplos

### Topo de site

```tsx
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  NavigationMenuViewport,
} from '@rivocode/ui'

export function SiteHeader() {
  return (
    <div className="min-h-64">
      <NavigationMenu defaultValue="produtos">
        <NavigationMenuList>
          <NavigationMenuItem value="produtos">
            <NavigationMenuTrigger>Produtos</NavigationMenuTrigger>
            <NavigationMenuContent>
              <NavigationMenuLink href="#">Emissão de notas</NavigationMenuLink>
              <NavigationMenuLink href="#">Cobranca</NavigationMenuLink>
              <NavigationMenuLink href="#">Conciliação</NavigationMenuLink>
            </NavigationMenuContent>
          </NavigationMenuItem>

          <NavigationMenuItem value="empresa">
            <NavigationMenuTrigger>Empresa</NavigationMenuTrigger>
            <NavigationMenuContent>
              <NavigationMenuLink href="#">Sobre</NavigationMenuLink>
              <NavigationMenuLink href="#">Contato</NavigationMenuLink>
            </NavigationMenuContent>
          </NavigationMenuItem>
        </NavigationMenuList>

        <NavigationMenuViewport />
      </NavigationMenu>
    </div>
  )
}
```

## Props

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `actionsRef` | `RefObject<NavigationMenuRootActions \| null>` |  | 0.4.0 | A ref to imperative actions. |
| `closeDelay` | `number` |  | 0.4.0 | How long to wait before closing the navigation popup. |
| `defaultValue` | `Value \| null` |  | 0.4.0 | The uncontrolled value of the item that should be initially selected. |
| `delay` | `number` |  | 0.4.0 | How long to wait before opening the navigation popup. |
| `onOpenChangeComplete` | `((open: boolean) => void)` |  | 0.4.0 | Event handler called after any animations complete when the navigation menu is closed. |
| `onValueChange` | `((value: Value \| null, eventDetails: NavigationMenuRootChangeEventDetails) => void)` |  | 0.4.0 | Callback fired when the value changes. |
| `orientation` | `"horizontal" \| "vertical"` |  | 0.4.0 | The orientation of the navigation menu. |
| `render` | `ComponentRenderFn<HTMLProps, NavigationMenuRootState> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | 0.4.0 | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |
| `value` | `Value \| null` |  | 0.4.0 | The controlled value of the navigation menu item that should be currently open. |

Além dessas: repassa `className`, `style`, `id` e os demais atributos do elemento raiz.

## Ver também

- [Breadcrumb](/componentes/breadcrumb.md)
- [Command](/componentes/command.md)
- [Menu](/componentes/menu.md)
- [Menubar](/componentes/menubar.md)
- [Pagination](/componentes/pagination.md)
- [Sidebar](/componentes/sidebar.md)
- [Convenções da biblioteca](/convencoes.md): Provider, tokens e as regras que valem para toda peça
- [Índice completo](/llms.txt)