## Import
```jsx
import { Breadcrumbs } from "@cfa/react-core";
```
## Live Editor
```jsx
Page 1
Page 2
Page 3
```
## Examples
### Default
A simple breadcrumb navigation with three pages.
```jsx
Page 1
Page 2
Page 3
```
### Disabled Link
You can disable a link by setting the `isDisabled` prop. This is useful for indicating the current page.
```jsx
Page 1
Page 2
Page 3
```
### Dynamic - Render Function
Out of the box, you can use the `items` prop and pass in an `Iterable`. This should include an `id` property in the object.
This allows you to use a render function to render the items. This handles some things behind the scenes like
setting a `key`.
```jsx
function Example() {
const breadcrumbItems = [
{ id: 1, label: "Home", href: "/" },
{ id: 2, label: "Products", href: "/products" },
{ id: 3, label: "Sauces", href: "/products/sauces" },
];
return (
{(item) => (
{item.label}
)}
);
}
```
### Dynamic - Array Map
You can also use the standard `.map()` option, but keep in mind that you will have to manually add the `key` to the `Breadcrumb.Item`
```jsx
function Example() {
const breadcrumbItems = [
{ id: 1, label: "Home", href: "/" },
{ id: 2, label: "Products", href: "/products" },
{ id: 3, label: "Sauces", href: "/products/sauces" },
];
return (
{breadcrumbItems.map((item) => (
{item.label}
))}
);
}
```
### Dynamic - Custom Navigation
You can also choose not to use the `href` props and utilize the `onAction` prop perform a custom action when an item is clicked.
The value that is passed into this function is a `Key` and will be the `id` of the item.
```jsx
function Example() {
const breadcrumbItems = [
{ id: 1, label: "Home", href: "/" },
{ id: 2, label: "Products", href: "/products" },
{ id: 3, label: "Sauces", href: "/products/sauces" },
];
const navigate = (value: Key) => {
const selectedIndex = breadcrumbItems.findIndex(
(item) => item.id === value
);
console.log(breadcrumbItems[selectedIndex + 1].href);
};
return (
navigate(k)}>
{(item) => (
{item.label}
)}
);
}
```
## Props
### Breadcrumbs.Root
| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| aria-describedby | `string` | - | Identifies the element (or elements) that describes the object. |
| aria-details | `string` | - | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| aria-label | `string` | - | Defines a string value that labels the current element. |
| aria-labelledby | `string` | - | Identifies the element (or elements) that labels the current element. |
| children | `ReactNode \ | ((item: T) => ReactNode)` | - | The contents of the collection. |
| className | `string` | `'react-aria-Breadcrumbs'` | The CSS \[className]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. |
| dependencies | `readonly any[]` | - | Values that should invalidate the item cache when using dynamic collections. |
| dir | `string` | - | - |
| hidden | `boolean` | - | - |
| id | `string` | - | The element's unique identifier. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Global\_attributes/id). |
| inert | `boolean` | - | - |
| items | `Iterable` | - | Item objects in the collection. |
| lang | `string` | - | - |
| onAction | `(key: Key) => void` | - | Handler that is called when a breadcrumb is clicked. |
| onAnimationEnd | `AnimationEventHandler` | - | - |
| onAnimationEndCapture | `AnimationEventHandler` | - | - |
| onAnimationIteration | `AnimationEventHandler` | - | - |
| onAnimationIterationCapture | `AnimationEventHandler` | - | - |
| onAnimationStart | `AnimationEventHandler` | - | - |
| onAnimationStartCapture | `AnimationEventHandler` | - | - |
| onAuxClick | `MouseEventHandler` | - | - |
| onAuxClickCapture | `MouseEventHandler` | - | - |
| onClick | `MouseEventHandler` | - | - |
| onClickCapture | `MouseEventHandler` | - | - |
| onContextMenu | `MouseEventHandler` | - | - |
| onContextMenuCapture | `MouseEventHandler` | - | - |
| onDoubleClick | `MouseEventHandler` | - | - |
| onDoubleClickCapture | `MouseEventHandler` | - | - |
| onGotPointerCapture | `PointerEventHandler` | - | - |
| onGotPointerCaptureCapture | `PointerEventHandler` | - | - |
| onLostPointerCapture | `PointerEventHandler` | - | - |
| onLostPointerCaptureCapture | `PointerEventHandler` | - | - |
| onMouseDown | `MouseEventHandler` | - | - |
| onMouseDownCapture | `MouseEventHandler` | - | - |
| onMouseEnter | `MouseEventHandler` | - | - |
| onMouseLeave | `MouseEventHandler` | - | - |
| onMouseMove | `MouseEventHandler` | - | - |
| onMouseMoveCapture | `MouseEventHandler` | - | - |
| onMouseOut | `MouseEventHandler` | - | - |
| onMouseOutCapture | `MouseEventHandler` | - | - |
| onMouseOver | `MouseEventHandler` | - | - |
| onMouseOverCapture | `MouseEventHandler` | - | - |
| onMouseUp | `MouseEventHandler` | - | - |
| onMouseUpCapture | `MouseEventHandler` | - | - |
| onPointerCancel | `PointerEventHandler` | - | - |
| onPointerCancelCapture | `PointerEventHandler` | - | - |
| onPointerDown | `PointerEventHandler` | - | - |
| onPointerDownCapture | `PointerEventHandler` | - | - |
| onPointerEnter | `PointerEventHandler` | - | - |
| onPointerLeave | `PointerEventHandler` | - | - |
| onPointerMove | `PointerEventHandler` | - | - |
| onPointerMoveCapture | `PointerEventHandler` | - | - |
| onPointerOut | `PointerEventHandler` | - | - |
| onPointerOutCapture | `PointerEventHandler` | - | - |
| onPointerOver | `PointerEventHandler` | - | - |
| onPointerOverCapture | `PointerEventHandler` | - | - |
| onPointerUp | `PointerEventHandler` | - | - |
| onPointerUpCapture | `PointerEventHandler` | - | - |
| onScroll | `UIEventHandler` | - | - |
| onScrollCapture | `UIEventHandler` | - | - |
| onTouchCancel | `TouchEventHandler` | - | - |
| onTouchCancelCapture | `TouchEventHandler` | - | - |
| onTouchEnd | `TouchEventHandler` | - | - |
| onTouchEndCapture | `TouchEventHandler` | - | - |
| onTouchMove | `TouchEventHandler` | - | - |
| onTouchMoveCapture | `TouchEventHandler` | - | - |
| onTouchStart | `TouchEventHandler` | - | - |
| onTouchStartCapture | `TouchEventHandler` | - | - |
| onTransitionCancel | `TransitionEventHandler` | - | - |
| onTransitionCancelCapture | `TransitionEventHandler` | - | - |
| onTransitionEnd | `TransitionEventHandler` | - | - |
| onTransitionEndCapture | `TransitionEventHandler` | - | - |
| onTransitionRun | `TransitionEventHandler` | - | - |
| onTransitionRunCapture | `TransitionEventHandler` | - | - |
| onTransitionStart | `TransitionEventHandler` | - | - |
| onTransitionStartCapture | `TransitionEventHandler` | - | - |
| onWheel | `WheelEventHandler` | - | - |
| onWheelCapture | `WheelEventHandler` | - | - |
| render | `DOMRenderFunction<"ol", undefined>` | - | Overrides the default DOM element with a custom render function.
This allows rendering existing components with built-in styles and behaviors
such as router links, animation libraries, and pre-styled components.
Requirements:
\* You must render the expected element type (e.g. if \`\