React Breadcrumb with Icons
A breadcrumb navigation with icons paired with text for every segment to enhance visual hierarchy
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Icons plus text throughout breadcrumbs maximize clarity—visual landmarks with readable labels. This React breadcrumb pairs Lucide React icons with text for each level using shadcn/ui components, combining Folder for categories with Home text, and FileText for current page. Built with gap-1.5 spacing and size-4 icons on Radix UI, the pattern provides dual encoding for hierarchy recognition. Perfect for applications where icon-plus-text redundancy aids comprehension, interfaces serving users with varying familiarity levels, content systems where both visual and textual cues matter, or any navigation prioritizing maximum clarity over space efficiency—icons provide quick visual scanning, text ensures understanding.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-standard-3.jsonnpx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-standard-3.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-standard-3.jsonbunx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-standard-3.jsonRelated patterns you will also like
Breadcrumb with Ellipsis
Text-only with collapsed paths
Home Icon with Icons
Icon home with segment icons
Breadcrumb with Dropdown
Text-based expandable navigation
File Tree
Hierarchical file navigation
Navigation with Icons
Icon-enhanced navigation
Breadcrumb with Border
Contained text breadcrumb