Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Breadcrumb examples · Standard

Breadcrumb with Icons (Standard) for React

A breadcrumb trail with an icon beside the text of every crumb.

Framework
UI library

Every crumb pairs an icon with its word: a folder beside Home and Components and a file beside the current page. The icon tells the kind of each level at a glance while the text keeps the trail readable.

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?

Home and Components each have a FolderIcon, the current page a FileTextIcon, all size-4. The links 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.

How do I pick the icon for each level?

From the kind of each level in your data: a folder for a section, a file for a document. Keep the mapping fixed so the same kind always shows the same icon.

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