Breadcrumbs

Overview

Breadcrumbs provide a navigation trail showing the user's location within a site's hierarchy. They help users understand where they are and enable quick navigation back to parent pages. Breadcrumbs are essential for sites with deep navigation structures.

Key Features

• Hierarchical Navigation - Show path from root to current page
• Multiple Separators - Choose from /, >, →, chevron, or custom HTML
• Home Icon - Optional home icon for first breadcrumb
• Responsive Collapse - Auto-collapse middle items on mobile
• Click Callbacks - Handle breadcrumb navigation via JavaScript
• Dynamic Updates - Add, remove, or replace breadcrumb items

When to Use Breadcrumbs

• Multi-Level Sites - Sites with 3+ levels of hierarchy
• E-commerce - Category navigation (Home > Electronics > Phones > iPhone)
• Documentation - Section navigation (Docs > API > Elements > Modal)
• Admin Panels - Dashboard navigation paths

Basic Usage

<!-- HTML Container -->
<nav id="breadcrumb-nav"></nav>

<!-- JavaScript Initialisation -->
<script>
const breadcrumbs = Domma.elements.breadcrumbs('#breadcrumb-nav', {
    items: [
        { text: 'Home', url: '/' },
        { text: 'Products', url: '/products' },
        { text: 'Electronics', url: '/products/electronics' },
        { text: 'Smartphones', active: true }
    ],
    separator: '/',
    homeIcon: false,
    responsive: true
});
</script>

Quick Start

Get started with Breadcrumbs in seconds. Here's the simplest implementation:

Basic Breadcrumb Trail

Create a simple breadcrumb navigation:

<nav id="quick-start-breadcrumb"></nav>

/**
 * Basic Breadcrumb Trail - from public/showcase/elements/breadcrumbs.
 */
export function mount(root) {
        // Quick Start Examples
    E.breadcrumbs(root.querySelector('#quick-start-breadcrumb'), {
            items: [
                {text: 'Home', url: '#'},
                {text: 'Products', url: '#'},
                {text: 'Widget', active: true}
            ]
        });
}

<nav id="breadcrumb-nav"></nav>

<script>
Domma.elements.breadcrumbs('#breadcrumb-nav', {
    items: [
        { text: 'Home', url: '#' },
        { text: 'Products', url: '#' },
        { text: 'Widget', active: true }
    ]
});
</script>

With Home Icon

Add a home icon to the first breadcrumb:

<nav id="quick-start-home-icon"></nav>

/**
 * With Home Icon - from public/showcase/elements/breadcrumbs.
 */
export function mount(root) {
    E.breadcrumbs(root.querySelector('#quick-start-home-icon'), {
        items: [
            {text: 'Home', url: '#'},
            {text: 'Category', url: '#'},
            {text: 'Item', active: true}
        ],
        homeIcon: true
    });
}

Domma.elements.breadcrumbs('#breadcrumb-nav', {
    items: [
        { text: 'Home', url: '#' },
        { text: 'Category', url: '#' },
        { text: 'Item', active: true }
    ],
    homeIcon: true  // Show home icon
});

Step-by-Step Tutorial

Let's build an e-commerce category navigation system with dynamic breadcrumbs that update as users browse.

Step 1: Create the HTML Structure

Set up a container for breadcrumbs and a category list:

<nav id="product-breadcrumbs" aria-label="Breadcrumb navigation"></nav>

<div class="mt-4">
    <h4>Browse Categories:</h4>
    <div id="category-list" class="flex gap-2">
        <button class="btn btn-sm btn-outline" data-category="electronics">Electronics</button>
        <button class="btn btn-sm btn-outline" data-category="clothing">Clothing</button>
        <button class="btn btn-sm btn-outline" data-category="books">Books</button>
    </div>
</div>

Step 2: Initialise Breadcrumbs

Create breadcrumbs with initial home item:

const productBreadcrumbs = Domma.elements.breadcrumbs('#product-breadcrumbs', {
    items: [
        { text: 'Home', url: '#' }
    ],
    separator: 'chevron',
    homeIcon: true,
    responsive: true
});

