Breadcrumb with Bullet Separator

Text breadcrumbs with bullets feel editorial—clean typography without directional arrows. This React breadcrumb uses bullet separators (•) with shadcn/ui breadcrumb components and text "Home" for root navigation. Built on Radix UI, the middot character creates gentle separation with explicit text labels. Perfect for editorial sites prioritizing readable text navigation, minimalist interfaces with text-focused aesthetics, content-first layouts where breadcrumbs whisper with text not icons, or any navigation where visual restraint and textual clarity both matter—bullets separate gently, text labels clearly.

Breadcrumb with Bullet Separator preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/breadcrumb-standard-5.json

npx shadcn@latest add https://www.shadcn.io/r/breadcrumb-standard-5.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/breadcrumb-standard-5.json

bunx shadcn@latest add https://www.shadcn.io/r/breadcrumb-standard-5.json

Related Components

FAQ