Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar

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
Storybook

Installation

Installation page anchor
yarn add @twilio-paste/breadcrumb - or - yarn add @twilio-paste/core

Usage

Usage page anchor
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>
  );
};

Props

Props page anchor
Breadcrumb page anchor

element

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

Type
string
Default
'BREADCRUMB'

BreadcrumbItem page anchor

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'