Breadcrumbs
Breadcrumbs are a secondary navigation method that show content hierarchy or traces someone’s path. They allow a user to move quickly up to a higher level or to a previous step.
Import
Default BreadcrumbTrail
Loading preview
With Home Icon
Loading preview
With Custom Link
Loading preview
Props
Breadcrumb Props
| Name | Description | Default |
|---|---|---|
| children | Link text ReactNode | - |
| asChild | Component will delegate outermost React element to use first element passed within children boolean | - |
| isInline | If true, anchor is an inline link boolean | - |
| onClick | The event handler for click events on anchor MouseEventHandler<HTMLAnchorElement> | - |
| aria-describedby | ID of element providing further context and description of the link string | - |
| icon | Custom icon to be displayed instead of the link icon ReactElement<any, string | JSXElementConstructor<any>> | - |
| href | The URL that the hyperlink points to. string | - |
| reactlytics | ReactlyticsProp | - |
Breadcrumb Trail Props
| Name | Description | Default |
|---|---|---|
| children* | Children to render as breadcrumbs. NonNullable<ReactElement<any, string | JSXElementConstructor<any>> | ReactElement<any, string | JSXElementConstructor<any>>[]> | - |
| labelOverrides | Overrides for labels that have been defaulted in the component. BreadcrumbLabelOverrides | - |
Questions?
Connect with the DLS Team on Slack or by email.
Resources
Check out additional resources.