React Breadcrumb with Bullet Separator
A breadcrumb navigation with text-based Home link using bullet separators for minimal visual weight
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-standard-5.jsonnpx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-standard-5.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-standard-5.jsonbunx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-standard-5.jsonRelated patterns you will also like
Breadcrumb Slash Separator
Forward slash separator variant
Home Icon Bullet Separator
Icon-based home with bullets
Breadcrumb with Ellipsis
Default chevron separator
Breadcrumb with Border
Contained text breadcrumb
Typography Separators
Text separator patterns
Inline List
Bullet-separated lists