Question 1

What is a breadcrumb component?

Accepted Answer

A breadcrumb shows where a page sits in a hierarchy, Home › Components › Breadcrumb, as a row of links ending in the current page. It's shadcn.io's Breadcrumb component, built on Base UI, React Aria, Ark UI and Radix UI for React, and on Ark UI for Vue, Svelte and Solid, and styled with Tailwind CSS: a labeled nav, an ordered list, links, separators and a current-page item. Each example is one small file.

Question 2

Are these breadcrumb examples free?

Accepted Answer

Yes. Every breadcrumb example is free to use in personal and commercial projects, with no attribution required. Seeing the code and installing an example takes a free shadcn.io account.

Question 3

Do breadcrumbs help SEO?

Accepted Answer

They help people understand a site's structure and move up a level, and search engines can show the path in results when the page also emits BreadcrumbList structured data. The component renders the visible trail; add the JSON-LD from the same crumb data so the two never drift apart.

Question 4

When should I use breadcrumbs instead of a sidebar or a back button?

Accepted Answer

Breadcrumbs fit content that is deep, two levels or more: docs, file managers, store categories. A sidebar fits navigation that is wide rather than deep, such as settings sections. A back button follows the path someone took, not the hierarchy. They can live on the same page.

Question 5

Should I use a chevron, a slash, or a bullet as the separator?

Accepted Answer

The chevron is the default and reads as going into. A slash fits path-like trails such as files and repositories, and a bullet is the quietest, with no direction. Pick one and use it across the whole site.

Question 6

When should I use a home icon for the first crumb?

Accepted Answer

When the first crumb is the site's root. The icon is recognized faster than the word and saves space. Give the link `aria-label="Home"`, as the home-icon examples do, so screen readers still announce it. When the trail starts at a section such as Docs or Settings, use the word.

Question 7

How do I handle long breadcrumb trails?

Accepted Answer

Keep the root, the parent and the current page, and collapse the levels between them. The ellipsis examples show the collapsed mark with `BreadcrumbEllipsis`; the dropdown examples put the hidden levels in a Dropdown Menu so people can still reach them.

Question 8

Should the current crumb be a link?

Accepted Answer

No. Every example ends with `BreadcrumbPage`, which renders text with `aria-current="page"`. Screen readers announce it as the current page, and there is nowhere for a link to the same page to go.

Question 9

How do I install a breadcrumb example?

Accepted Answer

Sign in with a free account, then copy the code or run the install command on the example's page. It adds the example and the components it uses, Breadcrumb and, where the example needs them, Dropdown Menu or Select, to your project. Then replace the sample crumbs with your own routes.

Question 10

How do I build the crumbs from my routes?

Accepted Answer

Split the current path into segments, map each one to a label from a route-to-title table or your data, and render one `BreadcrumbItem` per crumb with the last one as `BreadcrumbPage`. Building them from one source keeps the trail right when routes change.

Question 11

How do I use my router's links in a breadcrumb?

Accepted Answer

Compose your router's link with `BreadcrumbLink`, the way each library composes elements: `asChild` on Ark UI and Radix UI, `render` on Base UI, and `href` on React Aria. The examples show it on every target.

Question 12

How do I style the links and the current page?

Accepted Answer

Links use the muted foreground color and turn to the foreground on hover; `BreadcrumbPage` uses the foreground. Override either with `className`, such as `font-medium` on the current page. Keep it subtle: the trail is navigation, not the page's focus.

Question 13

What do the breadcrumb examples depend on?

Accepted Answer

The Breadcrumb component, Tailwind CSS and Lucide icons. The dropdown examples add Dropdown Menu and the select examples add Select. There is no state library: the trail is plain markup.

Question 14

Are breadcrumb examples accessible?

Accepted Answer

Yes. `Breadcrumb` renders a nav labeled breadcrumb around an ordered list, so screen readers announce the landmark and the number of crumbs. Separators are hidden from assistive tech, the current page carries `aria-current="page"`, and icon-only links and buttons carry an `aria-label`.

Question 15

Can I use these examples with React Server Components?

Accepted Answer

The plain trails have no state, so on React they render as Server Components. The dropdown and select examples hold an interactive menu or select and run on the client.

Question 16

Which Tailwind CSS version do these examples need?

Accepted Answer

The examples are written for Tailwind CSS v4, the version shadcn.io's components use, and use its class names and design tokens such as `text-muted-foreground`.

Breadcrumb Examples

Breadcrumb with Border

Breadcrumb with Bullet Separator

Breadcrumb with Dropdown

Breadcrumb with Ellipsis

Breadcrumb with Icons

Breadcrumb with Select

Breadcrumb with Slash Separator

Breadcrumb with Border

Breadcrumb with Bullet Separator

Breadcrumb with Dropdown

Breadcrumb with Ellipsis

Breadcrumb with Icons

More component examples

Command

Menubar

Navigation Menu

Pagination

Tabs

Button

Button Group

Calendar

Breadcrumb examples MCP, with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every breadcrumb example. One prompt away.