Menüleiste 1.2.0

The <velin-menubar> Komponente implements a horizontal menubar with arrow-key navigation between role="menuitem" children. English: Menubar

Reifegrad: Dokumentiert als stabil in VelinStyle 1.2.0. Design Intelligence (Plan / Review / Agent-Meta) ist separat und Beta / Grundlage wo entsprechend angegeben.

Wann verwenden

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

Wann nicht verwenden

Do not use a menubar for primary Seite navigation — use Navigationsleiste or Bottom navigation.
Do not confuse with Dropdown / Command palette for single Menüs or searchable commands.

Beispiel

<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>

Attribut

Attribut	Standard	Hinweise
`aria-label`	`Menü bar`	Accessible name on the internal `role="menubar"`

Standard-Slot: Menüeintrag-Kinder. Keine eigenen Ereignisse.

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

Vertragsstatus: bestanden.

Import

Lade das Bundle einmal und nutze dann das Custom Element in deinem Markup:

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