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.
|
className
|
items* The items we want to render.
|
maxItems The maximum number of breadcrumb items to show before truncating.
Default: |
#
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