Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Breadcrumb examples · Home Icon

Breadcrumb with Border (Home Icon) for React

A breadcrumb trail with a home icon inside a rounded border that hugs its content.

Framework
UI library

A trail that reads as its own module: the home icon, Components and the current page inside a rounded border. Use it on dashboards and busy layouts where an inline trail would blend into the surrounding UI. The border sits on Breadcrumb itself, so nothing else wraps it.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How is the border applied?

Breadcrumb takes w-fit rounded-lg border px-3 py-2. The nav becomes the box, and w-fit keeps it only as wide as the trail instead of the full row.

How is the home icon named?

The link to / holds only a HomeIcon at size-4, hidden from assistive tech, so the link carries aria-label="Home". Screen readers announce it as the Home link.

Which separator sits between the crumbs?

An empty BreadcrumbSeparator renders a chevron, hidden from assistive tech.

Does the box react on hover?

No. Only the links change, to the foreground color. The border and padding belong to the nav, which isn't a control.

Can I give the box a fill?

Add a token class such as bg-muted or bg-card next to the border classes. Keep it light so the links keep their contrast.

How do the links go through my router?

BreadcrumbLink takes the link through render, as in render={<Link href="/" />} with the Next.js Link.

All 14 breadcrumb examples