Step 3: Handle Category Navigation

Update breadcrumbs when user clicks a category:

$('[data-category]').forEach(btn => {
    btn.addEventListener('click', (e) => {
        const category = e.target.dataset.category;
        const categoryName = e.target.textContent;

        // Add category to breadcrumbs
        productBreadcrumbs.addItem({
            text: categoryName,
            active: true
        });
    });
});

Step 4: Enable Breadcrumb Navigation

Handle clicks on breadcrumbs to navigate back:

const productBreadcrumbs = Domma.elements.breadcrumbs('#product-breadcrumbs', {
    items: [{ text: 'Home', url: '#' }],
    separator: 'chevron',
    homeIcon: true,
    onChange: (item, index) => {
        console.log('Navigate to:', item.text);

        // Remove items after clicked breadcrumb
        const items = productBreadcrumbs.getItems();
        const newItems = items.slice(0, index + 1);

        // Mark last item as active
        if (newItems.length > 0) {
            newItems[newItems.length - 1].active = true;
        }

        productBreadcrumbs.setItems(newItems);
    }
});

Step 5: Add Subcategory Navigation

Handle deeper navigation levels:

const subcategories = {
    electronics: ['Phones', 'Laptops', 'Tablets'],
    clothing: ['Shirts', 'Trousers', 'Shoes'],
    books: ['Fiction', 'Non-Fiction', 'Comics']
};

// Show subcategories when category selected
function showSubcategories(category) {
    const subs = subcategories[category];
    const html = subs.map(sub =>
        `<button class="btn btn-sm btn-secondary" data-subcategory="${sub}">${sub}</button>`
    ).join('');

    $('#subcategory-list')[0].innerHTML = html;

    // Add event listeners
    $('[data-subcategory]').forEach(btn => {
        btn.addEventListener('click', (e) => {
            productBreadcrumbs.addItem({
                text: e.target.textContent,
                active: true
            });
        });
    });
}

Step 6: Complete Working Demo

Try the complete category navigation system:

<nav id="tutorial-breadcrumbs" class="mb-4"></nav>

<div class="mb-3">
    <h4 class="text-sm font-semibold mb-2">Categories:</h4>
    <div class="flex gap-2 flex-wrap">
        <button type="button" class="btn btn-sm btn-outline" data-tutorial-category="electronics">Electronics</button>
        <button type="button" class="btn btn-sm btn-outline" data-tutorial-category="clothing">Clothing</button>
        <button type="button" class="btn btn-sm btn-outline" data-tutorial-category="books">Books</button>
    </div>
</div>

<div id="tutorial-subcategories" class="hidden">
    <h4 class="text-sm font-semibold mb-2">Subcategories:</h4>
    <div id="tutorial-subcategory-list" class="flex gap-2 flex-wrap"></div>
</div>

/**
 * Step 6: Complete Working Demo - from public/showcase/elements/breadcrumbs.
 */
export function mount(root) {
        // Tutorial Demo
    const tutorialSubcategories = {
            electronics: ['Phones', 'Laptops', 'Tablets'],
            clothing: ['Shirts', 'Trousers', 'Shoes'],
            books: ['Fiction', 'Non-Fiction', 'Comics']
        };
    const tutorialBreadcrumbs = E.breadcrumbs(root.querySelector('#tutorial-breadcrumbs'), {
            items: [{text: 'Home', url: '#'}],
            separator: 'chevron',
            homeIcon: true,
            onChange: (item, index) => {
                const items = tutorialBreadcrumbs.getItems();
                const newItems = items.slice(0, index + 1);
                newItems[newItems.length - 1].active = true;
                tutorialBreadcrumbs.setItems(newItems);
                $(root).find('#tutorial-subcategories').hide();
            }
        });
    $('[data-tutorial-category]').on('click', function () {
            const category = $(this).data('tutorial-category');
            const categoryName = $(this).text();

            tutorialBreadcrumbs.addItem({text: categoryName, active: true});

            const subs = tutorialSubcategories[category];
            const html = subs.map(sub =>
                `<button class="btn btn-sm btn-secondary" data-tutorial-sub="${sub}">${sub}</button>`
            ).join('');

            $(root).find('#tutorial-subcategory-list').html(html);
            $(root).find('#tutorial-subcategories').show();

            $('[data-tutorial-sub]').on('click', function () {
                tutorialBreadcrumbs.addItem({text: $(this).text(), active: true});
            });
        });
}

