Breadcrumb

A nav trail with hand-drawn slash or chevron separators between crumbs.

Roughness1.5Lock seedSeparator

<Breadcrumb separator="slash" roughness={1.5}>
  <BreadcrumbItem href="/">Home</BreadcrumbItem>
  <BreadcrumbItem current>Breadcrumb</BreadcrumbItem>
</Breadcrumb>

CLI install

npx doodleui-react add breadcrumb

Usage

import { Breadcrumb, BreadcrumbItem } from "doodleui-react";

<Breadcrumb>
  <BreadcrumbItem href="/">Home</BreadcrumbItem>
  <BreadcrumbItem href="/docs">Docs</BreadcrumbItem>
  <BreadcrumbItem current>Breadcrumb</BreadcrumbItem>
</Breadcrumb>

The current crumb sets aria-current="page". Separators are decorative and hidden from assistive tech.

Props

Prop	Type	Default	Notes
separator	"slash" \| "chevron"	"slash"	Hand-drawn mark between crumbs.
roughness	number	1.5	How wobbly the stroke is. 0 is almost geometric. 3+ is messy.
seed	number	provider / random	Locks the sketch. Omit to follow SketchSeedProvider (Shuffle) or a mount-time random seed.
sketchColor	string	#1f1d1a	Stroke color. Also tints primary/accent fills where relevant.
className	string	undefined	Passed through to the root element.
style	CSSProperties	undefined	Passed through to the root element.