Breadcrumb
Navigation breadcrumbs with separator customization and responsive truncation
Same BEM classes and behavior as Astro, Svelte, and Vue.
Add this component
The command below includes <strong>Breadcrumb</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.
Choose your package manager — click a tab to select, then copy the command.
npx rizzo-css add Breadcrumb
pnpm dlx rizzo-css add Breadcrumb
npx rizzo-css add Breadcrumb
bunx rizzo-css add Breadcrumb
Live examples
Usage
Usage
Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.
Astro Vanilla Svelte Vue React ---
import Breadcrumb from '../components/astro/Breadcrumb.astro';
---
<Breadcrumb items={[{ label: 'Home', href: '/' }, { label: 'Docs', href: '/docs' }, { label: 'Current' }]} />
<!-- Rizzo CSS. No script needed. -->
<nav class="breadcrumb" aria-label="Breadcrumb">
<ol class="breadcrumb__list">
<li><a href="/">Home</a></li>
<li><a href="/docs">Docs</a></li>
<li aria-current="page">Current</li>
</ol>
</nav>
<script>
import { Breadcrumb } from '$lib/rizzo';
</script>
<Breadcrumb items={[{ label: 'Home', href: '/' }, { label: 'Docs', href: '/docs' }, { label: 'Current' }]} />
<script setup>
import Breadcrumb from '@/components/rizzo/Breadcrumb.vue';
</script>
<template>
<Breadcrumb
:items="[
{ label: 'Home', href: '/' },
{ label: 'Docs', href: '/docs' },
{ label: 'Current' },
]"
/>
</template>
import { Breadcrumb } from './components/react';
<Breadcrumb
items={[
{ label: 'Home', href: '/' },
{ label: 'Docs', href: '/docs' },
{ label: 'Current' },
]}
/>
Other frameworks: Astro · Vanilla · Svelte · Vue
npm 
pnpm 
yarn 
bun