Components / Foundations

Breadcrumbs

Component + manager

Manages a breadcrumb navigation array, providing back, slash, and clickable segment buttons.

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

Import the component and its manager, then make it your own.

ComponentBreadcrumbs

Managercreate_breadcrumbs_manager

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { Breadcrumbs, create_breadcrumbs_manager } from "sveltekit-ui"

  const manager = create_breadcrumbs_manager({
    val: ["Workspace", "Projects", "Website"],
  })
</script>

<Breadcrumbs {manager} />
<p>Current path: /{manager.val.join("/")}</p>

API reference

Configure the manager, call its methods, and read its reactive state.

2 entries in configuration

Property	Type	Default	Description
`val`	`array`	`[]`	array of breadcrumb segments; can be strings or objects with a 'name' property
`on_change`	`function`	`null`	optional callback triggered when a new breadcrumb index is selected