Menubar

A horizontal row of top-level triggers modeled on a native application's menu bar.

View code

<Menubar aria-label="Editor" mix={[menubarKeys()]}>
	<Menubar.Trigger commandfor="file-menu">File</Menubar.Trigger>
	<Menu id="file-menu" aria-label="File" placement="bottom" mix={[menuKeys()]}>
		<Menu.Item>
			<span mix={[grow()]}>New document</span>
			<Keyboard>⌘N</Keyboard>
		</Menu.Item>
		<Menu.Item>
			<span mix={[grow()]}>Open…</span>
			<Keyboard>⌘O</Keyboard>
		</Menu.Item>
		<Menu.Separator />
		<Menu.Item>
			<span mix={[grow()]}>Save</span>
			<Keyboard>⌘S</Keyboard>
		</Menu.Item>
		<Menu.Item disabled>
			<span mix={[grow()]}>Save as…</span>
		</Menu.Item>
	</Menu>

	<Menubar.Trigger commandfor="edit-menu">Edit</Menubar.Trigger>
	<Menu id="edit-menu" aria-label="Edit" placement="bottom" mix={[menuKeys()]}>
		<Menu.Item>
			<span mix={[grow()]}>Undo</span>
			<Keyboard>⌘Z</Keyboard>
		</Menu.Item>
		<Menu.Item>
			<span mix={[grow()]}>Redo</span>
			<Keyboard>⇧⌘Z</Keyboard>
		</Menu.Item>
		<Menu.Separator />
		<Menu.Item>
			<span mix={[grow()]}>Find and replace</span>
			<Keyboard>⌘F</Keyboard>
		</Menu.Item>
	</Menu>

	<Menubar.Trigger commandfor="view-menu">View</Menubar.Trigger>
	<Menu id="view-menu" aria-label="View" placement="bottom" mix={[menuKeys()]}>
		<Menu.Item aria-selected="true">Outline</Menu.Item>
		<Menu.Item>Preview</Menu.Item>
		<Menu.Item>Split</Menu.Item>
	</Menu>

	<Menubar.Trigger commandfor="insert-menu">Insert</Menubar.Trigger>
	<Menu id="insert-menu" aria-label="Insert" placement="bottom" mix={[menuKeys()]}>
		<Menu.Item>Image</Menu.Item>
		<Menu.Item>Table</Menu.Item>
		<Menu.Item>Code block</Menu.Item>
	</Menu>

	<Menubar.Trigger commandfor="help-menu">Help</Menubar.Trigger>
	<Menu id="help-menu" aria-label="Help" placement="bottom" mix={[menuKeys()]}>
		<Menu.Item href="/docs">Documentation</Menu.Item>
		<Menu.Item href="/docs/packages/ui">Component catalogue</Menu.Item>
		<Menu.Separator />
		<Menu.Item>Keyboard shortcuts</Menu.Item>
	</Menu>

	<Menubar.Trigger commandfor="history-menu" aria-disabled="true">
		History
	</Menubar.Trigger>
	<Menu id="history-menu" aria-label="History" placement="bottom" mix={[menuKeys()]}>
		<Menu.Item>Version history</Menu.Item>
	</Menu>
</Menubar>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

import { Menubar } from "@sdxc/ui";

Renders the row's host: a native <div> carrying the menubar role for Menubar.Triggers. In dev mode, a root missing an aria-label or aria-labelledby logs a console.warn.

Composition

The parts the component publishes, each a static property of the host.

Menubar
Menubar.TriggerRenders a single top-level trigger: a native <button> pointed at the id of the Menu it opens through commandfor, with command defaulting to "toggle-popover" and role to "menuitem".

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Also accepts everything in TagProps<"div">.

Menubar.Trigger

Prop	Type	Description
`commandfor`	`string`	`id` of the Menu this trigger opens.

Also accepts everything in Omit<TagProps<"button">, "commandfor">.