Breadcrumb

Navigation component that displays the user's location within the app hierarchy.

Installation

Import

import { Breadcrumb } from '@svelte-atoms/core/breadcrumb';

Preset Configuration

Customize the breadcrumb appearance using presets

You can customize the default styles for Breadcrumb components by defining presets in your configuration:

Examples

Explore different breadcrumb variations

Basic Breadcrumb

Simple breadcrumb navigation

Home / Components / Breadcrumb

Code

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

Custom Separator

Use custom separator between items

Home > Docs > Components

Code

<Breadcrumb.Root>
  <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
  <Breadcrumb.Separator>></Breadcrumb.Separator>
  <Breadcrumb.Item href="/docs">Docs</Breadcrumb.Item>
  <Breadcrumb.Separator>></Breadcrumb.Separator>
  <Breadcrumb.Item>Components</Breadcrumb.Item>
</Breadcrumb.Root>

API Reference

Breadcrumb.Root

Container for breadcrumb navigation.

Prop

Type

Default

Description

class

string

Additional CSS classes

string

'div'

HTML element type to render

Breadcrumb.Item

Individual breadcrumb link or text item.

Prop

Type

Default

Description

href

string

Link URL (omit for current page item)

class

string

Additional CSS classes

string

'a'

HTML element type to render

Breadcrumb.Separator

Visual separator between breadcrumb items.

Prop

Type

Default

Description

class

string

Additional CSS classes

string

'span'

HTML element type to render

Accessibility

Built-in Accessibility Features

• Uses nav element with aria-label
• Semantic ordered list structure
• Current page indicated with aria-current
• Keyboard navigable links
• Screen reader friendly structure

Badge

Button