Breadcrumbs

A navigation component that shows the current page's position in the hierarchy and allows users to navigate to higher levels.

Last updated 8/26/2026

Basic usage

Use BreadcrumbItem elements inside Breadcrumbs. Specify the current props for the current page. Icons can be displayed with the icon props.

import { BreadcrumbItem, Breadcrumbs } from "@serendie/ui";
import { SerendieSymbolArticle, SerendieSymbolHome } from "@serendie/symbols";

export function BasicSample() {
  return (
    <Breadcrumbs>
      <BreadcrumbItem href="/" icon={<SerendieSymbolHome />}>
        Home
      </BreadcrumbItem>
      <BreadcrumbItem href="/category" icon={<SerendieSymbolArticle />}>
        Category
      </BreadcrumbItem>
      <BreadcrumbItem href="/subcategory" icon={<SerendieSymbolArticle />}>
        Subcategory
      </BreadcrumbItem>
      <BreadcrumbItem current icon={<SerendieSymbolArticle />}>
        Current Page
      </BreadcrumbItem>
    </Breadcrumbs>
  );
}

Size

Two sizes: Medium and Small.

Medium

Small

import { BreadcrumbItem, Breadcrumbs } from "@serendie/ui";
import { Dd, Dl, Dt } from "src/components/LayoutUtils";

export function SizeSample() {
  return (
    <Dl>
      <Dt>Medium</Dt>
      <Dd>
        <Breadcrumbs>
          <BreadcrumbItem href="/">Home</BreadcrumbItem>
          <BreadcrumbItem href="/category">Category</BreadcrumbItem>
          <BreadcrumbItem current>Current Page</BreadcrumbItem>
        </Breadcrumbs>
      </Dd>
      <Dt>Small</Dt>
      <Dd>
        <Breadcrumbs size="small">
          <BreadcrumbItem href="/">Home</BreadcrumbItem>
          <BreadcrumbItem href="/category">Category</BreadcrumbItem>
          <BreadcrumbItem current>Current Page</BreadcrumbItem>
        </Breadcrumbs>
      </Dd>
    </Dl>
  );
}

Separator

Two separators: Chevron and Slash. Specify with the separator props.

Chevron

Slash

import { BreadcrumbItem, Breadcrumbs } from "@serendie/ui";
import { Dd, Dl, Dt } from "src/components/LayoutUtils";

export function SeparatorSample() {
  return (
    <Dl>
      <Dt>Chevron</Dt>
      <Dd>
        <Breadcrumbs separator="chevron">
          <BreadcrumbItem href="/">Home</BreadcrumbItem>
          <BreadcrumbItem href="/category">Category</BreadcrumbItem>
          <BreadcrumbItem current>Current Page</BreadcrumbItem>
        </Breadcrumbs>
      </Dd>
      <Dt>Slash</Dt>
      <Dd>
        <Breadcrumbs separator="slash">
          <BreadcrumbItem href="/">Home</BreadcrumbItem>
          <BreadcrumbItem href="/category">Category</BreadcrumbItem>
          <BreadcrumbItem current>Current Page</BreadcrumbItem>
        </Breadcrumbs>
      </Dd>
    </Dl>
  );
}

Collapsing items

Limit the number of visible items with the maxItems props. Extra middle items are collapsed into an ellipsis. Clicking the ellipsis expands the collapsed items.

With Ellipsis

import { BreadcrumbItem, Breadcrumbs } from "@serendie/ui";
import { SerendieSymbolArticle, SerendieSymbolHome } from "@serendie/symbols";
import { Dd, Dl, Dt } from "src/components/LayoutUtils";

export function CollapseSample() {
  return (
    <Dl>
      <Dt>With Ellipsis</Dt>
      <Dd>
        <Breadcrumbs maxItems={3}>
          <BreadcrumbItem href="/" icon={<SerendieSymbolHome />}>
            Home
          </BreadcrumbItem>
          <BreadcrumbItem href="/category" icon={<SerendieSymbolArticle />}>
            Category
          </BreadcrumbItem>
          <BreadcrumbItem href="/subcategory" icon={<SerendieSymbolArticle />}>
            Subcategory
          </BreadcrumbItem>
          <BreadcrumbItem href="/detail" icon={<SerendieSymbolArticle />}>
            Detail
          </BreadcrumbItem>
          <BreadcrumbItem current icon={<SerendieSymbolArticle />}>
            Current Page
          </BreadcrumbItem>
        </Breadcrumbs>
      </Dd>
    </Dl>
  );
}