Breadcrumb

Display a list of links showing the location of the current page in the navigational hierarchy.

#
Documentation

#
Usage


import { Breadcrumb } from "@optiaxiom/react/unstable";
 
export function App() {
  return (
    <Breadcrumb
      items={[
        { href: "/optiaxiom", label: "Home" },
        { href: "/optiaxiom/components", label: "Components" },
        { href: "/optiaxiom/components/breadcrumb", label: "Breadcrumb" },
      ]}
    />
  );
}

#
Structure

Breadcrumb works with lists of items provided via the items prop. Items must be an array of objects of BreadcrumbLink type and at minimum must contain the label property.


import { Breadcrumb, type BreadcrumbLink } from "@optiaxiom/react/unstable";
 
const items = [
  { href: "/optiaxiom", label: "Home" },
  { href: "/optiaxiom/components", label: "Components" },
  { href: "/optiaxiom/components/breadcrumb", label: "Breadcrumb" },
] satisfies BreadcrumbLink[];
 
export function App() {
  return <Breadcrumb items={items} />;
}

#
Addons

We can use the addonAfter property to show additional content inside the items.


import { Button } from "@optiaxiom/react";
import { Breadcrumb } from "@optiaxiom/react/unstable";
import { IconPencil } from "@tabler/icons-react";
 
export function App() {
  return (
    <Breadcrumb
      items={[
        {
          href: "/optiaxiom",
          label: "Home",
        },
        {
          addonAfter: (
            <Button
              appearance="subtle"
              aria-label="Edit parent page"
              icon={<IconPencil />}
              size="sm"
            />
          ),
          href: "/optiaxiom/components",
          label: "Components",
        },
        {
          href: "/optiaxiom/components/breadcrumb",
          label: "Breadcrumb",
        },
      ]}
    />
  );
}

#
Collapsed items

Breadcrumb will by default only show 3 items and collapse the rest into a dropdown menu.

This can be configured using the maxItems prop.


import { Breadcrumb } from "@optiaxiom/react/unstable";
 
export function App() {
  return (
    <Breadcrumb
      items={[
        { href: "/", label: "Home" },
        { href: "/optiaxiom", label: "Documentation" },
        { href: "/optiaxiom/guides", label: "Guides" },
        { href: "/optiaxiom/components", label: "Components" },
        { href: "/optiaxiom/components/breadcrumb", label: "Breadcrumb" },
      ]}
    />
  );
}

#
Props

#
Breadcrumb

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`items*` The items we want to render. `{ addonAfter?: ReactNode; href?: string; label: string; }[]`
`maxItems` The maximum number of breadcrumb items to show before truncating. `number` Default: `3`

#
Changelog

#
1.5.2

Simplified Breadcrumb API:


// Before
<Breadcrumb>
  <BreadcrumbItem>
    <BreadcrumbLink href="/components">Components</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
  </BreadcrumbItem>
</Breadcrumb>
 
// After
<Breadcrumb
  items={[
    { href: "/components", label: "Components" },
    { href: "/components/breadcrumb", label: "Breadcrumb" },
  ]}
/>

#
0.1.0

Added component