Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Breadcrumb examples · Home Icon

Breadcrumb with Bullet Separator (Home Icon) for React

A breadcrumb trail with a home icon and bullet characters between the crumbs.

Framework
UI library

The home icon, Components and the current page, separated by a bullet instead of the chevron. A bullet carries no direction, so the trail reads lighter: a good fit for editorial pages and quiet layouts. The bullet is plain text, hidden from assistive tech.

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 bullet drawn?

The character • is the child of BreadcrumbSeparator, in place of the default chevron. The separator is hidden from assistive tech.

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.

Where does the space around the bullet come from?

From the breadcrumb list's gap. The demo adds no spacing classes of its own, so the bullet sits where a chevron would.

Can I use another character?

Yes. Any text or icon works in its place, such as ·, | or a Lucide icon. Use one mark across the whole site.

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