Menubar

A row of menus that hand off to one another, the way an application menu bar does.

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"),
				),
			),
		),
	);
}

Installation

npx jsrepo add @implementjs/ui/menubar

jsrepo pulls dropdown-menu along with it.

Copy the file below to src/lib/components/ui/menubar.ts. It imports cn from utils.ts, which belongs at src/lib/utils.ts, and dropdown-menu from the same directory — copy those in beside it too.

src/lib/components/ui/menubar.ts

import { type Child, type ComponentProps } from "@implementjs/core";
import {
	Menubar as MenubarPrimitive,
	MenubarCheckboxItem as MenubarCheckboxItemPrimitive,
	MenubarContent as MenubarContentPrimitive,
	MenubarGroup as MenubarGroupPrimitive,
	MenubarGroupHeading as MenubarGroupHeadingPrimitive,
	MenubarItem as MenubarItemPrimitive,
	MenubarMenu as MenubarMenuPrimitive,
	MenubarRadioGroup as MenubarRadioGroupPrimitive,
	MenubarRadioItem as MenubarRadioItemPrimitive,
	MenubarSeparator as MenubarSeparatorPrimitive,
	MenubarSub as MenubarSubPrimitive,
	MenubarSubContent as MenubarSubContentPrimitive,
	MenubarSubTrigger as MenubarSubTriggerPrimitive,
	MenubarTrigger as MenubarTriggerPrimitive,
} from "@implementjs/primitives";
import {
	MenuCheckIndicator,
	MenuRadioIndicator,
	MenuSubTriggerChevron,
	menuContentClasses,
	menuGroupHeadingClasses,
	menuIndicatorItemClasses,
	menuItemClasses,
	menuSeparatorClasses,
	menuStaticPanelClasses,
	menuSubTriggerClasses,
} from "./dropdown-menu";
import { createComponent } from "@implementjs/primitives";
import { cn } from "@/lib/utils";

export type MenubarProps = ComponentProps<typeof MenubarPrimitive>;

export const Menubar = createComponent(function Menubar(
	{ class: className, ...props }: MenubarProps,
	...children: Child[]
) {
	return MenubarPrimitive(
		{
			...props,
			"data-slot": "menubar",
			class: cn(
				"flex h-9 items-center gap-1 rounded-md border bg-background p-1 shadow-xs",
				className,
			),
		},
		...children,
	);
});

export type MenubarMenuProps = ComponentProps<typeof MenubarMenuPrimitive>;
export const MenubarMenu = MenubarMenuPrimitive;

export type MenubarTriggerProps = ComponentProps<typeof MenubarTriggerPrimitive>;

export const MenubarTrigger = createComponent(function MenubarTrigger(
	{ class: className, ...props }: MenubarTriggerProps,
	...children: Child[]
) {
	return MenubarTriggerPrimitive(
		{
			...props,
			"data-slot": "menubar-trigger",
			class: cn(
				"flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-none select-none",
				"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
				"data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
				className,
			),
		},
		...children,
	);
});

export type MenubarContentProps = ComponentProps<typeof MenubarContentPrimitive>;

export const MenubarContent = createComponent(function MenubarContent(
	{ class: className, offset = 8, ...props }: MenubarContentProps,
	...children: Child[]
) {
	return MenubarContentPrimitive(
		{
			offset,
			...props,
			"data-slot": "menubar-content",
			class: cn(menuContentClasses, "origin-(--ip-menubar-content-transform-origin)", className),
		},
		...children,
	);
});

export type MenubarItemProps = ComponentProps<typeof MenubarItemPrimitive>;

export const MenubarItem = createComponent(function MenubarItem(
	{ class: className, ...props }: MenubarItemProps,
	...children: Child[]
) {
	return MenubarItemPrimitive(
		{ ...props, "data-slot": "menubar-item", class: cn(menuItemClasses, className) },
		...children,
	);
});

export type MenubarCheckboxItemProps = ComponentProps<typeof MenubarCheckboxItemPrimitive>;

