# Menubar
A barra de menus de aplicativo: Arquivo, Editar, Exibir.
Coordena vários `Menu` lado a lado: com um aberto, passar o mouse sobre o
vizinho já troca, sem novo clique, e as setas andam entre eles.
**Em tela de web isso quase nunca e o certo.** Barra de menus e vocabulário de
programa de mesa; num painel, `Sidebar` e `Tabs` dizem mais. Ela existe para
editor e ferramenta, onde o usuário já espera esse arranjo.
```tsx
```
## As partes
`MenubarTrigger` é o gatilho de cada menu da barra: "Arquivo", "Editar",
"Exibir". Ele já vem vestido, inclusive com o anel de foco. Dentro da barra é
ele que se usa, e não um `MenuTrigger` com classe na mão.
## 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 { Menubar } from '@rivocode/ui'
```
## Exemplos
### Principal
```tsx
import {
Menu,
MenuContent,
MenuItem,
MenuSeparator,
Menubar,
MenubarTrigger,
} from '@rivocode/ui'
export function Primary() {
return (
)
}
```
## Props
| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `disabled` | `boolean` | | 0.4.0 | Whether the whole menubar is disabled. |
| `loopFocus` | `boolean` | | 0.4.0 | Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys. |
| `modal` | `boolean` | | 0.4.0 | Whether the menubar is modal. |
| `orientation` | `MenuRootOrientation` | | 0.4.0 | The orientation of the menubar. |
| `render` | `ComponentRenderFn \| ReactElement>` | | 0.4.0 | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |
Além dessas: repassa `className`, `style`, `id` e os demais atributos do elemento raiz.
## Partes
O componente se monta com as peças abaixo. Todas vêm de `@rivocode/ui`.
### MenubarTrigger
O gatilho de um menu dentro da barra: "Arquivo", "Editar", "Exibir".
Já vem vestido: respiro, canto, cor de texto, o realce da passagem do mouse, o
estado de aberto e o anel de foco do teclado. Dentro de um `Menubar` é ele que
se usa, e não sobra nada para escrever por fora.
```tsx
```
## Por que ele existe, se já há `MenuTrigger`
O `MenuTrigger` sai sem estilo de propósito: o uso comum dele é
`render={}`, e duas fontes de estilo brigariam. Quem pagava por isso
era a barra. O exemplo publicado repetia as mesmas cinco classes em cada item, e
toda barra montada a partir dele repetia de novo. E a cópia vinha sem o anel de
foco, então a barra da documentação era a única peça do catálogo que sumia da
vista ao ser percorrida com o Tab.
Os dois continuam existindo porque têm trabalhos diferentes: um é gatilho de
menu em qualquer lugar, o outro é item de uma barra.
## Quando **não** usar
Fora de um `Menubar`, é `MenuTrigger` cru. O menu solto (os três pontinhos de
uma linha de tabela, o botão de ações de um cartão) abre com
`render={}`, e a pele de item de barra ali desalinha o
gatilho dos outros controles da linha e promete uma barra que não existe.
Se a dúvida for entre barra de menus e outra coisa, ela é sobre o `Menubar`
inteiro, e não sobre o gatilho: em tela de web, `Sidebar` e `Tabs` quase sempre
dizem mais.
| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `closeDelay` | `number` | | 0.5.0 | How long to wait before closing the menu that was opened on hover. |
| `delay` | `number` | | 0.5.0 | How long to wait before the menu may be opened on hover. |
| `disabled` | `boolean` | | 0.5.0 | Whether the component should ignore user interaction. |
| `handle` | `MenuHandle` | | 0.5.0 | A handle to associate the trigger with a menu. |
| `nativeButton` | `boolean` | | 0.5.0 | Whether the component renders a native `