@duskmoon-dev/el-breadcrumbs
A breadcrumb navigation component built with Web Components.
Installation
bun add @duskmoon-dev/el-breadcrumbs
Usage
Auto-Register
import '@duskmoon-dev/el-breadcrumbs/register';
<el-dm-breadcrumbs></el-dm-breadcrumbs>
Manual Registration
import { ElDmBreadcrumbs, register } from '@duskmoon-dev/el-breadcrumbs';
// Register with default tag name
register();
// Or register with custom tag name
customElements.define('my-breadcrumbs', ElDmBreadcrumbs);
Setting Items via JavaScript
const breadcrumbs = document.querySelector('el-dm-breadcrumbs');
breadcrumbs.items = [
{ label: 'Home', href: '/' },
{ label: 'Products', href: '/products' },
{ label: 'Category', href: '/products/category' },
{ label: 'Current Page' }, // No href = current page
];
Attributes
| Attribute | Type | Default | Description |
|---|
separator | string | '/' | Separator character |
Slots
| Slot | Description |
|---|
separator | Custom separator element |
CSS Parts
| Part | Description |
|---|
nav | The nav element |
list | The ordered list |
item | Each breadcrumb item |
link | The link elements |
current | The current (last) item |
separator | The separator elements |
Events
| Event | Detail | Description |
|---|
navigate | { item, index } | Fired when a breadcrumb is clicked |
Examples
Basic
<el-dm-breadcrumbs id="crumbs"></el-dm-breadcrumbs>
<script>
document.querySelector('#crumbs').items = [
{ label: 'Home', href: '/' },
{ label: 'Library', href: '/library' },
{ label: 'Data' },
];
</script>
Custom Separator
<el-dm-breadcrumbs separator=">"></el-dm-breadcrumbs>
<el-dm-breadcrumbs separator="→"></el-dm-breadcrumbs>
<el-dm-breadcrumbs separator="|"></el-dm-breadcrumbs>
Custom Separator Element
<el-dm-breadcrumbs>
<span slot="separator">›</span>
</el-dm-breadcrumbs>
Handling Navigation
const breadcrumbs = document.querySelector('el-dm-breadcrumbs');
breadcrumbs.addEventListener('navigate', (e) => {
e.preventDefault();
console.log('Navigate to:', e.detail.item.href);
// Handle navigation (e.g., with router)
});
Dynamic Updates
// Update breadcrumbs based on route
function updateBreadcrumbs(path) {
const parts = path.split('/').filter(Boolean);
const items = [{ label: 'Home', href: '/' }];
let href = '';
parts.forEach((part, index) => {
href += `/${part}`;
items.push({
label: part.charAt(0).toUpperCase() + part.slice(1),
href: index === parts.length - 1 ? undefined : href,
});
});
document.querySelector('el-dm-breadcrumbs').items = items;
}
License
MIT