Breadcrumb

Shows the user's current location within the application's navigation hierarchy.

Import

tsx

import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, BreadcrumbEllipsis } from '@tac-ui/web';

Simple

Compose BreadcrumbList, BreadcrumbItem, BreadcrumbLink, and BreadcrumbSeparator to build a basic breadcrumb trail. The separator renders a chevron icon by default and can be replaced with any node.

tsx

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem current>
      <BreadcrumbLink>Button</BreadcrumbLink>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

With Current Item

Set <code>current</code> on a BreadcrumbItem to mark it as the active page. This applies bold foreground styling and adds <code>aria-current="page"</code> for accessibility.

tsx

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/web/docs">Docs</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem current>
      <BreadcrumbLink>Breadcrumb</BreadcrumbLink>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

With Ellipsis

Use BreadcrumbEllipsis to collapse intermediate path segments when the trail is too long to display in full. Place it between separators at the position where items are hidden.

tsx

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbEllipsis />
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem current>
      <BreadcrumbLink>Breadcrumb</BreadcrumbLink>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

API Reference

Breadcrumb uses a composition pattern. Build it using the sub-components listed below.

Prop	Type	Default	Description
BreadcrumbItem.current	boolean	false	Marks this item as the current page, applying active styles and aria-current="page".
BreadcrumbItem.children	React.ReactNode	-	Content of the breadcrumb item (link, ellipsis, or plain text).
BreadcrumbLink.href	string	-	URL for the breadcrumb link. Omit for the current (last) item.
BreadcrumbSeparator.children	React.ReactNode	-	Custom separator content. Defaults to a chevron SVG icon.
BreadcrumbEllipsis	-	-	Renders a collapsed indicator (...) for hidden intermediate items.