Shadcn.io is not affiliated with official shadcn/ui
Breadcrumb with Bullet Separator
A breadcrumb navigation with home icon using bullet points as separators for minimal visual weight
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.
Breadcrumb with Bullet Separator preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.