Examples & Variations

Different Separator Styles

Choose from built-in separators or use custom HTML:

<div class="flex flex-col gap-3">
    <nav id="separator-slash"></nav>
    <nav id="separator-angle"></nav>
    <nav id="separator-arrow"></nav>
    <nav id="separator-chevron"></nav>
    <nav id="separator-custom"></nav>
</div>

/**
 * Different Separator Styles - from public/showcase/elements/breadcrumbs.
 */
export function mount(root) {
    const sampleItems = [
            {text: 'Home', url: '#'},
            {text: 'Products', url: '#'},
            {text: 'Electronics', url: '#'},
            {text: 'Smartphones', active: true}
        ];
        // Example 1: Separator Styles
    E.breadcrumbs(root.querySelector('#separator-slash'), {
            items: sampleItems,
            separator: '/'
        });
    E.breadcrumbs(root.querySelector('#separator-angle'), {
            items: sampleItems,
            separator: '>'
        });
    E.breadcrumbs(root.querySelector('#separator-arrow'), {
            items: sampleItems,
            separator: '→'
        });
    E.breadcrumbs(root.querySelector('#separator-chevron'), {
            items: sampleItems,
            separator: 'chevron'
        });
    E.breadcrumbs(root.querySelector('#separator-custom'), {
            items: sampleItems,
          separator: '<span style="color: var(--dm-primary);">•</span>'
        });
}

// Slash separator (default)
Domma.elements.breadcrumbs('#nav', {
    items: [...],
    separator: '/'
});

// Angle bracket
Domma.elements.breadcrumbs('#nav', {
    items: [...],
    separator: '>'
});

// Right arrow
Domma.elements.breadcrumbs('#nav', {
    items: [...],
    separator: '→'
});

// Chevron icon (SVG)
Domma.elements.breadcrumbs('#nav', {
    items: [...],
    separator: 'chevron'
});

// Custom HTML
Domma.elements.breadcrumbs('#nav', {
    items: [...],
    separator: '<span style="color: #6495ED;">•</span>'
});

With Home Icon

Add a home icon to the first breadcrumb:

<nav id="home-icon-example"></nav>

/**
 * With Home Icon - from public/showcase/elements/breadcrumbs.
 */
export function mount(root) {
        // Example 2: Home Icon
    E.breadcrumbs(root.querySelector('#home-icon-example'), {
            items: [
                {text: 'Home', url: '/'},
                {text: 'Dashboard', url: '/dashboard'},
                {text: 'Settings', active: true}
            ],
            homeIcon: true
        });
}

Domma.elements.breadcrumbs('#nav', {
    items: [
        { text: 'Home', url: '/' },
        { text: 'Dashboard', url: '/dashboard' },
        { text: 'Settings', active: true }
    ],
    homeIcon: true  // Show home icon on first item
});

Responsive Mobile Collapse

On mobile, middle items collapse to save space (resize browser to test):

<nav id="responsive-example"></nav>
<p class="text-sm text-muted mt-2">Resize browser below 576px to see collapse effect</p>

/**
 * Responsive Mobile Collapse - from public/showcase/elements/breadcrumbs.
 */
export function mount(root) {
        // Example 3: Responsive
    E.breadcrumbs(root.querySelector('#responsive-example'), {
            items: [
                {text: 'Home', url: '/'},
                {text: 'Products', url: '/products'},
                {text: 'Electronics', url: '/products/electronics'},
                {text: 'Phones', url: '/products/electronics/phones'},
                {text: 'iPhone 15', active: true}
            ],
            responsive: true
        });
}

Domma.elements.breadcrumbs('#nav', {
    items: [
        { text: 'Home', url: '/' },
        { text: 'Products', url: '/products' },
        { text: 'Electronics', url: '/products/electronics' },
        { text: 'Phones', url: '/products/electronics/phones' },
        { text: 'iPhone 15', active: true }
    ],
    responsive: true  // Enable mobile collapse (default)
});

// On mobile (<576px), displays: Home > ... > iPhone 15

Custom Click Handling

Handle breadcrumb clicks with onChange callback:

<nav id="click-example"></nav>
<div class="mt-3 p-3 bg-surface rounded border">
    <strong>Last clicked:</strong>
    <span id="click-result" class="text-muted">None</span>
</div>

/**
 * Custom Click Handling - from public/showcase/elements/breadcrumbs.
 */
export function mount(root) {
        // Example 4: Click Handling
    E.breadcrumbs(root.querySelector('#click-example'), {
            items: [
                {text: 'Level 1', url: '#'},
                {text: 'Level 2', url: '#'},
                {text: 'Level 3', active: true}
            ],
            onChange: (item, index, event) => {
                event.preventDefault();
                $(root).find('#click-result').text(`${item.text} (index ${index})`);
            }
        });
}

Domma.elements.breadcrumbs('#nav', {
    items: [
        { text: 'Level 1', url: '#' },
        { text: 'Level 2', url: '#' },
        { text: 'Level 3', active: true }
    ],
    onChange: (item, index, event) => {
        event.preventDefault();  // Prevent default navigation
        console.log('Clicked:', item.text, 'at index:', index);

        // Custom navigation logic
        navigateToLevel(index);
    }
});

Dynamic Breadcrumb Updates

Add, remove, or replace breadcrumb items programmatically:

<nav id="dynamic-example"></nav>
<div class="flex gap-2 mt-3">
    <button type="button" id="dynamic-add" class="btn btn-sm btn-primary">Add Item</button>
    <button type="button" id="dynamic-remove" class="btn btn-sm btn-secondary">Remove Last</button>
    <button type="button" id="dynamic-reset" class="btn btn-sm btn-secondary">Reset</button>
</div>

/**
 * Dynamic Breadcrumb Updates - from public/showcase/elements/breadcrumbs.
 */
export function mount(root) {
        // Example 5: Dynamic Updates
    let dynamicCounter = 1;
    const dynamicCrumbs = E.breadcrumbs(root.querySelector('#dynamic-example'), {
            items: [{text: 'Home', url: '#'}]
        });
    $(root).find('#dynamic-add').on('click', () => {
            dynamicCrumbs.addItem({text: `Level ${dynamicCounter++}`, active: true});
        });
    $(root).find('#dynamic-remove').on('click', () => {
            const items = dynamicCrumbs.getItems();
            if (items.length > 1) {
                dynamicCrumbs.removeItem(items.length - 1);
                if (items.length > 1) {
                    items[items.length - 2].active = true;
                    dynamicCrumbs.setItems(items);
                }
            }
        });
    $(root).find('#dynamic-reset').on('click', () => {
            dynamicCrumbs.setItems([{text: 'Home', url: '#'}]);
            dynamicCounter = 1;
        });
}

const crumbs = Domma.elements.breadcrumbs('#nav', {
    items: [{ text: 'Home', url: '#' }]
});

// Add a new item
crumbs.addItem({ text: 'New Level', active: true });

// Remove an item by index
crumbs.removeItem(1);

// Replace all items
crumbs.setItems([
    { text: 'Home', url: '#' },
    { text: 'Products', active: true }
]);

// Get current items
const items = crumbs.getItems();

Generate from URL Path

Automatically generate breadcrumbs from current URL:

<nav id="url-example"></nav>

/**
 * Generate from URL Path - from public/showcase/elements/breadcrumbs.
 */
export function mount(root) {
        // Example 6: URL-Based
    E.breadcrumbs(root.querySelector('#url-example'), {
            items: [
                {text: 'Home', url: '/'},
                {text: 'Products', url: '/products'},
                {text: 'Electronics', url: '/products/electronics'},
                {text: 'Phones', active: true}
            ],
            separator: 'chevron',
            homeIcon: true
        });
}

// Generate breadcrumbs from URL path
function generateBreadcrumbsFromURL() {
    const path = window.location.pathname;
    const segments = path.split('/').filter(s => s);

    const items = [{ text: 'Home', url: '/' }];

    segments.forEach((segment, index) => {
        const text = segment.charAt(0).toUpperCase() + segment.slice(1);
        const url = '/' + segments.slice(0, index + 1).join('/');
        const active = index === segments.length - 1;

        items.push({ text, url, active });
    });

    return Domma.elements.breadcrumbs('#nav', {
        items,
        separator: 'chevron',
        homeIcon: true
    });
}

// Example: /products/electronics/phones
// Generates: Home > Products > Electronics > Phones

Custom Styling

Apply custom colours and styles:

<nav id="styled-example" class="text-base text-primary"></nav>

/**
 * Custom Styling - from public/showcase/elements/breadcrumbs.
 */
export function mount(root) {
        // Example 7: Styled
    E.breadcrumbs(root.querySelector('#styled-example'), {
            items: [
                {text: 'Styled', url: '#'},
                {text: 'Breadcrumbs', active: true}
            ],
            separator: 'chevron'
        });
}

<nav id="breadcrumb-nav" class="text-base text-blue-400"></nav>

<script>
Domma.elements.breadcrumbs('#breadcrumb-nav', {
    items: [
        { text: 'Styled', url: '#' },
        { text: 'Breadcrumbs', active: true }
    ],
    separator: 'chevron'
});
</script>

<!-- Custom CSS -->
<style>
#breadcrumb-nav {
    font-size: 1rem;
    color: #6495ED;
}
</style>

Real-World Example: Documentation Site

Build documentation navigation with nested sections:

<nav id="docs-breadcrumbs" class="mb-3"></nav>
<div class="p-4 bg-surface rounded border">
    <h4 class="mb-2">Documentation Navigation</h4>
    <p class="text-sm text-muted mb-3">Click breadcrumbs above to navigate hierarchy</p>
    <div id="docs-content">
        <h5>Current Section: <span data-bind-text="section.value">Modal Component</span></h5>
        <p class="text-sm" data-bind-text="blurb.value">Complete documentation for the Modal element...</p>
    </div>
</div>

/**
 * Real-World Example: Documentation Site - from public/showcase/elements/breadcrumbs.
 */
export function mount(root) {
        // Example 8: Documentation Site
    // The content panel reads these observables (data-bind-text in demo.html)
    const section = M.observable('Modal Component');
    const blurb = M.observable('Complete documentation for the Modal element...');
    const handle = M.applyBindings({section, blurb}, root.querySelector('#docs-content'));
    const docsBreadcrumbs = E.breadcrumbs(root.querySelector('#docs-breadcrumbs'), {
            items: [
                {text: 'Documentation', url: '#'},
                {text: 'API Reference', url: '#'},
                {text: 'Elements', url: '#'},
                {text: 'Modal', active: true}
            ],
            separator: 'chevron',
            homeIcon: true,
            onChange: (item, index) => {
                const items = docsBreadcrumbs.getItems();
                const newItems = items.slice(0, index + 1);
                newItems[newItems.length - 1].active = true;
                docsBreadcrumbs.setItems(newItems);

                section.value = item.text;
                blurb.value = `Documentation for ${item.text}...`;
            }
        });
    return () => handle.dispose();
}

const docsStructure = {
    'Getting Started': ['Installation', 'Quick Start', 'Configuration'],
    'API Reference': ['DOM', 'Utils', 'Elements', 'Models'],
    'Elements': ['Modal', 'Tabs', 'Accordion', 'Tooltip']
};

const docsBreadcrumbs = Domma.elements.breadcrumbs('#docs-breadcrumbs', {
    items: [
        { text: 'Documentation', url: '#' },
        { text: 'API Reference', url: '#' },
        { text: 'Elements', url: '#' },
        { text: 'Modal', active: true }
    ],
    separator: 'chevron',
    homeIcon: true,
    onChange: (item, index) => {
        // Navigate to clicked section
        const items = docsBreadcrumbs.getItems();
        const newItems = items.slice(0, index + 1);

        // Mark as active
        newItems[newItems.length - 1].active = true;

        docsBreadcrumbs.setItems(newItems);

        // Update content
        updateDocsContent(item.text);
    }
});

function updateDocsContent(section) {
    $('#docs-content')[0].innerHTML =
        `<h5>Current Section: ${section}</h5>
         <p class="text-sm">Documentation for ${section}...</p>`;
}

Best Practices

Accessibility

• Semantic HTML - Use ```` element with aria-label="Breadcrumb" (automatically added)
• Current Page - Last breadcrumb has aria-current="page" for screen readers
• Descriptive Text - Use clear, descriptive labels (avoid "Click here" or generic text)
• Keyboard Navigation - All breadcrumb links are keyboard accessible via Tab
• Skip Links - Consider adding skip link to bypass breadcrumbs for keyboard users
• Visual Separators - Separators have aria-hidden="true" to prevent screen reader clutter

Performance

• Reuse Instances - Use setItems() to update instead of destroying and recreating
• Minimal DOM Updates - Component batches changes when adding multiple items
• CSS Animations - Hover effects use CSS transitions, not JavaScript
• Lazy Loading - Don't initialise breadcrumbs until page content is ready
• Debounce Updates - If updating breadcrumbs frequently, debounce with _.debounce()

Common Gotchas

• Issue: Breadcrumbs not appearing
  Solution: Ensure container exists in DOM before initialisation
  Example: Wait for DOMContentLoaded or place script after element
• Issue: Last breadcrumb is a link instead of plain text
  Solution: Set active: true on last item or omit url property
  Example: { text: 'Current Page', active: true }
• Issue: onChange callback not firing
  Solution: Callback only fires when clicking non-active breadcrumbs with URLs
  Example: Active/current breadcrumb doesn't trigger onChange
• Issue: Custom separator not rendering
  Solution: Use HTML string, not plain text with special chars
  Example: separator: '•'
• Issue: Responsive collapse not working
  Solution: Ensure viewport meta tag is present and responsive: true
  Example: ``

Tips & Tricks

• Maximum Depth - Limit breadcrumbs to 4-5 levels to avoid clutter
• Mobile First - Enable responsive: true (default) for mobile-friendly collapse
• Home Icon - Use homeIcon: true for better visual hierarchy
• Consistent Separators - Use same separator style across your entire site
• URL Sync - Keep breadcrumbs synchronized with browser URL and history
• Schema Markup - Add JSON-LD breadcrumb schema for SEO benefits

<!-- Accessible Breadcrumbs with Schema Markup -->
<nav id="breadcrumb-nav" aria-label="Breadcrumb navigation"></nav>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Products",
      "item": "https://example.com/products"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Electronics"
    }
  ]
}
</script>

<script>
Domma.elements.breadcrumbs('#breadcrumb-nav', {
    items: [
        { text: 'Home', url: 'https://example.com/' },
        { text: 'Products', url: 'https://example.com/products' },
        { text: 'Electronics', active: true }
    ],
    separator: 'chevron',
    homeIcon: true,
    responsive: true
});
</script>

API Reference

Constructor Options

Methods

Events / Callbacks

CSS Classes

// Complete API Example
const breadcrumbs = Domma.elements.breadcrumbs('#nav', {
    items: [
        { text: 'Home', url: '/' },
        { text: 'Products', url: '/products' },
        { text: 'Widget', active: true }
    ],
    separator: 'chevron',
    homeIcon: true,
    responsive: true,
    onChange: (item, index, event) => {
        event.preventDefault();
        console.log('Navigate to:', item.text);
    }
});

