@gluedigital/breadcrumb
v1.0.1
Published
A customizable breadcrumb component.
Downloads
4
Keywords
Readme
@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