Breadcrumb

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

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add breadcrumb

Usage

Import and use the Breadcrumb components:

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

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

Examples

Separator styles

Home Page

Home / Page

With home icon

Docs Components

Anatomy

Breadcrumb.Root - Provides breadcrumb navigation.

Breadcrumb.Item - Renders a breadcrumb link or item.

Breadcrumb.Separator - Separates breadcrumb items.