Breadcrumbs
A component for displaying hierarchical navigation with separators.
The <Breadcrumbs> component helps users to understand their current location within a website or app. It shows a sequence of clickable items, each representing a step or level in the hierarchy, making it easier to navigate back to previous pages or sections.
Anatomy
The <Breadcrumbs> component consists of breadcrumb items and separators, such as chevrons, arranged in a horizontal trail to represent a navigation path.
Appearance
The appearance of a component can be customized using the variant and size props. These props adjust the visual style and dimensions of the component, available values are based on the active theme.
| Property | Type | Description |
|---|---|---|
variant | default | The available variants of this component. |
size | small | default | large | The available sizes of this component. |
Usage
<Breadcrumbs> are typically used to display a navigational hierarchy, showing the path from the homepage to the current page. Each Breadcrumbs.Item represents a step in this path and must include an href to define its destination. All items are rendered as links, allowing users to quickly navigate back to previous levels, reducing the number of clicks needed and improving the overall user experience.
Collapsing Breadcrumbs
When the breadcrumb list exceeds the maximum number of visible items, it can collapse to show an ellipsis ("..."). This feature is helpful when dealing with deep navigation structures that may overwhelm the user.
Preview
Code
As Navigation
Here’s a revised version with a more supportive tone:
Using breadcrumbs as navigation
When breadcrumbs represent the primary or secondary navigation for a page, place them in a <nav> element with an appropriate aria-label (e.g. aria-label="Breadcrumbs"). This creates a navigation landmark that helps assistive technologies identify key sections of the page. To support a clearer page structure, keep the number of landmarks minimal and avoid using them for breadcrumbs in contexts like table rows or popovers.
Preview
Code
Props
Did you know? You can explore, test, and customize props live in Marigold's storybook. Watch the effects they have in real-time!
Breadcrumbs
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.
childrenReactNode | ReactNode[]The breadcrumb items to be displayed.
dependencies?readonly any[]Values that should invalidate the item cache when using dynamic collections.
dir?string;
disabled?boolean;
Disables the breadcrumbs.
Defaults to:
"false"hidden?boolean;
id?string;
The element's unique identifier. See MDN.
inert?boolean;
items?Iterable<object>;
Item objects in the collection.
lang?string;
maxVisibleItems?number;
Maximum number of visible items before the breadcrumbs collapse.
onAction?(key: Key) => void;
Handler that is called when a breadcrumb is clicked.
onAnimationEnd?AnimationEventHandler<HTMLOListElement>;
onAnimationEndCapture?AnimationEventHandler<HTMLOListElement>;
onAnimationIteration?AnimationEventHandler<HTMLOListElement>;
onAnimationIterationCapture?AnimationEventHandler<HTMLOListElement>;
onAnimationStart?AnimationEventHandler<HTMLOListElement>;
onAnimationStartCapture?AnimationEventHandler<HTMLOListElement>;
onAuxClick?MouseEventHandler<HTMLOListElement>;
onAuxClickCapture?MouseEventHandler<HTMLOListElement>;
onClick?MouseEventHandler<HTMLOListElement>;
onClickCapture?MouseEventHandler<HTMLOListElement>;
onContextMenu?MouseEventHandler<HTMLOListElement>;
onContextMenuCapture?MouseEventHandler<HTMLOListElement>;
onDoubleClick?MouseEventHandler<HTMLOListElement>;
onDoubleClickCapture?MouseEventHandler<HTMLOListElement>;
onGotPointerCapture?PointerEventHandler<HTMLOListElement>;
onGotPointerCaptureCapture?PointerEventHandler<HTMLOListElement>;
onLostPointerCapture?PointerEventHandler<HTMLOListElement>;
onLostPointerCaptureCapture?PointerEventHandler<HTMLOListElement>;
onMouseDown?MouseEventHandler<HTMLOListElement>;
onMouseDownCapture?MouseEventHandler<HTMLOListElement>;
onMouseEnter?MouseEventHandler<HTMLOListElement>;
onMouseLeave?MouseEventHandler<HTMLOListElement>;
onMouseMove?MouseEventHandler<HTMLOListElement>;
onMouseMoveCapture?MouseEventHandler<HTMLOListElement>;
onMouseOut?MouseEventHandler<HTMLOListElement>;
onMouseOutCapture?MouseEventHandler<HTMLOListElement>;
onMouseOver?MouseEventHandler<HTMLOListElement>;
onMouseOverCapture?MouseEventHandler<HTMLOListElement>;
onMouseUp?MouseEventHandler<HTMLOListElement>;
onMouseUpCapture?MouseEventHandler<HTMLOListElement>;
onPointerCancel?PointerEventHandler<HTMLOListElement>;
onPointerCancelCapture?PointerEventHandler<HTMLOListElement>;
onPointerDown?PointerEventHandler<HTMLOListElement>;
onPointerDownCapture?PointerEventHandler<HTMLOListElement>;
onPointerEnter?PointerEventHandler<HTMLOListElement>;
onPointerLeave?PointerEventHandler<HTMLOListElement>;
onPointerMove?PointerEventHandler<HTMLOListElement>;
onPointerMoveCapture?PointerEventHandler<HTMLOListElement>;
onPointerOut?PointerEventHandler<HTMLOListElement>;
onPointerOutCapture?PointerEventHandler<HTMLOListElement>;
onPointerOver?PointerEventHandler<HTMLOListElement>;
onPointerOverCapture?PointerEventHandler<HTMLOListElement>;
onPointerUp?PointerEventHandler<HTMLOListElement>;
onPointerUpCapture?PointerEventHandler<HTMLOListElement>;
onScroll?UIEventHandler<HTMLOListElement>;
onScrollCapture?UIEventHandler<HTMLOListElement>;
onTouchCancel?TouchEventHandler<HTMLOListElement>;
onTouchCancelCapture?TouchEventHandler<HTMLOListElement>;
onTouchEnd?TouchEventHandler<HTMLOListElement>;
onTouchEndCapture?TouchEventHandler<HTMLOListElement>;
onTouchMove?TouchEventHandler<HTMLOListElement>;
onTouchMoveCapture?TouchEventHandler<HTMLOListElement>;
onTouchStart?TouchEventHandler<HTMLOListElement>;
onTouchStartCapture?TouchEventHandler<HTMLOListElement>;
onTransitionCancel?TransitionEventHandler<HTMLOListElement>;
onTransitionCancelCapture?TransitionEventHandler<HTMLOListElement>;
onTransitionEnd?TransitionEventHandler<HTMLOListElement>;
onTransitionEndCapture?TransitionEventHandler<HTMLOListElement>;
onTransitionRun?TransitionEventHandler<HTMLOListElement>;
onTransitionRunCapture?TransitionEventHandler<HTMLOListElement>;
onTransitionStart?TransitionEventHandler<HTMLOListElement>;
onTransitionStartCapture?TransitionEventHandler<HTMLOListElement>;
onWheel?WheelEventHandler<HTMLOListElement>;
onWheelCapture?WheelEventHandler<HTMLOListElement>;
ref?Ref<HTMLOListElement>;
Allows getting a ref to the component instance.
Once the component unmounts, React will set
ref.current to null
(or call the ref with null if you passed a callback ref).
@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}slot?string | null;
A slot name for the component. Slots allow the component to receive props from a parent component.
An explicit
null value indicates that the local props completely override all props received from a parent.translate?"yes" | "no";
Breadcrumbs.Item
childrenReactNode;
The content inside the breadcrumb.
dir?string;
hidden?boolean;
hrefstring;
Link for the breadcrumb item.
id?Key;
A unique id for the breadcrumb, which will be passed to
onAction when the breadcrumb is pressed.inert?boolean;
lang?string;
onAnimationEnd?AnimationEventHandler<HTMLLIElement>;
onAnimationEndCapture?AnimationEventHandler<HTMLLIElement>;
onAnimationIteration?AnimationEventHandler<HTMLLIElement>;
onAnimationIterationCapture?AnimationEventHandler<HTMLLIElement>;
onAnimationStart?AnimationEventHandler<HTMLLIElement>;
onAnimationStartCapture?AnimationEventHandler<HTMLLIElement>;
onAuxClick?MouseEventHandler<HTMLLIElement>;
onAuxClickCapture?MouseEventHandler<HTMLLIElement>;
onClick?MouseEventHandler<HTMLLIElement>;
onClickCapture?MouseEventHandler<HTMLLIElement>;
onContextMenu?MouseEventHandler<HTMLLIElement>;
onContextMenuCapture?MouseEventHandler<HTMLLIElement>;
onDoubleClick?MouseEventHandler<HTMLLIElement>;
onDoubleClickCapture?MouseEventHandler<HTMLLIElement>;
onGotPointerCapture?PointerEventHandler<HTMLLIElement>;
onGotPointerCaptureCapture?PointerEventHandler<HTMLLIElement>;
onLostPointerCapture?PointerEventHandler<HTMLLIElement>;
onLostPointerCaptureCapture?PointerEventHandler<HTMLLIElement>;
onMouseDown?MouseEventHandler<HTMLLIElement>;
onMouseDownCapture?MouseEventHandler<HTMLLIElement>;
onMouseEnter?MouseEventHandler<HTMLLIElement>;
onMouseLeave?MouseEventHandler<HTMLLIElement>;
onMouseMove?MouseEventHandler<HTMLLIElement>;
onMouseMoveCapture?MouseEventHandler<HTMLLIElement>;
onMouseOut?MouseEventHandler<HTMLLIElement>;
onMouseOutCapture?MouseEventHandler<HTMLLIElement>;
onMouseOver?MouseEventHandler<HTMLLIElement>;
onMouseOverCapture?MouseEventHandler<HTMLLIElement>;
onMouseUp?MouseEventHandler<HTMLLIElement>;
onMouseUpCapture?MouseEventHandler<HTMLLIElement>;
onPointerCancel?PointerEventHandler<HTMLLIElement>;
onPointerCancelCapture?PointerEventHandler<HTMLLIElement>;
onPointerDown?PointerEventHandler<HTMLLIElement>;
onPointerDownCapture?PointerEventHandler<HTMLLIElement>;
onPointerEnter?PointerEventHandler<HTMLLIElement>;
onPointerLeave?PointerEventHandler<HTMLLIElement>;
onPointerMove?PointerEventHandler<HTMLLIElement>;
onPointerMoveCapture?PointerEventHandler<HTMLLIElement>;
onPointerOut?PointerEventHandler<HTMLLIElement>;
onPointerOutCapture?PointerEventHandler<HTMLLIElement>;
onPointerOver?PointerEventHandler<HTMLLIElement>;
onPointerOverCapture?PointerEventHandler<HTMLLIElement>;
onPointerUp?PointerEventHandler<HTMLLIElement>;
onPointerUpCapture?PointerEventHandler<HTMLLIElement>;
onScroll?UIEventHandler<HTMLLIElement>;
onScrollCapture?UIEventHandler<HTMLLIElement>;
onTouchCancel?TouchEventHandler<HTMLLIElement>;
onTouchCancelCapture?TouchEventHandler<HTMLLIElement>;
onTouchEnd?TouchEventHandler<HTMLLIElement>;
onTouchEndCapture?TouchEventHandler<HTMLLIElement>;
onTouchMove?TouchEventHandler<HTMLLIElement>;
onTouchMoveCapture?TouchEventHandler<HTMLLIElement>;
onTouchStart?TouchEventHandler<HTMLLIElement>;
onTouchStartCapture?TouchEventHandler<HTMLLIElement>;
onTransitionCancel?TransitionEventHandler<HTMLLIElement>;
onTransitionCancelCapture?TransitionEventHandler<HTMLLIElement>;
onTransitionEnd?TransitionEventHandler<HTMLLIElement>;
onTransitionEndCapture?TransitionEventHandler<HTMLLIElement>;
onTransitionRun?TransitionEventHandler<HTMLLIElement>;
onTransitionRunCapture?TransitionEventHandler<HTMLLIElement>;
onTransitionStart?TransitionEventHandler<HTMLLIElement>;
onTransitionStartCapture?TransitionEventHandler<HTMLLIElement>;
onWheel?WheelEventHandler<HTMLLIElement>;
onWheelCapture?WheelEventHandler<HTMLLIElement>;
translate?"yes" | "no";
Last update: 9 minutes ago