Menüleiste (Menubar) — UI-Kit-Galerie

Beispiele

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

Eigenschaften

Prop	Typ	Default	Builder-Label
menus *	array	—	Menüs

* Pflicht-Prop

Events & Slots

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

Stellschrauben (Komponenten-Tokens)

Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.

Token	Default
`--menubar-border-default`	`var(--color-border-default)`
`--menubar-elevation-overlay`	`var(--elevation-overlay)`
`--menubar-focus-ring-color`	`var(--focus-ring-color)`
`--menubar-focus-ring-offset`	`var(--focus-ring-offset)`
`--menubar-focus-ring-width`	`var(--focus-ring-width)`
`--menubar-radius-control`	`var(--radius-control)`
`--menubar-radius-sm`	`var(--radius-sm)`
`--menubar-status-danger`	`var(--color-status-danger)`
`--menubar-surface-default`	`var(--color-surface-default)`
`--menubar-surface-overlay`	`var(--color-surface-overlay)`
`--menubar-surface-sunken`	`var(--color-surface-sunken)`
`--menubar-text-default`	`var(--color-text-default)`
`--menubar-text-disabled`	`var(--color-text-disabled)`
`--menubar-text-muted`	`var(--color-text-muted)`

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