Stratton.Cologne

Appearance

Breadcrumb ​

Semantische, leichte Breadcrumb-Komponenten mit Named Exports (kein Default-Export).

Live-Demo ​

Das UI-Paket @stratton-cologne/ui ist nicht installiert.

Beispiel ​

vue
<script setup lang="ts">
import { Breadcrumb, BreadcrumbItem } from '@stratton-cologne/ui/breadcrumb'
</script>

<template>
  <Breadcrumb aria-label="Breadcrumb">
    <BreadcrumbItem to="/">Start</BreadcrumbItem>
    <BreadcrumbItem to="/admin">Admin</BreadcrumbItem>
    <BreadcrumbItem current>Übersicht</BreadcrumbItem>
  </Breadcrumb>
</template>

Props ​

  • fromRouter: Erzeugt Crumbs aus route.matched (Default: true).
  • items: Manuelle Liste { path?, labelKey?, label? }.
  • separator: Trennzeichen, Default aus i18n (›).
  • includeRoot: Erstes Element (Root) anzeigen (Default: true).
  • ariaLabel: Beschriftung für nav (Default i18n: „Breadcrumb“).

Slots ​

  • item: Individuelles Rendering eines Crumbs. Props: { item, index, is-last }
  • separator: Trennzeichen zwischen Items.

Styling (data-Attribute) ​

  • Root: nav[data-id="stratton"]
  • Li/Ol sind neutral; nutze eigene Klassen oder selektiere nach Struktur.