Breadcrumb
Breadcrumbs are used to show navigation hierarchy within a page. They provide a way for users to navigate a nested path of parent pages.
- Status
- alpha
- Version
- 4.0.2
- Import from
@twilio-paste/core/breadcrumb— or —@twilio-paste/breadcrumb
Using alpha components in your product
Alpha components are ready for use in production and components like Breadcrumb won't likely see any API changes. The term "Alpha" means there is only basic documentation and no corresponding Sketch symbol at this time. Those will eventually be prioritized, but please share your experience using this Alpha component by starting a discussion on GitHub. If you’re interested in helping to symbolize this component in Sketch, we’d love your help – please reach out!
Guidelines#
About Breadcrumb#
Breadcrumb navigation helps the user understand their location in an app or website by providing a trail back to the top level of the website.
Breadcrumbs are listed in order and represent the hierarchy of the page in the product. They will include links to parent pages and can optionally show the current page.
Accessibility#
- The Breadcrumb component includes the accessible
aria-label="breadcrumb"attribute. - An unlinked BreadcrumbItem includes the accessible
aria-current="page"attribute.
The unlinked BreadcrumbItem should only be used for the page a user is currently on. If it is not the current page, make sure to add the href so the BreadcrumbItem goes to the appropriate location.
Examples#
Default Breadcrumb#
The Breadcrumb component uses Anchors to link back to parent pages by passing an href to each BreadcrumbItem.
Breadcrumb with Current Page#
To show the current page, use a BreadcrumbItem with no href. This should not be used if there is a visible page title directly below the breadcrumb.
Breadcrumb with Truncation#
Sometimes the text of a breadcrumb can be long. In those situations you can use the Truncate component inside the BreadcrumbItem element.
Breadcrumb with Page Heading#
You may choose to use a page Heading as the current page in the breadcrumb.
My phone number
Considerations#
Do
Add a slash between two BreadcrumbItems
Don't
Add a trailing slash
Anatomy#
| Property | Default token | Modifiable? |
|---|---|---|
| color |
| No |
| font-size | $font-size-20 | No |
| line-height | $line-height-20 | No |
| margin | $space-0 | No |
| padding |
| No |
Usage Guide#
API#
Installation#
yarn add @twilio-paste/breadcrumb - or - yarn add @twilio-paste/coreUsage#
import {Breadcrumb, BreadcrumbItem} from '@twilio-paste/core/breadcrumb';const BreadcrumbExample: React.FC = () => { return ( <Breadcrumb> <BreadcrumbItem href="#">Item One</BreadcrumbItem> <BreadcrumbItem href="#">Item Two</BreadcrumbItem> </Breadcrumb> );};Breadcrumb Props#
| Prop | Type | Description | Default |
|---|---|---|---|
| children | ReactNode | null |
BreadcrumbItem Props#
| Prop | Type | Description | Default |
|---|---|---|---|
| children | ReactNode | null | |
| href? | string | The URL the breadcrumb routes to. | null |
| last? | boolean | If true, removes the BreadcrumbSeparator after the last breadcrumb item. | null |