export const MenubarCheckboxItem = createComponent(function MenubarCheckboxItem(
	{ class: className, ...props }: MenubarCheckboxItemProps,
	...children: Child[]
) {
	return MenubarCheckboxItemPrimitive(
		{
			...props,
			"data-slot": "menubar-checkbox-item",
			class: cn("group/menu-item", menuItemClasses, menuIndicatorItemClasses, className),
		},
		MenuCheckIndicator(),
		...children,
	);
});

export type MenubarRadioGroupProps = ComponentProps<typeof MenubarRadioGroupPrimitive>;
export const MenubarRadioGroup = MenubarRadioGroupPrimitive;

export type MenubarRadioItemProps = ComponentProps<typeof MenubarRadioItemPrimitive>;

export const MenubarRadioItem = createComponent(function MenubarRadioItem(
	{ class: className, ...props }: MenubarRadioItemProps,
	...children: Child[]
) {
	return MenubarRadioItemPrimitive(
		{
			...props,
			"data-slot": "menubar-radio-item",
			class: cn("group/menu-item", menuItemClasses, menuIndicatorItemClasses, className),
		},
		MenuRadioIndicator(),
		...children,
	);
});

export type MenubarGroupProps = ComponentProps<typeof MenubarGroupPrimitive>;
export const MenubarGroup = MenubarGroupPrimitive;

export type MenubarGroupHeadingProps = ComponentProps<typeof MenubarGroupHeadingPrimitive>;

export const MenubarGroupHeading = createComponent(function MenubarGroupHeading(
	{ class: className, ...props }: MenubarGroupHeadingProps,
	...children: Child[]
) {
	return MenubarGroupHeadingPrimitive(
		{
			...props,
			"data-slot": "menubar-group-heading",
			class: cn(menuGroupHeadingClasses, className),
		},
		...children,
	);
});

export type MenubarSeparatorProps = ComponentProps<typeof MenubarSeparatorPrimitive>;

export const MenubarSeparator = createComponent(function MenubarSeparator({
	class: className,
	...props
}: MenubarSeparatorProps) {
	return MenubarSeparatorPrimitive({
		...props,
		"data-slot": "menubar-separator",
		class: cn(menuSeparatorClasses, className),
	});
});

export type MenubarSubProps = ComponentProps<typeof MenubarSubPrimitive>;
export const MenubarSub = MenubarSubPrimitive;

export type MenubarSubTriggerProps = ComponentProps<typeof MenubarSubTriggerPrimitive>;

export const MenubarSubTrigger = createComponent(function MenubarSubTrigger(
	{ class: className, ...props }: MenubarSubTriggerProps,
	...children: Child[]
) {
	return MenubarSubTriggerPrimitive(
		{
			...props,
			"data-slot": "menubar-sub-trigger",
			class: cn(menuItemClasses, menuSubTriggerClasses, className),
		},
		...children,
		MenuSubTriggerChevron(),
	);
});

export type MenubarSubContentProps = ComponentProps<typeof MenubarSubContentPrimitive>;

export const MenubarSubContent = createComponent(function MenubarSubContent(
	{ class: className, offset = 8, ...props }: MenubarSubContentProps,
	...children: Child[]
) {
	return MenubarSubContentPrimitive(
		{
			offset,
			...props,
			"data-slot": "menubar-sub-content",
			class: cn(menuStaticPanelClasses, className),
		},
		...children,
	);
});

Usage

A menubar is a row of dropdown menus that share focus: once one is open, moving along the bar opens the next without another click, and the arrow keys walk the whole bar.

The bar itself is styled as a bordered strip; the triggers are compact titles that fill in while highlighted or open. The panels and items are the shared menu styles.

import {
	Menubar,
	MenubarContent,
	MenubarItem,
	MenubarMenu,
	MenubarSeparator,
	MenubarTrigger,
} from "@/lib/components/ui/menubar";

Menubar(
	MenubarMenu(
		{ value: "file" },
		MenubarTrigger("File"),
		MenubarContent(
			{ class: "w-48" },
			MenubarItem({ onSelect: newFile }, "New file"),
			MenubarSeparator(),
			MenubarItem({ disabled: true }, "Save all"),
		),
	),
);

MenubarMenu takes a value — a stable string the bar tracks as its open menu. Pass a signal as the root's value to open one from outside, or to know which is open.

