Dropdown-Menü — UI-Kit-Galerie

Beispiele

Aktionsmenü (klickbar)

Primär, rechtsbündig

Mit Icons + Trenner (Zeilen-Aktionen-Muster)

Eigenschaften

Prop	Typ	Default	Builder-Label
label *	string	—	Button-Beschriftung
items *	array	—	Menü-Einträge
variant	string: secondary \| primary \| ghost	"secondary"	Button-Variante
align	string: start \| end	"start"	Menü-Ausrichtung

* Pflicht-Prop

Events & Slots

Events: ⚡ select⚡ open⚡ close — 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
`--dropdown-action-on-primary`	`var(--color-action-on-primary)`
`--dropdown-action-on-secondary`	`var(--color-action-on-secondary)`
`--dropdown-action-primary`	`var(--color-action-primary)`
`--dropdown-action-primary-hover`	`var(--color-action-primary-hover)`
`--dropdown-action-secondary`	`var(--color-action-secondary)`
`--dropdown-action-secondary-hover`	`var(--color-action-secondary-hover)`
`--dropdown-border-default`	`var(--color-border-default)`
`--dropdown-elevation-overlay`	`var(--elevation-overlay)`
`--dropdown-focus-ring-color`	`var(--focus-ring-color)`
`--dropdown-focus-ring-offset`	`var(--focus-ring-offset)`
`--dropdown-focus-ring-width`	`var(--focus-ring-width)`
`--dropdown-radius-control`	`var(--radius-control)`
`--dropdown-radius-sm`	`var(--radius-sm)`
`--dropdown-status-danger`	`var(--color-status-danger)`
`--dropdown-status-danger-surface`	`var(--color-status-danger-surface)`
`--dropdown-surface-overlay`	`var(--color-surface-overlay)`
`--dropdown-text-default`	`var(--color-text-default)`
`--dropdown-text-link`	`var(--color-text-link)`

Genutzte Design-Tokens

border.hairlinecolor.action.on-primarycolor.action.on-secondarycolor.action.primarycolor.action.primary-hovercolor.action.secondarycolor.action.secondary-hovercolor.border.defaultcolor.border.subtlecolor.status.dangercolor.status.danger-surfacecolor.surface.overlaycolor.text.defaultcolor.text.linkduration.fasteasing.standardelevation.overlayfocus.ring-colorfocus.ring-offsetfocus.ring-widthfont.family.defaultlayer.dropdownradius.controlradius.smsize.1size.2size.3text.mdweight.semibold