Shadcn.io is not affiliated with official shadcn/ui
Breadcrumb with Slash Separator
A breadcrumb navigation with text-based Home link using forward slash separators for file path aesthetics
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.
Breadcrumb with Slash Separator preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.