React Breadcrumb with Bullet Separator
A breadcrumb navigation with home icon using bullet points as separators for minimal visual weight
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Bullets between breadcrumbs feel lighter than arrows—subtle without losing clarity. This React breadcrumb uses bullet separators (•) with shadcn/ui breadcrumb components and a Home icon for root navigation. Built on Radix UI, the middot character creates gentle separation without directional emphasis. Perfect for editorial sites with clean typography, minimalist interfaces avoiding heavy UI chrome, content-first layouts where breadcrumbs should whisper not shout, or any navigation where visual restraint matches brand aesthetics—bullets separate without commanding attention.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-home-icon-5.jsonnpx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-home-icon-5.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-home-icon-5.jsonbunx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-home-icon-5.jsonRelated patterns you will also like
Breadcrumb Slash Separator
Forward slash separator variant
Standard Bullet Separator
Text-based home with bullets
Breadcrumb with Ellipsis
Default chevron separator with ellipsis
Breadcrumb with Border
Contained breadcrumb styling
Typography Separators
Text separator patterns
Inline List
Bullet-separated lists