Navigation

Menubar

A row of menus, like a desktop app’s File, Edit and View: for tools with many commands.

Installation

npx sinaui add menubar

Copy src/lib/ui/menubar/ and src/lib/ui/dropdown/, with floating.ts, glide.ts, scroll-edges.ts and tokens.css. No dependencies.

For a single menu, use a Dropdown. For moving between pages, use links (a Sidebar layout or Navigation menu), not a menubar.

Examples

An editor

Open a menu, then move along the bar with the pointer or the arrow keys: the next menu opens without another click.

Nothing chosen yet.

<script lang="ts">
	import Kbd from '#lib/ui/Kbd.svelte';
	import * as Menubar from '#lib/ui/menubar/index.js';

	let last = $state('Nothing chosen yet.');
	const did = (what: string) => () => (last = what);
</script>

<div class="stack">
	<Menubar.Root label="Manuscript editor">
		<Menubar.Menu label="File">
			<Menubar.Item onselect={did('Started a new page.')}>
				New page <span class="keys"><Kbd keys={['mod', 'N']} /></span>
			</Menubar.Item>
			<Menubar.Item onselect={did('Opened the catalog.')}>Open from the catalog…</Menubar.Item>
			<Menubar.Item onselect={did('Saved the page.')}>
				Save <span class="keys"><Kbd keys={['mod', 'S']} /></span>
			</Menubar.Item>
			<Menubar.Separator />
			<Menubar.Item onselect={did('Sent to the copyists.')}>Send to the copyists</Menubar.Item>
		</Menubar.Menu>
		<Menubar.Menu label="Edit">
			<Menubar.Item onselect={did('Undid the last change.')}>
				Undo <span class="keys"><Kbd keys={['mod', 'Z']} /></span>
			</Menubar.Item>
			<Menubar.Item onselect={did('Redid the change.')}>
				Redo <span class="keys"><Kbd keys={['mod', 'shift', 'Z']} /></span>
			</Menubar.Item>
			<Menubar.Separator />
			<Menubar.Item onselect={did('Added a note in the margin.')}>Add a margin note</Menubar.Item>
			<Menubar.Item disabled>Remove the illumination</Menubar.Item>
		</Menubar.Menu>
		<Menubar.Menu label="View">
			<Menubar.Item onselect={did('Zoomed in.')}>
				Zoom in <span class="keys"><Kbd keys={['mod', '+']} /></span>
			</Menubar.Item>
			<Menubar.Item onselect={did('Zoomed out.')}>
				Zoom out <span class="keys"><Kbd keys={['mod', '-']} /></span>
			</Menubar.Item>
			<Menubar.Item onselect={did('Showing the facing page.')}>Show the facing page</Menubar.Item>
		</Menubar.Menu>
		<Menubar.Menu label="Help">
			<Menubar.Item onselect={did('Opened the keyboard guide.')}>Keyboard guide</Menubar.Item>
			<Menubar.Item href="#accessibility">About the menu bar</Menubar.Item>
		</Menubar.Menu>
	</Menubar.Root>
	<p role="status">{last}</p>
</div>

<style>
	.stack {
		display: grid;
		gap: 1rem;
	}
	.keys {
		margin-inline-start: auto;
		padding-inline-start: 1.5rem;
	}
	p {
		margin: 0;
		color: var(--ui-muted);
		font-size: 0.875rem;
	}
</style>

Props

Menubar.Root

Prop	Type	Default
`label`	`string` (required)
`children`	`Menubar.Menu` elements

Prop	Type	Default
`label`	`string` (required)
`children`	`Menubar.Item`, `Menubar.Separator`

Items are the Dropdown’s: onselect, href, disabled, variant.

Keyboard

Key	Does
Tab	Into the bar (one stop for the whole bar), and out again
Arrow Left / Right	The previous or next menu; if one is open, that one opens
Arrow Down, Enter, Space	Open the menu on its first item
Arrow Up	Open the menu on its last item
Home / End	The first or last menu
Escape	Close the menu, back to its name

Accessibility

A menu bar of menu items, each owning its menu, as desktop screen readers expect.
One Tab stop for the whole bar; the arrow keys do the rest, and remember where you were.
Shortcuts shown in items are read by name (“Command+S”).