React Breadcrumb with Slash Separator
A breadcrumb navigation with home icon using forward slash icon separators for file path aesthetics
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-home-icon-6.jsonnpx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-home-icon-6.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-home-icon-6.jsonbunx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-home-icon-6.jsonRelated patterns you will also like
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