The panels, items, separators, and indicators come from dropdown-menu.ts, which is why installing the menubar brings that file too.

API Reference

Every prop the styling does not consume is forwarded to the Menubar primitive, so the tables below are the whole surface — the behavior props and the styling ones together.

Menubar

The bar. Sets role="menubar", owns which menu is open, and moves focus between the triggers. Styled as a bordered bar the menu triggers sit in. Renders a Div; extra props are forwarded onto it.

Prop	Type	Default	Description
`value`	`Signal<string \| null> \| string \| null`	`null`	The open menu's value, or null while all are closed. Pass a signal to control it from outside.
`loop`	`boolean`	`true`	Whether arrow keys wrap from the last trigger back to the first.

Data attribute	Value
`[data-menubar-root]`	Present
`[data-orientation]`	`"horizontal"`

MenubarMenu

One menu of the bar. Wraps a trigger and its content.

Prop	Type	Default	Description
`value`*	`string`	—	Identifies the menu. Must be unique within the menubar.
`preventScroll`	`boolean`	`true`	When true, the page behind cannot scroll while this menu is open. The panel can still scroll if you give it overflow.

MenubarTrigger

The menu's button in the bar. Sets role="menuitem"; hovering it switches to this menu while another is open. Styled as a compact menu title that fills in while its menu is highlighted or open. Renders a Button; extra props are forwarded onto it.

Prop	Type	Default	Description
`disabled`	`Signal<boolean> \| boolean`	`false`	Prevents opening the menu. Sets disabled and data-disabled.

Data attribute	Value
`[data-menubar-trigger]`	Present
`[data-state]`	`"open" \| "closed"`
`[data-highlighted]`	`Present while focused`
`[data-disabled]`	`Present when disabled`

MenubarContent

The floating panel of items. Sets role="menu". Styled as a popover panel that fades and scales in from the side it opens on, and hides itself when closed. Renders a Div; extra props are forwarded onto it.

