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 BreadcrumbItem type and at minimum must contain the label property.

#
Links

We can use the href property to create actual links which will rely on your application’s router to handle navigation.


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" },
      ]}
    />
  );
}

#
Buttons

Alternatively we can provide an execute property if the breadcrumb doesn’t point to an actual link and instead requires programmatic navigation.


"use client";
 
import { toaster } from "@optiaxiom/react";
import { Breadcrumb } from "@optiaxiom/react/unstable";
 
export function App() {
  return (
    <Breadcrumb
      items={[
        {
          execute: () => toaster.create("Navigate to Home"),
          label: "Home",
        },
        {
          execute: () => toaster.create("Navigate to Components"),
          label: "Components",
        },
        {
          execute: () => toaster.create("Navigate to Breadcrumb"),
          label: "Breadcrumb",
        },
      ]}
    />
  );
}

#
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; execute?: () => void; 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