Breadcrumbs

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

Basic Example

Navigation breadcrumb trail



const { default: Breadcrumbs } = await import('/components/navigation/breadcrumbs.js');

const { tags, $ } = Lightview;

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

const breadcrumbs = Breadcrumbs({ class: 'text-sm' },
    ...path.map(item => 
        item.href 
            ? Breadcrumbs.Item({ href: item.href }, item.label)
            : Breadcrumbs.Item({}, item.label)
    )
);

$('#demo').insert(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

With Icons

For more examples, see the DaisyUI Breadcrumbs documentation.