Breadcrumb
Storybook
Go to StoryBreadcrumbsRoot()
function BreadcrumbsRoot(__namedParameters): Element;
Defined in: packages/design-system/src/components/Breadcrumb/Breadcrumb.tsx:30
Container for Breadcrumbs component.
Can be used to construct complete Breadcrums UI. For batteries-included Breadcrumbs component - use Breadcrumbs instead.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | DetailedHTMLProps<HTMLAttributes<HTMLElement>> |
Returns
Element
BreadcrumbList()
function BreadcrumbList(__namedParameters): Element;
Defined in: packages/design-system/src/components/Breadcrumb/Breadcrumb.tsx:37
List wrapper for breadcrumb items.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | DetailedHTMLProps<OlHTMLAttributes<HTMLOListElement>> |
Returns
Element
BreadcrumbItem()
function BreadcrumbItem(__namedParameters): Element;
Defined in: packages/design-system/src/components/Breadcrumb/Breadcrumb.tsx:54
Container for any breadcrumb list item: link, page or separator with menu.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>> |
Returns
Element
BreadcrumbLink()
function BreadcrumbLink(__namedParameters): Element;
Defined in: packages/design-system/src/components/Breadcrumb/Breadcrumb.tsx:72
Interactive Breadcrumb link. Used for non-active breadcrumbs.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | BreadcrumbLinkProps |
Returns
Element
BreadcrumbPage()
function BreadcrumbPage(__namedParameters): Element;
Defined in: packages/design-system/src/components/Breadcrumb/Breadcrumb.tsx:97
Currently active page.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>> |
Returns
Element
BreadcrumbSeparator()
function BreadcrumbSeparator(__namedParameters): Element;
Defined in: packages/design-system/src/components/Breadcrumb/Breadcrumb.tsx:121
Breadcrumb separator component that visually separates breadcrumb items.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>> |
Returns
Element
Example
<BreadcrumbSeparator>
<CustomIcon />
</BreadcrumbSeparator>
BreadcrumbEllipsis()
function BreadcrumbEllipsis(__namedParameters): Element;
Defined in: packages/design-system/src/components/Breadcrumb/Breadcrumb.tsx:151
Ellipsis component for Breadcrumbs.
Used to indicate truncated breadcrumb items when there are too many to display. Often used as a dropdown trigger to reveal hidden breadcrumb items. Includes proper accessibility attributes to ensure it's correctly presented to assistive technologies.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>> |
Returns
Element
Example
<BreadcrumbItem>
<BreadcrumbEllipsis />
</BreadcrumbItem>
Breadcrumbs()
function Breadcrumbs(__namedParameters): Element;
Defined in: packages/design-system/src/components/Breadcrumb/Breadcrumb.tsx:240
Breadcrumbs component that provides a complete breadcrumbs UI, based on links.
It composes smaller atomic breadcrumbs elements, which can be reused to create your own composition of Breadcrumbs.
The component automatically handles:
- Displaying the first and last breadcrumbs
- Truncating middle breadcrumbs into a dropdown when exceeding maxToDisplay
- Proper navigation using the configured router
- Accessibility attributes
Parameters
| Parameter | Type |
|---|---|
__namedParameters | BreadcrumbsProps |
Returns
Element
Example
<Breadcrumbs
breadcrumbs={[
{ label: "Home", href: "/" },
{ label: "Products", href: "/products" },
{ label: "Current Page", href: "/products/current" }
]}
/>