React Breadcrumb with Icons
A breadcrumb navigation with icons for every segment to enhance visual hierarchy and scannability
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Icons throughout breadcrumbs create visual landmarks—home, folder, file. This React breadcrumb uses Lucide React icons for each navigation level with shadcn/ui components, using Home for root, Folder for categories, and FileText for current page. Built with gap-1.5 spacing and size-4 icons on Radix UI, the pattern makes hierarchy instantly recognizable. Perfect for file browsers showing document types, content management systems with content categories, documentation with section types, or any navigation where visual distinction between level types helps users orient—icons communicate faster than text alone.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-home-icon-3.jsonnpx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-home-icon-3.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-home-icon-3.jsonbunx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-home-icon-3.jsonRelated patterns you will also like
Breadcrumb with Ellipsis
Home icon with collapsed paths
Standard Breadcrumb Icons
Text-based home with icons
Breadcrumb with Dropdown
Icon-based expandable navigation
File Tree
Hierarchical file navigation
Navigation with Icons
Icon-enhanced navigation
Breadcrumb with Border
Contained icon breadcrumb