HamburgerHamburger Icon

Breadcrumbs

Breadcrumbs

PDP Breadcrumbs

<Breadcrumbs content={[
  {
    "id": "shop-all-bc",
    "title": "Shop All",
    "url": "#"
  },
  {
    "id": "euc-bc",
    "title": "Eucalyptus",
    "url": "#"
  },
  {
    "id": "breeze-bc",
    "title": "The Buffy Breeze"
  }
]} grid={false} />
Copy

Cart Breadcrumbs

<Breadcrumbs content={[
  {
    "id": "continue-bc",
    "title": "Continue Shopping",
    "url": "#",
    "back": true
  }
]} grid={false} />
Copy
Breadcrumbs Properties

Name

Description

Type

Required

Default

className

List of classes for this element.

string | array

false

""

forwardRef

Ref to component or DOM element.

function | object

false

null

forwardRef sub properties

Name

Description

Type

Required

Default

current

DOM node of Ref object

any

false

null

content

List of breadcrumb content

array

true

content sub properties

Name

Description

Type

Required

Default

id

Unique id of breadcrumb

string

true

title

Breadcrumb title

string

true

back

If back arrow is included

boolean

false

null

url

URL of breadcrumb

string

false

null

grid

Uses Lattice grid wrapper if true.

boolean

false

true