Componentes

Menubar

beta

Barra de menus no formato de aplicativo de desktop. Raro em produto web — quase sempre um Dropdown Menu resolve melhor.

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/menubar

Playground

Rótulo do menutrigger

Item do menuitem

Item desabilitadodisabled

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>Arquivo</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>Nova trilha</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Uso

Barra de menus horizontal, cada item abrindo um menu próprio. Raro em produto web — pense duas vezes antes de usar (veja Quando não usar).

Anatomia

`MenubarMenu` agrupa gatilho e conteúdo. `MenubarLabel` e `MenubarSeparator` organizam itens dentro de um menu, e `MenubarShortcut` mostra o atalho de teclado.

Submenu

`MenubarSub` aninha um segundo nível, útil para agrupar uma escolha dentro de um menu já lotado.

Checkbox e radio

`MenubarCheckboxItem` alterna um estado; `MenubarRadioGroup` escolhe entre opções exclusivas dentro do mesmo menu.

Quando não usar

Menubar imita a barra de menus de um aplicativo desktop. Fora desse contexto — um editor, uma ferramenta de autoria densa — ele é raro em produto web.

Para a maioria das telas de coordenação e sala de aula, um DropdownMenu preso a um botão resolve melhor: ocupa menos espaço, não exige que o usuário reconheça o padrão de menu de aplicativo, e funciona igual em toque. Reserve o Menubar para telas de edição avançada, onde várias famílias de ação (arquivo, exibir, trilha) convivem o tempo todo na mesma barra.