Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Breadcrumb examples · Standard

Breadcrumb with Bullet Separator (Standard) for React

A breadcrumb trail with a text Home link and bullet characters between the crumbs.

Framework
UI library

Home, 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 trail announced?

Breadcrumb renders a nav labeled breadcrumb around an ordered list, so screen readers announce a breadcrumb landmark and the number of items. Home and Components are read as links.

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