Shadcn.io is not affiliated with official shadcn/ui
Breadcrumb with Slash Separator
A breadcrumb navigation with home icon using forward slash icon separators for file path aesthetics
Slashes feel like file paths—familiar to developers, clean for everyone. This React breadcrumb uses Lucide's Slash icon component with shadcn/ui breadcrumbs and a Home icon for root, mimicking URL and filesystem path conventions. Built on Radix UI, the forward slash creates universal path recognition. Perfect for developer tools with file navigation, documentation sites following URL structures, technical applications where users understand path notation, or any interface where breadcrumbs should feel like addresses—slashes communicate hierarchy through convention.
Breadcrumb with Slash Separator preview
Installation
Related Components
Breadcrumb Bullet Separator
Bullet point separator variant
Standard Slash Separator
Text-based home with slashes
Breadcrumb with Ellipsis
Default chevron separator
File Tree
Hierarchical file navigation
Breadcrumb with Icons
Icon-enhanced navigation
URL Path Display
Path visualization patterns
FAQ
Was this page helpful?
Sign in to leave feedback.