Breadcrumb

A trail of links showing the current position in a hierarchy.

Installation

pnpm dlx @mielui/svelte add breadcrumb

Usage

Breadcrumb is router independent. Set current on the item for the active page; it sets both the styling and aria-current="page". The current item can omit href.

Root is a navigation landmark named "Breadcrumb". Pass aria-label to translate or change that name. Separators are hidden from assistive technology.

<script lang="ts">
    import * as Breadcrumb from '@mielui/svelte/components/breadcrumb';
</script>

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

Examples

Separator styles

With home icon

Parts

Separator draws a chevron by default. Put your own character or icon in its children to change it.

Every part renders its children and takes class. Root passes nav attributes such as aria-label, and Item passes anchor attributes such as target.

API reference

Breadcrumb.Root

Provides breadcrumb navigation.

class

(string & (ClassValue | null))
Classes added to the element.
children

Snippet<[]>
Content rendered inside.

Breadcrumb.Item

Renders a breadcrumb link or item.

href

string
Destination of the item. Omit it on the current page.
current

boolean
Whether this item represents the current page. Router independent.

Default false
class

(string & (ClassValue | null))
Classes added to the element.
children

Snippet<[]>
Content rendered inside.

Breadcrumb.Separator

Separates breadcrumb items.

class

string
Classes added to the element.
children

Snippet<[]>
Content rendered inside.