Breadcrumb

Navigation breadcrumb trail.

Usage

<w-breadcrumb label="Breadcrumb">
  <w-slot item><w-link href="/">Home</w-link></w-slot>
  <w-slot sep><span>/</span></w-slot>
  <w-slot item><w-link href="/products">Products</w-link></w-slot>
  <w-slot sep><span>/</span></w-slot>
  <w-slot item><span aria-current="page">Widget</span></w-slot>
</w-breadcrumb>

Props

Prop	Type	Default	Description
label	string	"Breadcrumb"	Accessible label

Slots

Slot	Element	Description
item	w-link / Span	Breadcrumb items
sep	Any	Visual separator between items

Examples

With Icons

<w-breadcrumb label="Breadcrumb">
  <w-slot item><w-link href="/">🏠 Home</w-link></w-slot>
  <w-slot sep><span>›</span></w-slot>
  <w-slot item><w-link href="/docs">📚 Docs</w-link></w-slot>
  <w-slot sep><span>›</span></w-slot>
  <w-slot item><span aria-current="page">📄 Page</span></w-slot>
</w-breadcrumb>

Custom Separator

<w-breadcrumb label="Breadcrumb">
  <w-slot item><w-link href="/">Home</w-link></w-slot>
  <w-slot sep><span>→</span></w-slot>
  <w-slot item><w-link href="/category">Category</w-link></w-slot>
  <w-slot sep><span>→</span></w-slot>
  <w-slot item><span aria-current="page">Current</span></w-slot>
</w-breadcrumb>

Styling

The list slot gets display: flex with sensible defaults (gap, no list bullets, no padding). Items get role="listitem"; the current page item carries aria-current="page".

w-breadcrumb a {
  color: #0066cc;
  text-decoration: none;
}
w-breadcrumb a:hover {
  text-decoration: underline;
}

/* Current page */
w-breadcrumb [aria-current="page"] {
  font-weight: 600;
  color: #333;
}

/* Separator slot */
w-breadcrumb w-slot[sep] > * {
  color: #666;
}

Selector	Targets
w-breadcrumb [aria-current="page"]	Current page item
w-breadcrumb w-slot[item] > *	Each crumb
w-breadcrumb w-slot[sep] > *	Separator content

Accessibility

• Container has role="navigation" with aria-label
• List structure with role="list" and role="listitem"
• Current page marked with aria-current="page"
• Links are keyboard accessible via w-link