Skip to contentSkip to navigationSkip to topbar
Figma
Star

Breadcrumb

Peer review pending

A Breadcrumb is text that shows navigation hierarchy and lets users navigate a nested path of pages.

Version 11.1.1
Github

Installation

Installation page anchor
yarn add @twilio-paste/breadcrumb - or - yarn add @twilio-paste/core
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 page anchor

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'BREADCRUMB'

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'BREADCRUMB_ITEM'

href

A URL to route to.

Type
string
Default
null

last

Last BreadcrumbItem of the Breadcrumb. Use to omit BreadcrumbSeparator

Type
boolean

parentElement

Overrides the default element name of the parent element to apply unique styles with the Customization Provider

Type
string
Default
'BREADCRUMB'