Breadcrumbs

The Breadcrumbs component provides hierarchical navigation to help users understand their current location within a site structure and navigate back to previous levels.

Installation

npm install @duskmoon-dev/el-breadcrumbs

Usage

import '@duskmoon-dev/el-breadcrumbs/register';

<el-dm-breadcrumbs id="breadcrumbs"></el-dm-breadcrumbs>

<script>
  document.querySelector('#breadcrumbs').items = [
    { label: 'Home', href: '/' },
    { label: 'Products', href: '/products' },
    { label: 'Electronics', href: '/products/electronics' },
    { label: 'Laptops' }
  ];
</script>

Live Demo

Breadcrumbs Demo

Properties

Property	Type	Default	Description
`items`	`BreadcrumbItem[]`	`[]`	Array of breadcrumb items
`separator`	`string`	`'/'`	Separator character between items

BreadcrumbItem Interface

interface BreadcrumbItem {
  label: string;  // Display label for the breadcrumb
  href?: string;  // URL for the breadcrumb link (optional for last item)
}

Custom Separator

<!-- Text separator -->
<el-dm-breadcrumbs separator=">"></el-dm-breadcrumbs>

<!-- Custom separator via slot -->
<el-dm-breadcrumbs>
  <span slot="separator">
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
      <polyline points="9 18 15 12 9 6"></polyline>
    </svg>
  </span>
</el-dm-breadcrumbs>

Custom Separator

Events

Event	Detail	Description
`navigate`	`{ item: BreadcrumbItem, index: number }`	Fired when a breadcrumb link is clicked

Event Handling

const breadcrumbs = document.querySelector('el-dm-breadcrumbs');
breadcrumbs.addEventListener('navigate', (e) => {
  e.preventDefault(); // Prevent default navigation
  console.log('Navigating to:', e.detail.item.href);
  console.log('Item:', e.detail.item);
  console.log('Index:', e.detail.index);
});

Slots

Slot	Description
`separator`	Custom separator element between items

CSS Parts

Part	Description
`nav`	The navigation container
`list`	The ordered list element
`item`	Individual breadcrumb item container
`link`	Breadcrumb link element
`current`	Current page text (last item)
`separator`	Separator element between items

Styling Example

el-dm-breadcrumbs::part(link) {
  color: #3b82f6;
  font-weight: 500;
}

el-dm-breadcrumbs::part(link):hover {
  text-decoration: underline;
}

el-dm-breadcrumbs::part(current) {
  color: #6b7280;
}

el-dm-breadcrumbs::part(separator) {
  color: #9ca3af;
  margin: 0 0.25rem;
}

Accessibility

Uses <nav> element with aria-label="Breadcrumb"
Uses <ol> for semantic list structure
Last item has aria-current="page" to indicate current page
All links are keyboard accessible
Focus indicator for keyboard navigation