Menubar 1.2.2

The <velin-menubar> component implements a horizontal menubar with arrow-key navigation between role="menuitem" children. Deutsch: Menueleiste

Maturity: Documented as stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) is separate and beta / foundation where noted.

When to use

Desktop-style action bars (File / Edit / View patterns) with keyboard roving between items.
Children should be buttons or links that act as menuitems (role is applied if missing).

When not

Do not use a menubar for primary page navigation — use Navbar or Bottom navigation.
Do not confuse with Dropdown / Command palette for single menus or searchable commands.

Example

<velin-menubar aria-label="File actions">
  <button type="button" role="menuitem">New</button>
  <button type="button" role="menuitem">Open</button>
  <button type="button" role="menuitem">Save</button>
</velin-menubar>

Attributes

Attribute	Default	Notes
`aria-label`	`Menu bar`	Accessible name on the internal `role="menubar"`

Default slot: menuitem children. No custom events.

Host renders role="menubar"; slotted items get role="menuitem" when unset.
Arrow-key roving via the shared focus manager.
Provide a clear aria-label when the visual context is not enough.

Contract status: pass.

Import

Load the bundle once, then use the custom element in your markup:

<script type="module" src="../../dist/velinstyle-components.min.js"></script>
<velin-menubar aria-label="File">…</velin-menubar>