React Breadcrumb with Slash Separator
A breadcrumb navigation with text-based Home link using forward slash separators for file path aesthetics
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Text breadcrumbs with slashes echo URL structures—familiar and clean. This React breadcrumb uses Lucide's Slash icon component with shadcn/ui breadcrumbs and text "Home" for root, mimicking web address and filesystem conventions. Built on Radix UI, the forward slash creates universal path recognition with explicit text labels. Perfect for developer documentation with readable navigation, technical applications where users understand path notation but want text clarity, content sites following URL-like structures with text labels, or any interface where breadcrumbs should feel like addresses with clear text—slashes communicate hierarchy, text ensures comprehension.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-standard-6.jsonnpx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-standard-6.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-standard-6.jsonbunx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-standard-6.jsonRelated patterns you will also like
Breadcrumb Bullet Separator
Bullet point separator variant
Home Icon Slash Separator
Icon-based home with slashes
Breadcrumb with Ellipsis
Default chevron separator
File Tree
Hierarchical file navigation
Breadcrumb with Icons
Icon-enhanced text navigation
URL Path Display
Path visualization patterns