Breadcrumb

Breadcrumb shows a trail of links representing the current page's position in the site hierarchy.

Interactive example#

Breadcrumb · Live example

Current location: Foundations

Follow the parent links to change the local location, then restore the nested path.

The code uses shared demo presentation helpers. Their complete source and styling are included in the LLM build context.

Import#

TSX

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
} from '@clidey/ux';

TSX

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/projects">Projects</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Project Alpha</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

With ellipsis (deep paths)#

Use BreadcrumbEllipsis to collapse intermediate paths:

TSX

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbEllipsis />
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/projects/alpha/tasks">Tasks</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Task #42</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

With React Router#

Use asChild on BreadcrumbLink to render as a React Router Link:

TSX

import { Link } from 'react-router-dom';

<BreadcrumbLink>
  <Link to="/projects">Projects</Link>
</BreadcrumbLink>

Custom separator#

TSX

import { IconChevronRight as ChevronRight } from '@clidey/ux';

<BreadcrumbSeparator>
  <ChevronRight className="size-3" />
</BreadcrumbSeparator>

Dynamic breadcrumbs#

TSX

function PageBreadcrumb({ segments }: { segments: { label: string; href: string }[] }) {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        {segments.map((seg, i) => (
          <React.Fragment key={seg.href}>
            <BreadcrumbItem>
              {i === segments.length - 1 ? (
                <BreadcrumbPage>{seg.label}</BreadcrumbPage>
              ) : (
                <BreadcrumbLink href={seg.href}>{seg.label}</BreadcrumbLink>
              )}
            </BreadcrumbItem>
            {i < segments.length - 1 && <BreadcrumbSeparator />}
          </React.Fragment>
        ))}
      </BreadcrumbList>
    </Breadcrumb>
  );
}

Sub-components#

Component	Description
`Breadcrumb`	Root `<nav>` element with `aria-label="breadcrumb"`.
`BreadcrumbList`	`<ol>` container for breadcrumb items.
`BreadcrumbItem`	`<li>` wrapper for each breadcrumb entry.
`BreadcrumbLink`	Clickable link for navigable ancestors.
`BreadcrumbPage`	Non-linked current page label.
`BreadcrumbSeparator`	Visual separator between items (default: `/`).
`BreadcrumbEllipsis`	`...` button to indicate collapsed segments.

BreadcrumbLink Props

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as the child element (e.g., React Router `Link`).
`href`	`string`	—	Navigation URL.

Security note: href is rendered directly on an <a> element. React neutralizes javascript: URLs, but if the value comes from user or server data, validate it yourself (allow only relative paths or https:), since data: and blob: URLs are not blocked by the component. | className | string | — | Additional CSS classes. |

Was this page helpful?