Breadcrumbs

Overview

A navigation trail that shows the current page's position in a hierarchy.

Usage

<script lang="ts">
  import Breadcrumbs from '@lostgradient/cinder/breadcrumbs';
</script>

<Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'Docs' }]} />

Live preview

When to use

Use when

Surfacing where the user sits inside a deep, nested hierarchy.
Letting the user jump back to any ancestor view in one click.

Avoid when

Switching between sibling sections at the same level — use navigation-bar or tabs.
Showing an ordered task progression — use steps instead.

Examples

Basic breadcrumbs

Navigation trail with the final entry as the current page.

Custom separator

Override the default "/" separator with any string or snippet.

Props

Props for breadcrumbs
Name	Type	Default	Required	Description
`items`	`BreadcrumbItem[]`		req	Ordered list of breadcrumb entries from root to current page.
`separator`	`Snippet \| string`	`'/'`		Custom separator between entries. Defaults to "/".
`label`	`text`	`'Breadcrumb'`		Accessible name for the nav landmark. Defaults to "Breadcrumb".