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

w-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
}

w-breadcrumb w-slot[sep] {
  color: #666;
}

w-breadcrumb [aria-current="page"] {
  font-weight: bold;
}

w-breadcrumb w-link {
  color: #0066cc;
}

w-breadcrumb w-link:hover {
  text-decoration: underline;
}

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