Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Breadcrumb examples · Home Icon

Breadcrumb with Icons (Home Icon) for React

A breadcrumb trail with a home icon for the root and an icon beside every other crumb.

Framework
UI library

A home icon for the root, a folder beside Components and a file beside the current page. The icon tells the kind of each level at a glance, which helps in file managers and content tools that mix folders and documents.

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 are the icons paired with the text?

Components has a FolderIcon and the current page a FileTextIcon, both size-4. The link and the page take flex items-center gap-1.5, so icon and word sit on one line.

Do the icons need labels?

No. The words beside them already name each crumb, so the icons are hidden from assistive tech. Only the home link, which has no word, carries aria-label.

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.

Why isn't the last crumb a link?

BreadcrumbPage is the page you are on. It renders text with aria-current="page", so it is announced as the current page and has nowhere to go.

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