ui / navigation

Breadcrumb

Semantic path navigation with quiet monospaced metadata.

PREVIEW READY

LIVE PREVIEWDARK / LIGHT COMPATIBLE

BREADCRUMB

Designed as a complete stateful module

Responsive, keyboard-ready, theme-aware, and owned by your project after installation.

INSTALL / SOURCE REGISTRY

Add Breadcrumb to your project

The command adds the component source and its DesignOS base dependency.

$pnpm dlx shadcn@latest add https://designos.h4rithd.com/r/breadcrumb.json

registry/default/ui/breadcrumb.tsx

import * as React from "react"
import { ChevronRight } from "lucide-react"
import "@/components/designos/designos.css"

export type BreadcrumbItem = { label: string; href?: string }

export function Breadcrumb({ items, label = "Breadcrumb" }: { items: BreadcrumbItem[]; label?: string }) {
  return <nav aria-label={label}><ol className="dos-breadcrumb">{items.map((item, index) => <React.Fragment key={`${item.label}-${index}`}><li>{item.href && index < items.length - 1 ? <a href={item.href}>{item.label}</a> : <span aria-current={index === items.length - 1 ? "page" : undefined}>{item.label}</span>}</li>{index < items.length - 1 && <ChevronRight aria-hidden="true" />}</React.Fragment>)}</ol></nav>
}

Component contract

Source-owned after installation
Dark and light theme variables
Keyboard and visible-focus behavior
Reduced-motion fallback
Responsive from 320px upward
IBM Plex Sans + JetBrains Mono hierarchy