Skip to content

Menubar

Barra de menú de aplicación (tipo escritorio) con submenús y atajos.


Import

jsx
import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubTrigger,
  MenubarSubContent,
} from '@imansi/ui';

Uso básico

jsx
<Menubar>
  <MenubarMenu>
    <MenubarTrigger>Archivo</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>Nuevo</MenubarItem>
      <MenubarItem>Abrir</MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Guardar</MenubarItem>
    </MenubarContent>
  </MenubarMenu>

  <MenubarMenu>
    <MenubarTrigger>Editar</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        Deshacer
        <MenubarShortcut>⌘Z</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        Rehacer
        <MenubarShortcut>⌘Y</MenubarShortcut>
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Con submenús

jsx
<MenubarSub>
  <MenubarSubTrigger>Exportar</MenubarSubTrigger>
  <MenubarSubContent>
    <MenubarItem>PDF</MenubarItem>
    <MenubarItem>CSV</MenubarItem>
    <MenubarItem>JSON</MenubarItem>
  </MenubarSubContent>
</MenubarSub>

Accesibilidad

  • Flechas ← → navegan entre menús
  • Flechas ↑↓ navegan entre items
  • Enter / Space abre y activa
  • Escape cierra

Hecho con ❤️ en Argentina