Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Breadcrumb examples · Standard

Breadcrumb with Slash Separator (Standard) for React

A breadcrumb trail with a text Home link and slash icons between the crumbs, like a file path.

Framework
UI library

Home, Components and the current page, separated by a slash icon so the trail reads like a path. It suits file browsers, repositories and docs where people think in paths. The slash is a Lucide SlashIcon, 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 slash drawn?

A SlashIcon 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.

How big is the slash?

The separator styles size its icon, the same as the default chevron, so the slash lines up with the text. Add a size class to the icon to change it.

Does the slash work right to left?

The trail reads from the right in a right-to-left layout. A slash doesn't point, so unlike the chevron it needs no flipping.

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