Prop	Type	Default	Description
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"bottom"`	Preferred side of the anchor to place the panel.
`align`	`"start" \| "center" \| "end"`	`"start"`	How the panel aligns along the chosen side.
`offset`	`number`	`8`	Distance in pixels between the anchor and the panel.
`loop`	`boolean`	`true`	Whether arrow keys wrap from the last item back to the first.

Data attribute	Value
`[data-menubar-content]`	Present
`[data-state]`	`"open" \| "closed"`
`[data-side]`	`"top" \| "bottom" \| "left" \| "right"`
`[data-align]`	`"start" \| "center" \| "end"`

MenubarItem

One action. Sets role="menuitem"; focus follows the pointer. Renders a Div; extra props are forwarded onto it.

Prop	Type	Default	Description
`onSelect`	`() => void`	—	Runs when the item is activated with a click, Enter, or Space.
`closeOnSelect`	`boolean`	`true`	Whether selecting the item closes the menu.
`disabled`	`Signal<boolean> \| boolean`	`false`	Prevents selecting the item; the keyboard skips it.

Data attribute	Value
`[data-menubar-item]`	Present
`[data-highlighted]`	`Present while focused`
`[data-disabled]`	`Present when disabled`

MenubarCheckboxItem

An item holding a checked state. Sets role="menuitemcheckbox" and aria-checked. Renders its own check indicator, shown while the item is checked. Renders a Div; extra props are forwarded onto it.

Prop	Type	Default	Description
`checked`	`Signal<boolean> \| boolean`	`false`	The checked state; selecting toggles it. Pass a signal to control it from outside.
`closeOnSelect`	`boolean`	`true`	Whether selecting the item closes the menu.
`disabled`	`Signal<boolean> \| boolean`	`false`	Prevents selecting the item; the keyboard skips it.

Data attribute	Value
`[data-menubar-checkbox-item]`	Present
`[data-state]`	`"checked" \| "unchecked"`
`[data-highlighted]`	`Present while focused`
`[data-disabled]`	`Present when disabled`

MenubarRadioGroup

Wraps radio items and owns which one is checked. Renders a Div; extra props are forwarded onto it.

Prop	Type	Default	Description
`value`	`Signal<string \| null> \| string \| null`	`null`	The checked item. Pass a signal to control it from outside.

Data attribute	Value
`[data-menubar-radio-group]`	Present

MenubarRadioItem

One choice in a radio group. Sets role="menuitemradio" and aria-checked. Renders its own dot indicator, shown while the item is selected. Renders a Div; extra props are forwarded onto it.

Prop	Type	Default	Description
`value`*	`string`	—	Identifies the item. Must be unique within the radio group.
`closeOnSelect`	`boolean`	`true`	Whether selecting the item closes the menu.
`disabled`	`Signal<boolean> \| boolean`	`false`	Prevents selecting the item; the keyboard skips it.

Data attribute	Value
`[data-menubar-radio-item]`	Present
`[data-state]`	`"checked" \| "unchecked"`
`[data-highlighted]`	`Present while focused`
`[data-disabled]`	`Present when disabled`

MenubarSub

A nested menu. Wraps a sub trigger and its sub content inside a parent content.

Prop	Type	Default	Description
`open`	`Signal<boolean> \| boolean`	`false`	The open state. Pass a signal to control it from outside; a boolean seeds uncontrolled state.

MenubarSubTrigger

The item that opens its submenu — on hover after openDelay, ArrowRight, Enter, Space, or click. Sets aria-haspopup and aria-expanded. The styled trigger appends a chevron pointing into the submenu. Renders a Div; extra props are forwarded onto it.

Prop	Type	Default	Description
`openDelay`	`number`	`100`	How long the pointer must rest on the trigger before the submenu opens, in milliseconds.
`disabled`	`Signal<boolean> \| boolean`	`false`	Prevents opening the submenu; the keyboard skips the item.

Data attribute	Value
`[data-menubar-sub-trigger]`	Present
`[data-menubar-item]`	Present
`[data-state]`	`"open" \| "closed"`
`[data-highlighted]`	`Present while focused`
`[data-disabled]`	`Present when disabled`

MenubarSubContent

A submenu's panel. Styled like the content panel but without the transition — a submenu should feel instant. Renders a Div; extra props are forwarded onto it.

Prop	Type	Default	Description
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"right"`	Preferred side of the sub trigger to place the panel.
`align`	`"start" \| "center" \| "end"`	`"start"`	How the panel aligns along the chosen side.
`offset`	`number`	`8`	Distance in pixels between the sub trigger and the panel.
`loop`	`boolean`	`true`	Whether arrow keys wrap from the last item back to the first.

Data attribute	Value
`[data-menubar-sub-content]`	Present
`[data-state]`	`"open" \| "closed"`
`[data-side]`	`"top" \| "bottom" \| "left" \| "right"`
`[data-align]`	`"start" \| "center" \| "end"`

MenubarGroup

Wraps related items in role="group", labeled by the heading placed inside it. Renders a Div; extra props are forwarded onto it.

Data attribute	Value
`[data-menubar-group]`	Present

MenubarGroupHeading

Names the group it sits in; the group points aria-labelledby at it. Renders a Div; extra props are forwarded onto it.

Data attribute	Value
`[data-menubar-group-heading]`	Present

MenubarSeparator

A role="separator" line between sections. Renders a Div; extra props are forwarded onto it.

Data attribute	Value
`[data-menubar-separator]`	Present

MenubarPortal

The core Portal helper, for rendering the panel into another DOM parent to escape overflow and stacking.

PreviousLink Preview NextMeter

Menubar

Installation

Usage

Every menu needs a value

API Reference

Menubar

MenubarMenu

MenubarTrigger

MenubarContent

MenubarItem

MenubarCheckboxItem

MenubarRadioGroup

MenubarRadioItem

MenubarSub

MenubarSubTrigger

MenubarSubContent

MenubarGroup

MenubarGroupHeading

MenubarSeparator

MenubarPortal

UI

Menubar

Installation

Usage

Every menu needs a value

Shared with the dropdown menu

API Reference

Menubar

MenubarMenu

MenubarTrigger

MenubarContent

MenubarItem

MenubarCheckboxItem

MenubarRadioGroup

MenubarRadioItem

MenubarSub

MenubarSubTrigger

MenubarSubContent

MenubarGroup

MenubarGroupHeading

MenubarSeparator

MenubarPortal