Seitenleiste (Sidebar) — UI-Kit-Galerie

Beispiele

App-Sidebar mit Gruppen, Icons, Badge und Nutzer-Fuß (Klapp-Knopf oben rechts)

Eigenschaften

Prop	Typ	Default	Builder-Label
brand	string	""	Marke
groups *	array	—	Nav-Gruppen
userName	string	""	Nutzer (Fußbereich)
userInfo	string	""	Nutzer-Zusatz (E-Mail/Rolle)
collapsible	boolean	true	Einklappbar

* Pflicht-Prop

Events & Slots

Events: ⚡ navigate — 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
`--sidebar-border-default`	`var(--color-border-default)`
`--sidebar-radius-control`	`var(--radius-control)`
`--sidebar-surface-default`	`var(--color-surface-default)`
`--sidebar-surface-sunken`	`var(--color-surface-sunken)`
`--sidebar-text-default`	`var(--color-text-default)`
`--sidebar-text-muted`	`var(--color-text-muted)`
`--sidebar-active-marker`	`var(--color-action-primary)`

Genutzte Design-Tokens

border.emphasisborder.hairlinecolor.action.primarycolor.border.defaultcolor.surface.defaultcolor.surface.sunkencolor.text.defaultcolor.text.mutedduration.fasteasing.standardfont.family.defaultradius.controlshadow.overlay-largesize.16size.2size.3size.32size.4size.8text.lgtext.mdtext.smtext.xstracking.wideweight.boldweight.mediumweight.semibold

LLM-Notizen

component.sidebar

App-Seitenleiste (nur web.application/desktop.shell): Marke, gruppierte Nav-Einträge mit Icons + Badges, Nutzer-Fuß, einklappbar auf Icon-Breite.

Wann nutzen

Im sidebar-Slot von template.app.shell. NICHT auf Websites (Target-Filter blendet sie dort aus).

Wichtige Props

groups = [{title?, items: [{label, href, icon?, badge?, active?}]}] — Icons aus der ui.icon-Whitelist.
userName/userInfo (Fußbereich), collapsible, brand.

Beispiel-Node


{
  "definition": "component.sidebar",
  "props": {
    "brand": "tricoma",
    "groups": [{"items": [{"label": "Dashboard", "href": "#", "icon": "home", "active": true}]}],
    "userName": "D. Selig", "userInfo": "d@tricoma.de"
  }
}