Component reference
Breadcrumbs
A path through nested application information.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Width adapts to the available space
"use client";
import {
Breadcrumbs,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbSeparator,
BreadcrumbPage
} from "@pimolu/react";
export function DemoExample() {
return (
<Breadcrumbs label="Current location">
<BreadcrumbItem>
<BreadcrumbLink href="/docs">Pimolu UI</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="/docs">Documentation</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="/docs">Components</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="/docs">Navigation</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumbs</BreadcrumbPage>
</BreadcrumbItem>
</Breadcrumbs>
);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Workspace location
A two-level trail with a working documentation link and a non-interactive current location.
Basic
The last item is the current page, not a link.
Custom separator
Any node can replace the default slash; it stays decorative.
Usage
Use real destinations for ancestors and a clear label for the current location.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluBreadcrumbsProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
label | string | undefined | "Breadcrumb" | Accessible name of the navigation landmark. |
childrenRequired | ReactNode | "/" | Public Pimolu prop; see the source declaration for details. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
onChange | ChangeEventHandler<HTMLElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLElement> | undefined | — | Standard React/HTML attribute. |
labelstring | undefinedDefault: "Breadcrumb"
Accessible name of the navigation landmark.
childrenRequiredReactNodeDefault: "/"
Public Pimolu prop; see the source declaration for details.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
onChangeChangeEventHandler<HTMLElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluBreadcrumbItemProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactNode | "/" | Public Pimolu prop; see the source declaration for details. |
className | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
childrenRequiredReactNodeDefault: "/"
Public Pimolu prop; see the source declaration for details.
classNamestring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
PimoluBreadcrumbLinkProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactNode | "/" | Public Pimolu prop; see the source declaration for details. |
type | string | undefined | — | Standard React/HTML attribute. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
onChange | ChangeEventHandler<HTMLAnchorElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLAnchorElement> | undefined | — | Standard React/HTML attribute. |
childrenRequiredReactNodeDefault: "/"
Public Pimolu prop; see the source declaration for details.
typestring | undefinedNo default extracted.
Standard React/HTML attribute.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
onChangeChangeEventHandler<HTMLAnchorElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLAnchorElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluBreadcrumbSeparatorProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | "/" | Separator content. Defaults to "/". |
className | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
childrenReactNodeDefault: "/"
Separator content. Defaults to "/".
classNamestring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
PimoluBreadcrumbPageProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactNode | "/" | Public Pimolu prop; see the source declaration for details. |
className | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
childrenRequiredReactNodeDefault: "/"
Public Pimolu prop; see the source declaration for details.
classNamestring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
Accessibility
- Provide a navigation label and keep separators decorative.