Navigation · Menubar

Menubar

Desktop File / Edit / View bar. Exactly one menu open at a time; hover a sibling trigger while a menu is open to switch without an intermediate click. Soma owns active-menu state + cross-menu ArrowLeft/Right + typeahead + focus return on Escape. Per-menu Item / Sub / Checkbox / Radio chrome is shared with DropdownMenu — same parts, same recipe, same menu-indicator (checkbox/radio glyphs match the standalone Checkbox / RadioGroup).

parts{compiled.parts.order.length} events{events.length} sizes3 apg menubar ↗ {#if lastSelected} last{lastSelected} {/if}

File New tab New window New incognito (offline) Open recent project.svelte readme.md package.json Clear recent Print… Quit Edit Undo Redo Cut Copy Paste Find… Replace… View Show status bar Layers Ruler Grid Guides Theme Light Dark System Help Documentation Keyboard shortcuts About UIX

trace {#if trace.length === 0} click a trigger or arrow-nav between menus {:else} {#each trace.slice(0, 3) as entry} {entry.event} · {entry.family}{entry.intent ? ' · ' + entry.intent : ''} {fmtTime(entry.at)} {/each} {/if} active {activeMenu || '—'}

{#if tab === 'live'}

Controls

Soma owns active-menu state + keyboard nav across menus. Eidos adds size on the root and propagates it to per-menu Content via context.

soma Provider props

value open menu id dir {#each ['ltr', 'rtl'] as d (d)} {/each} loop cross-menu arrow wraps {loop ? 'on' : 'off'}

eidos visual size · bar height + trigger padding + font-size + per-menu density

size {#each ['sm', 'md', 'lg'] as s (s)} {/each}

Bound state · mirrors of CheckboxItem / CheckboxGroup / RadioGroup

showStatusBar CheckboxItem {showStatusBar ? 'on' : 'off'} viewLayers CheckboxGroup array theme RadioGroup {#each ['light', 'dark', 'system'] as t (t)} {/each}

soma headless · active-menu state + cross-menu nav svelte

{somaSnippet}

eidos visual · bar surface + trigger states + size context svelte

{eidosSnippet}

{/if} {#if tab === 'api'}

API reference

Three menubar-specific parts (Provider, Menu, Trigger, Content) plus DropdownMenu's full inner surface for Item / Sub / Checkbox / Radio. The inner parts share recipes with DropdownMenu — the menu-indicator shared partial (checkbox/radio glyphs) applies automatically.

Provider

Prop	Type	Default	Description
value bindable	string	''	Identifier of the currently open menu. Empty = none open.
onValueChange	(value: string) => void	—	Fires when the active menu changes.
dir	'ltr' \| 'rtl'	'ltr'	Direction for cross-menu arrow nav.
loop	boolean	true	Wrap cross-menu arrow at edges.
size eidos	ResponsiveProp<'sm' \| 'md' \| 'lg'>	'md'	Visual size — bar height + trigger padding + per-menu density (via context).

Prop	Type	Default	Description
value	string	—	Unique identifier for this menu inside the menubar.
onOpenChange / onOpenChangeComplete	(open: boolean) => void	—	Per-menu open/close + animation-settle callbacks.

Trigger

Prop	Type	Default	Description
disabled	boolean	false	Disable opening this menu via this trigger.
…native button attrs	PrimitiveButtonAttributes	—	Renders a native `<button>`; all HTML button attrs flow through.

Content

Prop	Type	Default	Description
side · sideOffset · align · alignOffset · avoidCollisions · …	FloatingLayerProps	—	Same surface as DropdownMenu.Content.
data-size eidos	auto	from Menubar root	Stamped via context — no need to pass per Content.

Inner parts (shared with DropdownMenu)

Item, Group, GroupHeading, Separator, Arrow, CheckboxItem, CheckboxGroup, RadioGroup, RadioItem, Sub, SubTrigger, SubContent — identical API to DropdownMenu. Eidos re-uses those wrappers so the recipe (and the menu-indicator shared partial) is one source of truth.

{/if} {#if tab === 'morfo'}

morfo · declarative contract

Source: src/uix/morfo/components/menubar.ts.

Field	Value
name	"{menubarMorfo.name}"
kebab	"{menubarMorfo.kebab}"
scope	[{menubarMorfo.scope.map((s) => `"${s}"`).join(', ')}]
apg	{menubarMorfo.apg}
parts.length	{menubarMorfo.parts.length}
events.length	{events.length}

Parts

{#each partsList as part (part.kebab)} {/each}

Part	Marker	Element	Role	Archetype	States	Optional
{part.kebab}	`[{part.marker}]`	<{part.defaultElement}>	{part.role ?? '—'}	{part.archetype ?? '—'}	{part.states.length ? part.states.join(' \| ') : '—'}	{part.optional ? 'yes' : 'no'}

Events declaration

{#each events as action (action.name)} {@const sem = action.semantic} {@const intentDecl = 'intent' in sem ? sem.intent : undefined} {@const intentStr = typeof intentDecl === 'string' ? intentDecl : intentDecl ? `fromProp:${(intentDecl as { fromProp?: string }).fromProp ?? '?'}` : '—'} {/each}

name	family	verb	sequence	intent	target
{action.name}	{sem.family}	{sem.verb ?? '—'}	{sem.sequence ?? 'pre'}	{intentStr}	{action.target}

{/if} {#if tab === 'sema'}

sema · events + perceptual signature

One event — commit-select — fires when an Item is activated. Open/close of individual menus rides on DropdownMenu's events via the re-exported parts.

{#each events as action (action.name)} {@const intentDecl = 'intent' in action.semantic ? action.semantic.intent : undefined} {@const effectiveIntent = typeof intentDecl === 'string' ? intentDecl : undefined} {/each}

Name	Family	Verb	Sequence	Intent	Play
{action.name}	{action.semantic.family}	{action.semantic.verb ?? '—'}	{action.semantic.sequence ?? 'pre'}	{effectiveIntent ?? '—'}

{/if} {#if tab === 'recipe'}

Eidos recipe

Selectors at src/uix/eidos/components/menubar/menubar.css (bar + trigger only). Per-menu Content / Item / Sub / Checkbox / Radio chrome is reused from dropdown-menu.css + the shared menu-indicator.css partial because soma's Menubar re-exports the DropdownMenu parts for those slots.

Selector	Source	What it paints
[data-menubar]	eidos	The bar surface — flex row, border, bg.
[data-menubar][data-size]	eidos	Size variant (sm/md/lg) — height + padding + gap + font.
[data-menubar-trigger]	morfo	In-bar trigger: transparent bg, hover/open tint, focus ring.
[data-menubar-trigger][data-state='open']	morfo	Open menu's trigger lights up with primary tint.
[data-dropdown-menu-content], [data-dropdown-menu-item], …	eidos	Inner panel + items — shared with DropdownMenu.
[data-dropdown-menu-checkbox-item]::before, ::after	eidos	Checkbox indicator — outlined box / filled + ✓ via shared menu-indicator partial.

{/if} {#if tab === 'a11y'}

Accessibility

Follows the APG menubar pattern. Bar exposes role="menubar"; each per-menu Content is role="menu". Trigger has aria-haspopup="menu", aria-expanded and aria-controls.

Keyboard

Key	Action
ArrowRight / ArrowLeft on Trigger	Move focus to next/previous trigger (wraps if `loop=true`; RTL inverts).
Enter / Space / ArrowDown on Trigger	Open the menu, focus first item.
ArrowUp / ArrowDown on Item	Move within the menu.
ArrowLeft / ArrowRight on Item	Close current menu, focus + open prev/next menu.
Escape	Close the menu, return focus to its Trigger.
Home / End	Jump to first / last item.
Letter	Typeahead — focus next item starting with that letter.

Pointer

Gesture	Behavior
Click trigger	Opens its menu (or closes if already open).
Hover sibling trigger while a menu is open	Switches to the hovered menu without an intermediate click.
Click outside	Closes the active menu.

ARIA contract

Part	Attribute	Value
menubar	role	"menubar"
trigger	aria-haspopup	"menu"
trigger	aria-expanded	{`{open}`}
trigger	aria-controls	{``}
trigger	data-state	"open" \| "closed"
content	role	"menu"
content	aria-labelledby	{``}

{/if}