Menubar

Example

<ul role="menubar" aria-label="Editor" data-slean="menubar">
	<li role="none">
		<button type="button" id="menubar-file" role="menuitem" popovertarget="menubar-file-menu"
			tabindex="0">File</button>
		<div id="menubar-file-menu" popover role="menu" aria-labelledby="menubar-file"
			data-slean="menu" data-slean-align="start">
			<button type="button" role="menuitem" data-slean-value="new">New file</button>
			<button type="button" role="menuitem" data-slean-value="open">Open…</button>
			<hr />
			<button type="button" role="menuitem" data-slean-value="save">Save</button>
		</div>
	</li>
	<li role="none">
		<button type="button" id="menubar-edit" role="menuitem" popovertarget="menubar-edit-menu"
			tabindex="-1">Edit</button>
		<div id="menubar-edit-menu" popover role="menu" aria-labelledby="menubar-edit"
			data-slean="menu" data-slean-align="start">
			<button type="button" role="menuitem" data-slean-value="undo">Undo</button>
			<button type="button" role="menuitem" data-slean-value="redo">Redo</button>
		</div>
	</li>
	<li role="none">
		<button type="button" id="menubar-view" role="menuitem" popovertarget="menubar-view-menu"
			tabindex="-1">View</button>
		<div id="menubar-view-menu" popover role="menu" aria-labelledby="menubar-view"
			data-slean="menu" data-slean-align="start">
			<button type="button" role="menuitemcheckbox" aria-checked="true" data-slean-value="wrap">
				Word wrap</button>
			<button type="button" role="menuitemcheckbox" aria-checked="false" data-slean-value="minimap">
				Minimap</button>
		</div>
	</li>
</ul>

<script lang="ts">
	// With @svelte-lean/vite the register imports are injected for the static markers.
	import '@svelte-lean/styles/popover.css';
	import '@svelte-lean/styles/menu.css';
	import '@svelte-lean/styles/menubar.css';

	const menus = [
		{ id: 'file', label: 'File', items: ['New file', 'Open…', 'Save'] },
		{ id: 'edit', label: 'Edit', items: ['Undo', 'Redo'] }
	];
</script>

<ul role="menubar" aria-label="Editor" data-slean="menubar">
	{#each menus as menu, i (menu.id)}
		<li role="none">
			<button type="button" id="mb-{menu.id}" role="menuitem" popovertarget="mb-{menu.id}-menu"
				tabindex={i === 0 ? 0 : -1}>{menu.label}</button>
			<div id="mb-{menu.id}-menu" popover role="menu" aria-labelledby="mb-{menu.id}"
				data-slean="menu" data-slean-align="start">
				{#each menu.items as item (item)}
					<button type="button" role="menuitem">{item}</button>
				{/each}
			</div>
		</li>
	{/each}
</ul>

Why this implementation exists

The platform already has most of a menubar: each menu is a popover opened by its item’s popovertarget, with light dismiss, Escape, focus return and the top layer, and the Menu primitive gives each menu its keys. What makes a row of menus a menubar in the WAI-ARIA pattern is the movement between them: one tab stop for the bar, the side arrows along it, and the side arrows inside an open menu moving to the neighbouring menu.

None of that needs memory. The open menu is the popover that matches :popover-open, the focusable item is the one with tabindex="0", and the menus are found through their items’ popovertarget. Three shared listeners (keydown, focusin, pointerover) cover every bar on the page.

Usage

Install @svelte-lean/primitives for the behavior and @svelte-lean/styles for the stylesheet. With @svelte-lean/vite the registration is injected for every static data-slean="menubar"; without it, import the register module once.

npm install @svelte-lean/primitives

pnpm add @svelte-lean/primitives

yarn add @svelte-lean/primitives

bun add @svelte-lean/primitives

import '@svelte-lean/primitives/menubar/register';

import '@svelte-lean/styles/popover.css';
import '@svelte-lean/styles/menu.css';
import '@svelte-lean/styles/menubar.css';

Render a role="menubar" list of role="none" items, each holding a role="menuitem" button with popovertarget and, right after it, its menu: a data-slean="menu" popover labelled by the item. Give the first item tabindex="0" and the others -1.

Listen to slean:select on the bar for the chosen item of any menu; checkbox and radio items keep the menu contract.

Anatomy

Runtime profile

The menubar registers keydown, focusin and pointerover handlers with the shared router; each menu registers the menu behavior's own. A thousand bars keep one listener per type (tests/menubar.test.ts).

Accessibility contract

• role="menubar" named by aria-label; each item a menuitem whose expanded state the platform exposes from popovertarget; each menu labelled by its item.
• One tab stop for the bar; the side arrows, Home and End move along it, mirrored under dir="rtl".
• ArrowDown, Enter or Space opens a menu and focus moves to its first item; Escape closes it and focus returns to the item.
• A menubar is for application commands. Site navigation is a <nav> with links.

Keyboard

Platform features

Without JavaScript

Each item opens its menu natively through popovertarget; the menus' keys and the bar's arrows need the runtime, and Tab reaches only the first item.

Server rendering

Render the bar with one item at tabindex 0 and every menu closed.

Before hydration

Before the behaviors load, a click opens a menu (native) but the arrow keys do nothing. The first key after hydration works on the server's markup.

Styling

menubar.css lays the items out in a bar and draws the item whose menu is open as pressed, with :has() on the list item; the menus are drawn by popover.css and menu.css. The tokens it reads:

State selectors the stylesheet targets, all from the platform or ARIA: :focus-visible, :hover, :popover-open, [aria-disabled="true"], [role="menu"], [role="menuitem"].

Compatibility notes

The Popover API is Baseline 2024 and :has() Baseline 2023. Submenus and mnemonics are not part of the primitive.

Testing

• packages/primitives/tests/menubar.test.ts Vitest: the bar items, arrows and RTL, opening, moving between menus, hover, 1000 bars
• apps/playground/tests/primitives/layout.spec.ts Playwright: the splitter and the context menu in Chrome, with axe
• packages/styles/tests static checks of the stylesheet (layers, tokens, specificity, dark parity)

Source

• packages/primitives/src/menubar/contract.md the contract in prose: semantics, keyboard, focus, ARIA, SSR, JS-disabled behavior
• packages/primitives/src/menubar/contract.ts typed constants: name, tier, base, parts, options, events
• packages/primitives/src/menubar/behavior.ts the behavior definition
• packages/primitives/src/menubar/register.ts the registration module
• packages/styles/css/menubar.css the optional stylesheet