Breadcrumb with Slash Separator

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

npx shadcn@latest add https://www.shadcn.io/r/breadcrumb-standard-6.json

npx shadcn@latest add https://www.shadcn.io/r/breadcrumb-standard-6.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/breadcrumb-standard-6.json

bunx shadcn@latest add https://www.shadcn.io/r/breadcrumb-standard-6.json

Related Components

FAQ