Skip to Content
Components
Breadcrumb ALPHA

Breadcrumb

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

Documentation

Usage

"use client"; 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.

"use client"; 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.

"use client"; 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.

"use client"; 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
Last updated on