// Generated by scripts/generate-showcase.mjs. Do not edit directly. page BreadcrumbDetail { layout = "showcase" state playground_label = ctx.url.searchParams.get("pg_label") ?? "Breadcrumb" state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"breadcrumb-0-1\",\"key\":\"breadcrumb-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#breadcrumb-demo\",\"actionHref\":\"#breadcrumb-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"breadcrumb-0-2\",\"key\":\"breadcrumb-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#breadcrumb-demo\",\"actionHref\":\"#breadcrumb-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]") state playground_active = ctx.url.searchParams.get("pg_active") ?? "" state playground_separator = ctx.url.searchParams.get("pg_separator") ?? "chevron" state playground_showHome = (ctx.url.searchParams.get("pg_showHome") ?? "true") === "true" state playground_homeLabel = ctx.url.searchParams.get("pg_homeLabel") ?? "Breadcrumb" state playground_homeHref = ctx.url.searchParams.get("pg_homeHref") ?? "#breadcrumb-demo" state playground_homeIcon = ctx.url.searchParams.get("pg_homeIcon") ?? "icon-[lucide--house]" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "minimal" state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" seo { title = "Breadcrumb" description = "Show responsive hierarchical navigation with home support, separators, current-page state, sizes, and selection events." } view {
Navigation component

Breadcrumb

Show responsive hierarchical navigation with home support, separators, current-page state, sizes, and selection events.

12 props0 slots1 eventsTheme readyResponsive
Interactive playground

Configure Breadcrumb

Change any prop and inspect the server-rendered component immediately.

Live preview
Component code
<Breadcrumb
  items='[
    {
      "id": "breadcrumb-0-1",
      "key": "breadcrumb-0-1",
      "value": "primary",
      "label": "Primary workflow",
      "title": "Primary workflow",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "A configurable sample message.",
      "href": "#breadcrumb-demo",
      "actionHref": "#breadcrumb-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 16,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "breadcrumb-0-2",
      "key": "breadcrumb-0-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "Another configurable message.",
      "href": "#breadcrumb-demo",
      "actionHref": "#breadcrumb-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 32,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
  showHome="true"
  homeLabel="Breadcrumb"
  homeHref="#breadcrumb-demo"
/>
Event outputInteract with the preview to inspect event.detail.
Component props12 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Minimal page trail

Use a restrained breadcrumb above standard page content.

01
Live preview
Component usage.wrn
<Breadcrumb
  items='[
    {
      "label": "Home",
      "href": "/",
      "icon": "icon-[lucide--house]"
    },
    {
      "label": "Components",
      "href": "/base"
    },
    {
      "label": "Page header",
      "current": true
    }
  ]'
  showHome="true"
  homeLabel="Breadcrumb"
  homeHref="#breadcrumb-demo"
  size="small"
/>
Compact

Soft navigation trail

Add a soft surface when the breadcrumb needs more separation from surrounding content.

02
Live preview
Component usage.wrn
<Breadcrumb
  label="Compact example"
  items='[
    {
      "label": "Home",
      "href": "/",
      "icon": "icon-[lucide--house]"
    },
    {
      "label": "Components",
      "href": "/base"
    },
    {
      "label": "Page header",
      "current": true
    }
  ]'
  showHome="true"
  homeLabel="Compact example"
  homeHref="#breadcrumb-demo"
  size="medium"
  variant="soft"
/>
Advanced

Large directory breadcrumb

Use a larger breadcrumb in directories, dashboards, and touch-first interfaces.

03
Live preview
Component usage.wrn
<Breadcrumb
  label="Advanced example"
  items='[
    {
      "label": "Home",
      "href": "/",
      "icon": "icon-[lucide--house]"
    },
    {
      "label": "Components",
      "href": "/base"
    },
    {
      "label": "Page header",
      "current": true
    }
  ]'
  separator="slash"
  showHome="true"
  homeLabel="Advanced example"
  homeHref="#breadcrumb-demo"
  size="large"
  variant="outline"
/>
Component events

Respond to every public interaction

Use declarative @event handlers in .wrn files or subscribe to the bubbling browser events from JavaScript.

@selectFires when an item, option, card, or result is selected.
Declarative handlers.wrn
<Breadcrumb
  @select='console.log(event.detail)'
/>
Browser listeners.js
const component = document.querySelector("[data-ui-component=\"Breadcrumb\"], [data-component=\"Breadcrumb\"]")

component?.addEventListener("select", (event) => {
  console.log("select", event.detail)
})
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
labelstring"Breadcrumb"No
itemsstring[]No
activestring""No
separatorstring"chevron"No
showHomebooleanfalseNo
homeLabelstring"Home"No
homeHrefstring"/"No
homeIconstring"icon-[lucide--house]"No
sizestring"default"No
colorstring"primary"No
variantstring"minimal"No
classstring""No
} }