Studio
2

Breadcrumb

Installation

pnpm dlx @mielui/svelte add breadcrumb

Usage

Breadcrumb is router independent. Set current on the item representing the active page; it controls both styling and aria-current="page". The final item may omit href. Root accepts native navigation attributes, including aria-label for a translated or distinct navigation name.

The root is a labeled navigation landmark, and separators are decorative.

import * as Breadcrumb from '$lib/mielui/components/breadcrumb';

<Breadcrumb.Root>
  <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
  <Breadcrumb.Separator>/</Breadcrumb.Separator>
  <Breadcrumb.Item current>Current</Breadcrumb.Item>
</Breadcrumb.Root>

Examples

Separator styles

With home icon

API reference

Breadcrumb.Root

Provides breadcrumb navigation.

Prop Type Default
class (string & (ClassValue | null)) | undefined —
children Snippet<[]> | undefined —

Breadcrumb.Item

Renders a breadcrumb link or item.

Prop Type Default
href string | undefined —
current boolean | undefined

Whether this item represents the current page. Router independent.

 false
class (string & (ClassValue | null)) | undefined —
children Snippet<[]> | undefined —

Breadcrumb.Separator

Separates breadcrumb items.

Prop Type Default
class string | undefined —
children Snippet<[]> | undefined —