Skip to contentSkip to navigationSkip to topbar
Paste
Paste assistant Assistant
FigmaStar459

Breadcrumb

Version 11.1.1GithubStorybookPeer review pending

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

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'

To help us improve this site, we use tools that set cookies. The data gathered by these tools is anonymized. If you reject the use of cookies, no analytics service will be initiated.