React Breadcrumb with Border
A breadcrumb navigation with home icon enclosed in a bordered container for visual prominence
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Sometimes breadcrumbs need definition—borders give them presence. This React breadcrumb wraps shadcn/ui breadcrumb components in a bordered container with rounded-lg and padding, using a Home icon for the root. Built on Radix UI with w-fit to hug content width, the pattern creates a distinct navigation module. Perfect for dashboards where breadcrumbs compete with other UI, content-heavy pages needing clear navigation landmarks, applications with subtle backgrounds where borderless breadcrumbs disappear, or any interface where breadcrumbs should feel like contained components rather than inline text—borders command attention.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-home-icon-4.jsonnpx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-home-icon-4.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-home-icon-4.jsonbunx shadcn@latest add https://www.shadcn.io/registry/breadcrumb-home-icon-4.jsonRelated patterns you will also like
Breadcrumb with Ellipsis
Borderless collapsed breadcrumb
Standard Bordered Breadcrumb
Text-based home with border
Breadcrumb with Icons
Icon-enhanced navigation
Card Component
Bordered container pattern
Breadcrumb Bullet Separator
Alternative separator styling
Contained Navigation
Bordered navigation patterns