Theme: ← Übersicht Builder Katalog-Verwaltung Tokens

Navigation

Hauptnavigation in zwei Menü-Formen: klassische Leiste ODER Burger-Flyout (Logo + Primary-CTA + Burger, Links im Vollflächen-Overlay rechtsbündig) — navigate als semantisches Event

Im Builder nutzen
Components v1.5.0 Web UI WebsiteAppDesktop component.navigation

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

PropTypDefaultBuilder-Label
brandstring""Markenname
items *array—Einträge
logostring""Logo-URL (https, optional — vor der Marke)
menustring: bar | flyout"bar"Menü-Form (Leiste oder Burger-Flyout)
ctaLabelstring""CTA-Beschriftung (Flyout: Button rechts)
ctaUrlstring""CTA-Ziel
ctaVariantstring: primary | secondary"primary"CTA-Button-Variante
extraItemsarray[]Zweitlinks im Flyout (Impressum …)
actionsarray[]Aktions-Buttons rechts (Leiste)

* Pflicht-Prop

Events & Slots

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

Genutzte Design-Tokens

border.hairlinecolor.action.on-primarycolor.action.on-secondarycolor.action.primarycolor.action.primary-hovercolor.action.secondarycolor.action.secondary-hovercolor.border.defaultcolor.surface.defaultcolor.surface.overlaycolor.text.defaultcolor.text.mutedduration.baseduration.fasteasing.standardelevation.overlayfocus.ring-colorfocus.ring-offsetfocus.ring-widthfont.family.defaultlayer.dropdownlayer.modalradius.controlradius.fullradius.overlayradius.smradius.surfacesize.10size.12size.2size.24size.3size.6text.3xltext.lgtext.mdtext.smweight.boldweight.mediumweight.regularweight.semibold

LLM-Notizen

component.navigation

Kopfnavigation einer Website. Zwei Menü-Formen über die Prop menu: bar (klassische Leiste mit Links + Aktions-Buttons rechts) und flyout (Logo + CTA + Burger, Links im Vollflächen-Overlay).

Wann nutzen

  • Jede Website-Surface bekommt genau EINE navigation im header-Slot des Templates.
  • flyout für reduzierte Personal-/Portfolio-Seiten, bar für Portale und Shops.
  • Dropdown-Menüs: items[].children (Label + href + optionale Beschreibung) macht aus einem Item einen Dropdown-Button.

Wichtige Props

  • items: Hauptlinks [{label, href, active?, children?}] — genau ein Item sollte active sein.
  • actions: Buttons rechts [{label, href, variant: primary|secondary|soft|ghost}] (nur bar).
  • ctaLabel/ctaUrl/ctaVariant + extraItems: nur für flyout.
  • logo (https-URL) und/oder brand (Text).

Beispiel-Node


{
  "nodeId": "node-nav",
  "definition": "component.navigation",
  "props": {
    "menu": "bar",
    "brand": "Acme",
    "items": [{"label": "Start", "href": "/", "active": true}, {"label": "Preise", "href": "/preise/"}],
    "actions": [{"label": "Login", "href": "/login/", "variant": "ghost"}, {"label": "Registrieren", "href": "/signup/", "variant": "primary"}]
  }
}

Hinweise

  • Emittiert navigate — ohne Binding navigiert der Browser normal (Progressive Enhancement).
  • Farben kommen vollständig aus dem Theme (surface.default, action.*) — keine Farb-Props.