@gluedigital/breadcrumb

A customizable breadcrumb component.

Install

yarn add @gluedigital/breadcrumb

Usage

You can pass the following props to customize the breadcrumb:

{
  crumbList: PropTypes.arrayOf(PropTypes.object).isRequired,
  className: PropTypes.string,
  successIcon: PropTypes.node // jsx element that will be shown before the text when an item has the state 'done'
}

crumbList must be an array of objects that follow this structure:

{
  label: PropTypes.oneOfType([PropTypes.node, PropTypes.string]) // content to be shown on the crumb
  state: PropTypes.oneOf(['', 'current', 'done']) // Status of the current crumb
}

Example

import React from 'react'
import { Breadcrumb } from '@cofrico/breadcrumb'

const crumbs = [
  {
    label: 'First crumb',
    state: 'done' // '', 'current' or 'done'
  },
  {
    label: 'Second crumb',
    state: 'current'
  },
  {
    label: <span>Third crumb</span>,
    state: ''
  },
  {
    label: <span>Final crumb!</span>,
    state: ''
  }
]

const App = () => (
  <Breadcrumb
    crumbList={crumbs}
    className={'custom-css'}
  />
)

export default App