Menubar

import { signal } from "@implementjs/core";
import {
	Menubar,
	MenubarCheckboxItem,
	MenubarContent,
	MenubarItem,
	MenubarMenu,
	MenubarRadioGroup,
	MenubarRadioItem,
	MenubarSeparator,
	MenubarTrigger,
} from "@/lib/components/ui/menubar";

export default function MenubarDemo() {
	const wordWrap = signal(true);
	const theme = signal<string | null>("system");

	return Menubar(
		MenubarMenu(
			{ value: "file" },
			MenubarTrigger("File"),
			MenubarContent(
				{ class: "w-48" },
				MenubarItem({ onSelect: () => console.log("new") }, "New file"),
				MenubarItem({ onSelect: () => console.log("open") }, "Open…"),
				MenubarSeparator(),
				MenubarItem({ onSelect: () => console.log("save") }, "Save"),
				MenubarItem({ disabled: true }, "Save all"),
			),
		),
		MenubarMenu(
			{ value: "edit" },
			MenubarTrigger("Edit"),
			MenubarContent(
				{ class: "w-48" },
				MenubarItem({ onSelect: () => console.log("undo") }, "Undo"),
				MenubarItem({ onSelect: () => console.log("redo") }, "Redo"),
				MenubarSeparator(),
				MenubarItem({ onSelect: () => console.log("find") }, "Find…"),
			),
		),
		MenubarMenu(
			{ value: "view" },
			MenubarTrigger("View"),
			MenubarContent(
				{ class: "w-48" },
				MenubarCheckboxItem({ checked: wordWrap, closeOnSelect: false }, "Word wrap"),
				MenubarSeparator(),
				MenubarRadioGroup(
					{ value: theme },
					MenubarRadioItem({ value: "light" }, "Light"),
					MenubarRadioItem({ value: "dark" }, "Dark"),
					MenubarRadioItem({ value: "system" }, "System"),
				),
			),
		),
	);
}

A menubar is a row of menus — File, Edit, View. Menubar is the bar, each MenubarMenu is one menu identified by a value, with a MenubarTrigger in the bar and a MenubarContent panel. It shares its content, items, and keyboard model with Dropdown Menu and Context Menu.

import {
	Menubar,
	MenubarContent,
	MenubarItem,
	MenubarMenu,
	MenubarTrigger,
} from "@implementjs/primitives";

Menubar(
	MenubarMenu(
		{ value: "file" },
		MenubarTrigger("File"),
		MenubarContent(MenubarItem({ onSelect: () => save() }, "Save")),
	),
	MenubarMenu(
		{ value: "edit" },
		MenubarTrigger("Edit"),
		MenubarContent(MenubarItem({ onSelect: () => undo() }, "Undo")),
	),
);

One open menu

The bar owns which menu is open — value holds the open menu's value, or null. Opening one closes another, and while any menu is open, hovering a different trigger switches to it, the way native application menus feel. Pass a signal as value to control it from outside. While a menu is open, the page behind cannot scroll; pass preventScroll: false on that MenubarMenu to leave it scrollable.

Keyboard

The bar is one Tab stop. Left and Right arrows move between triggers (wrapping unless loop: false); Enter, Space, or ArrowDown opens the focused menu with its first item focused. Inside an open menu the shared model applies — arrows move, typing jumps, Enter activates, Escape closes — and Left/Right close the open menu and open its neighbor.

Items and structure

Panels hold the shared menu set: MenubarItem with onSelect and closeOnSelect, MenubarCheckboxItem, MenubarRadioGroup and MenubarRadioItem, MenubarGroup with MenubarGroupHeading, MenubarSeparator, and nested submenus via MenubarSub, MenubarSubTrigger, and MenubarSubContent — inside a submenu, Left and Right move within it rather than switching menubar menus.

Accessibility and styling

The bar is role="menubar" and each trigger role="menuitem" with aria-haspopup and aria-expanded; panels are role="menu". The primitive does not hide closed panels — style MenubarContent against data-state. Triggers expose data-state and data-highlighted; items expose data-highlighted and data-disabled. Every part sets a data-menubar-* attribute.

API Reference