Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Breadcrumb examples · Home Icon

Breadcrumb with Slash Separator (Home Icon) for React

A breadcrumb trail with a home icon and slash icons between the crumbs, like a file path.

Framework
UI library

The home icon, 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 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.

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