Negocios

Menubar

Barra de menus horizontal persistente no estilo aplicação desktop, com suporte a submenus e estados de seleção.

Visão geral

O Menubar reproduz o padrão de menu de aplicações desktop (File, Edit, View...) em interfaces web.

Demo

Import

import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubTrigger, MenubarSubContent, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem } from "@/components/ui/menubar"

Padrão de implementação

Estrutura base do Menubar.

Menubar básico

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>Arquivo</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>Novo<MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Sair<MenubarShortcut>⌘Q</MenubarShortcut></MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>Editar</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>Copiar<MenubarShortcut>⌘C</MenubarShortcut></MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter