Breadcrumbs

Breadcrumbs shows hierarchy and navigational path to the current page. Supports icons and custom separators.

Basic Usage

Navigation breadcrumb trail with multiple syntaxes.

await import('/components/navigation/breadcrumbs.js');
const { tags, $ } = Lightview;
const { Breadcrumbs } = tags;

const path = [
    { label: 'Home', href: '/' },
    { label: 'Products', href: '/products' },
    { label: 'Electronics', href: '/products/electronics' },
    { label: 'Phones' } // Current page (no href)
];

const breadcrumbs = Breadcrumbs({ style: 'font-size: 0.75rem' },
    ...path.map(item => 
        item.href 
            ? Breadcrumbs.Item({ href: item.href }, item.label)
            : Breadcrumbs.Item({}, item.label)
    )
);
$('#example').content(breadcrumbs);
await import('/components/navigation/breadcrumbs.js');
const { $, tags } = Lightview;
const { Breadcrumbs } = tags;

const path = [
    { label: 'Home', href: '/' },
    { label: 'Products', href: '/products' },
    { label: 'Electronics', href: '/products/electronics' },
    { label: 'Phones' } // Current page (no href)
];

const breadcrumbs = {
    tag: Breadcrumbs,
    attributes: { style: 'font-size: 0.75rem' },
    children: path.map(item => ({
        tag: Breadcrumbs.Item,
        attributes: item.href ? { href: item.href } : {},
        children: [item.label]
    }))
};

$('#example').content(breadcrumbs);
await import('/components/navigation/breadcrumbs.js');
const { $ } = Lightview;

const path = [
    { label: 'Home', href: '/' },
    { label: 'Products', href: '/products' },
    { label: 'Electronics', href: '/products/electronics' },
    { label: 'Phones' } // Current page (no href)
];

const breadcrumbs = {
    Breadcrumbs: {
        style: 'font-size: 0.75rem',
        children: path.map(item => ({
            'Breadcrumbs.Item': {
                ...(item.href ? { href: item.href } : {}),
                children: [item.label]
            }
        }))
    }
};

$('#example').content(breadcrumbs);
<!-- Import the component (registers lv-breadcrumbs) -->
<script type="module" src="/components/navigation/breadcrumbs.js"></script>

<lv-breadcrumbs style="font-size: 0.75rem">
    <lv-breadcrumbs-item href="/">Home</lv-breadcrumbs-item>
    <lv-breadcrumbs-item href="/products">Products</lv-breadcrumbs-item>
    <lv-breadcrumbs-item href="/products/electronics">Electronics</lv-breadcrumbs-item>
    <lv-breadcrumbs-item>Phones</lv-breadcrumbs-item>
</lv-breadcrumbs>

Props

Prop Type Default Description
class string - Additional classes (text-sm, text-lg)

Sub-components

Component Props Description
Breadcrumbs.Item href Individual breadcrumb item

Breadcrumbs Gallery

Live examples using <lv-breadcrumbs> and <lv-breadcrumbs-item> custom elements.

Basic

Home Docs Breadcrumbs

With Icons

Home Documents Add Document

Sizes

Home Extra Small Home Small Home Large