React component use to generate a breadcrumb trail (compatible with React Router).
npm install --save react-breadcrumbs
The /demo
directory and live demo site provide one example of how this
package can be used. See the /demo
for the code powering the small
site.
This package exposes two components, a <Breadcrumbs>
component to wrap
the entire application and a <Breadcrumb>
component to use throughout
the different sections (e.g. <Route>
s) within the application.
The top-level <Breadcrumbs>
component accepts the following props
:
className
(string): A class name for the outer wrapper element.hidden
(bool): Hide the inner breadcrumbs wrapper.wrapper
(func|class): A react component to use for the inner wrapper.
data
(object): An extended location descriptor. See below...hidden
(bool): Hide an individual breadcrumb (rarely needed).
The data
object allows any valid location descriptor key (e.g.
pathname
or search
) as well as a title
prop:
{
title: 'Home', // Any valid `PropTypes.node`
pathname: '/',
// ... any other location descriptor values
}
The fact that the title
can be any valid PropTypes.node
makes allows
a huge amount of customization. The following values are all valid:
title: 'Home'
title: <span title="Hovered!">Home</span>
title: <CustomComponent title="Home" icon="house" />