Docs Breadcrumbs
Breadcrumb patterns for documentation sites and developer tools — monospace file paths, terminal-style prompts, versioned docs, section-aware trails, GitHub repo/PR/issue paths, searchable crumb pickers, and reading progress indicators.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| theme | "dark" | "light" | "dark" | Color theme — dark for developer tools, light for public-facing docs sites. |
| accentColor | string | "#6366f1" | Applied to terminal prompt arrows, version badge, reading progress bar, section § symbol, and active crumb highlight. |
| repoName | string | "ui-library" | Repository name shown in RepoCrumb and PRCrumb — replace with your actual repo name. |
| version | string | "v3.2" | Current docs version shown in VersionedCrumb. Dropdown auto-derives previous minor and legacy versions from this string. |
When to Use
Use in documentation sites, developer portals, GitHub-style platforms, and any product aimed at technical users. TerminalCrumb and MonoPathCrumb signal developer context immediately.
Best Practices
Use VersionedCrumb whenever your docs have multiple versions in active use. AnnotatedCrumb works best on landing/index pages where page counts help users choose a section.
Why This Component Matters
Developer docs have the most demanding navigation requirements — users jump between deeply nested pages constantly. Familiar monospace and terminal aesthetics build instant trust with technical audiences.
FAQ
QHow does SearchableCrumb work?
Clicking any non-current crumb opens an inline search input. Typing filters child pages, pressing Enter navigates. Built with AnimatePresence for smooth open/close.
QCan ReadingProgress hook into real scroll position?
Yes — replace the mount animation with a scroll event listener that maps scrollY to a 0–100% width value on the progress bar.
Related Components
Liquid Stretch
Smooth liquid motion accordion with natural spring animations.
Split Screen
Split screen accordion with expanding image partitions — click a panel to reveal its content.
Audio Reactive
Audio-reactive accordion with animated waveform bars and a progress track.