Theme: ← Übersicht Builder Katalog-Verwaltung Tokens

Menüleiste (Menubar)

Klassische Desktop-Menüleiste (Datei, Bearbeiten, Ansicht …): Menüs mit Einträgen, Kürzeln, Trennern und Gefahr-Ton; Tastatur-fähig, öffnet bei Hover wenn ein Menü offen ist

Im Builder nutzen
Components v1.0.0 Navigation AppDesktop component.menubar

Beispiele

Fenster-Menüleiste (klicken öffnet, Hover wechselt, Escape schließt)

Eigenschaften

PropTypDefaultBuilder-Label
menus *array—Menüs

* Pflicht-Prop

Events & Slots

Events: ⚡ command — im Surface per on: {<event>: {action, params}} verdrahtbar.

Genutzte Design-Tokens

border.hairlinecolor.border.defaultcolor.status.dangercolor.surface.defaultcolor.surface.overlaycolor.surface.sunkencolor.text.defaultcolor.text.disabledcolor.text.mutedelevation.overlayfocus.ring-colorfocus.ring-offsetfocus.ring-widthfont.family.defaultfont.family.monolayer.dropdownradius.controlradius.smsize.1size.2size.3size.32text.smtext.xs

LLM-Notizen

component.menubar

Desktop-Menüleiste (Datei/Bearbeiten/Ansicht …). Nur web.application und desktop.shell — auf Websites gibt es sie bewusst nicht.

Wann nutzen

  • Ganz oben in einer Window-App, meist über component.sidebar + component.page-header.
  • Für Rechtsklick-Menüs: component.context-menu. Für Kommandopalette: component.command-menu.

Wichtige Props

  • menus = [{label, items: [{label, shortcut?, danger?, disabled?, divider?}]}].

Beispiel-Node


{
  "definition": "component.menubar",
  "props": {"menus": [
    {"label": "Datei", "items": [{"label": "Neu", "shortcut": "Strg+N"}, {"divider": true}, {"label": "Schließen", "danger": true}]}
  ]},
  "on": {"command": {"action": "action.notify.show", "params": {"title": "Befehl ausgeführt"}}}
}

Hinweise

  • Emittiert command mit dem Eintrags-Label; Hover wechselt das Menü, solange eines offen ist (Desktop-Verhalten).