Navigation — component.navigation

Componentv1.5.1Navigationweb.documentweb.applicationdesktop.shell

Beispiele

Mit Marke und aktivem Eintrag

Unsichere URL → neutralisiert

Leiste mit Aktions-Buttons rechts (Varianten ghost | soft | secondary | primary)

Menü-Form „flyout": Logo + Primary-CTA + Burger (klicken → Vollflächen-Overlay, Escape schließt)

Eigenschaften

Prop	Typ	Default
`brand`	string	`""`
`items *`	array	`—`
`logo`	string	`""`
`menu`	string: bar \| flyout	`"bar"`
`ctaLabel`	string	`""`
`ctaUrl`	string	`""`
`ctaVariant`	string: primary \| secondary	`"primary"`
`extraItems`	array	`[]`
`actions`	array	`[]`

Events & Slots

Events: navigate

Stellschrauben (Komponenten-Tokens)

Token	Default
`--navigation-background`	`var(--color-surface-default)`
`--navigation-border`	`var(--color-border-default)`
`--nav-action-bg`	`var(--color-action-secondary)`
`--nav-action-bg-hover`	`var(--color-action-secondary-hover)`
`--nav-action-text`	`var(--color-action-on-secondary)`
`--nav-cta-bg`	`var(--color-action-primary)`
`--nav-cta-bg-hover`	`var(--color-action-primary-hover)`
`--nav-cta-text`	`var(--color-action-on-primary)`

Genutzte Design-Tokens

border.hairline color.action.on-primary color.action.on-secondary color.action.primary color.action.primary-hover color.action.secondary color.action.secondary-hover color.border.default color.surface.default color.surface.overlay color.text.default color.text.muted duration.base duration.fast easing.standard elevation.overlay focus.ring-color focus.ring-offset focus.ring-width font.family.default layer.dropdown layer.modal radius.control radius.full radius.overlay radius.sm radius.surface size.10 size.12 size.2 size.24 size.3 size.6 text.3xl text.lg text.md text.sm weight.bold weight.medium weight.regular weight.semibold