Breadcrumbs

Displays navigation hierarchy.

javascript 
import { Breadcrumb, Crumb } from '@brainandbones/skeleton';

Examples

Basic

Separator

Icons

Mixed

Usage

html 
<Breadcrumb>
    <Crumb href='/'>
        <svelte:fragment slot="lead">(icon)</svelte:fragment>
        <span>(page)</span>
    </Crumb>
    <Crumb href='/'>(page)</Crumb>
    <Crumb>(current)</Crumb>
</Breadcrumb>

Current Page Crumb

Crumbs without a href attribute are treated as the current page. This means they render as span and do not append a trailing separator.

html 
<Crumb>Current</Crumb>

Properties

Breadcrumb

Prop Type Default Description
separatorstring&rsaquo (unicode)Defines the crumb separator. Supports SVG icons.

Crumb

Prop Type Default Description
textstringtext-baseProvide classes to set text size.
colorstring -Provide classes set the current page text color.

Slots

Crumb

Slot Description
leadA leading slot intended for icons.

Accessibility

ARIA Guidelines

Breadcrumb

Prop Default Description
label-A semantic ARIA label.