Breadcrumb

Displays the path to the current resource using a hierarchy of links.

<script lang="ts">
import { Breadcrumb } from "coss-svelte";
</script>

<Breadcrumb
	items={[
		{ label: "Home", href: "/" },
		{ ellipsis: true },
		{ label: "Components", href: "/docs/components/accordion" },
		"Breadcrumb",
	]}
/>

Installation

Install the component package, shared coss-svelte theme, and Bits UI peer.

npm install coss-svelte @coss-svelte/theme bits-ui

Usage

Import the Svelte component exports directly from the package.

import { Breadcrumb } from "coss-svelte";

Anatomy

Breadcrumb exposes a single component export for the current implementation.

API Reference

Breadcrumb

Displays the path to the current resource using a hierarchy of links.

Prop	Type	Default	Description
`items`	`BreadcrumbItem[]`	`[]`	Items rendered by the component's built-in fallback composition.

children : Snippet<[]>

Inherits from Svelte <nav> attributes.

Implementation Details

Status: Stable
Foundation: native
Category: Layout & Navigation
Particles: 7