Moodinary/UI

Menubar

Editores con muchas acciones (editor de informe). No para la navegación principal.

Barra de menús tipo aplicación para editores, como el de informes.

Instalación

shadcn
npx shadcn@latest add https://design.moodinary.com/r/menubar.json
import
import { Menubar, MenubarTrigger } from "@moodinary/ui/components/menubar";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem } from "@moodinary/ui/components/dropdown-menu";

Ejemplos

Cada menú es un DropdownMenu con MenubarTrigger. Los atajos van con DropdownMenuShortcut.

Código
editor.tsx
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuItem,
	DropdownMenuShortcut,
} from "@moodinary/ui/components/dropdown-menu";
import { Menubar, MenubarTrigger } from "@moodinary/ui/components/menubar";

export default function MenubarEditor() {
	return (
		<Menubar aria-label="Editor de informe">
			<DropdownMenu>
				<MenubarTrigger>Archivo</MenubarTrigger>
				<DropdownMenuContent>
					<DropdownMenuItem>
						Nuevo informe<DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
					</DropdownMenuItem>
					<DropdownMenuItem>Duplicar</DropdownMenuItem>
					<DropdownMenuItem>
						Exportar PDF<DropdownMenuShortcut>⌘P</DropdownMenuShortcut>
					</DropdownMenuItem>
				</DropdownMenuContent>
			</DropdownMenu>
			<DropdownMenu>
				<MenubarTrigger>Editar</MenubarTrigger>
				<DropdownMenuContent>
					<DropdownMenuItem>
						Deshacer<DropdownMenuShortcut>⌘Z</DropdownMenuShortcut>
					</DropdownMenuItem>
					<DropdownMenuItem>Rehacer</DropdownMenuItem>
					<DropdownMenuItem>
						Buscar<DropdownMenuShortcut>⌘F</DropdownMenuShortcut>
					</DropdownMenuItem>
				</DropdownMenuContent>
			</DropdownMenu>
			<DropdownMenu>
				<MenubarTrigger>Ver</MenubarTrigger>
				<DropdownMenuContent>
					<DropdownMenuItem>Mostrar comentarios</DropdownMenuItem>
					<DropdownMenuItem>Modo presentación</DropdownMenuItem>
					<DropdownMenuItem>Pantalla completa</DropdownMenuItem>
				</DropdownMenuContent>
			</DropdownMenu>
		</Menubar>
	);
}

Props

Menubar

PropTipoDefaultDescripción
...propsMenubar.Props de Base UI-Incluye orientation y loop.
classNamestring-Clases extra.

MenubarTrigger

PropTipoDefaultDescripción
...propsMenu.Trigger.Props de Base UI-Abre el menú.
classNamestring-Clases extra.

Cuándo sí y cuándo no

Hacé
  • Usala solo en herramientas con muchas acciones.
  • Agrupá por Archivo, Editar y Ver.
  • Mostrá atajos si existen.
Evitá
  • No la uses como navegación del sitio.
  • No pongas una sola opción por menú.
  • No inventes atajos que no funcionan.

Accesibilidad

  • Flechas recorren menús y opciones.
  • Escape cierra el menú y devuelve el foco.