// Methods
breadcrumbs.addItem({ text: 'Details', active: true });
breadcrumbs.removeItem(2);
breadcrumbs.setItems([
    { text: 'Home', url: '/' },
    { text: 'New Path', active: true }
]);
const items = breadcrumbs.getItems();
breadcrumbs.destroy();

Config Engine Integration

Use Domma's declarative $.setup() system to configure Breadcrumbs without manual initialisation.

Basic Setup

$.setup({
    '#page-breadcrumbs': {
        component: 'breadcrumbs',
        options: {
            items: [
                { text: 'Home', url: '/' },
                { text: 'Dashboard', url: '/dashboard' },
                { text: 'Settings', active: true }
            ],
            separator: 'chevron',
            homeIcon: true
        }
    }
});

Multiple Breadcrumb Instances

$.setup({
    // Main page breadcrumbs
    '#main-breadcrumbs': {
        component: 'breadcrumbs',
        options: {
            items: [
                { text: 'Home', url: '/' },
                { text: 'Products', active: true }
            ],
            separator: 'chevron',
            homeIcon: true,
            onChange: (item) => {
                window.location.href = item.url;
            }
        }
    },

    // Secondary navigation breadcrumbs
    '#docs-breadcrumbs': {
        component: 'breadcrumbs',
        options: {
            items: [
                { text: 'Documentation', url: '/docs' },
                { text: 'API Reference', active: true }
            ],
            separator: '/',
            responsive: true
        }
    }
});

Live Demo

Breadcrumbs configured via Config Engine:

<nav id="config-demo-breadcrumbs"></nav>
<p class="text-sm text-muted mt-2">Configured declaratively with $.setup()</p>

/**
 * Live Demo - from public/showcase/elements/breadcrumbs.
 */
export function mount(root) {
        // Config Engine Demo
    $.setup({
            '#config-demo-breadcrumbs': {
                component: 'breadcrumbs',
                options: {
                    items: [
                        {text: 'Config', url: '#'},
                        {text: 'Engine', url: '#'},
                        {text: 'Demo', active: true}
                    ],
                    separator: 'chevron',
                    homeIcon: true
                }
            }
        });
}

// Configuration
$.setup({
    '#config-demo-breadcrumbs': {
        component: 'breadcrumbs',
        options: {
            items: [
                { text: 'Config', url: '#' },
                { text: 'Engine', url: '#' },
                { text: 'Demo', active: true }
            ],
            separator: 'chevron',
            homeIcon: true
        }
    }
});

// Access instance later
const breadcrumbs = Domma.elements.get('#config-demo-breadcrumbs');
breadcrumbs.addItem({ text: 'New Level', active: true });

CSS Customisation

Override these CSS variables to customise Breadcrumbs appearance and match your design system.

Example Override

:root {
    /* Larger breadcrumbs */
    --dm-font-size-sm: 1rem;
}

Full CSS Customisation Cheat-Sheet →

Related Elements

<div class="grid grid-cols-1 gap-4" style="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));"><a href="/showcase/elements/navbar" class="card card-hover">
        <div class="card-body">
            <h3 class="card-title">Navbar</h3>
            <p class="card-text">Primary navigation bars. Breadcrumbs complement navbars by showing hierarchical
                position within the site.</p>
        </div>
    </a>

    <a href="/showcase/elements/tabs" class="card card-hover">
        <div class="card-body">
            <h3 class="card-title">Tabs</h3>
            <p class="card-text">Tabbed navigation for content sections. Use breadcrumbs for vertical hierarchy,
                tabs for lateral navigation.</p>
        </div>
    </a>

    <a href="/showcase/elements/card" class="card card-hover">
        <div class="card-body">
            <h3 class="card-title">Card</h3>
            <p class="card-text">Content containers. Place breadcrumbs above cards to show context within site
                hierarchy.</p>
        </div>
    </a>

    <a href="/showcase/elements/back-to-top" class="card card-hover">
        <div class="card-body">
            <h3 class="card-title">Back to Top</h3>
            <p class="card-text">Scroll-to-top buttons. Both breadcrumbs and back-to-top help users navigate
                long pages efficiently.</p>
        </div>
    </a>
</div>