x-react-breadcrumbs
v2.1.7
Published
Fork of Automatic breadcrumbs for react-router
Downloads
719
Maintainers
Readme
React Breadcrumbs
https://github.com/svenanders/react-breadcrumbs
React component use to generate a breadcrumb trail (compatible with React Router).
Installation
npm install --save react-breadcrumbs
Note: this version is only compatible with React-Router v4 and up. If you need a version that is compatible with React-Router v3 and below, use
npm install --save [email protected]
Demo
The /demo
directory provide one example of how this
package can be used. See the /demo
for the code powering the small
site.
Usage
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.
Breadcrumbs
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.
Breadcrumb
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
allows for 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" />
Authors
This project would not have been where it is today without massive contributions from
a whole lot of people (AUTHORS
). Suport for React Router v4 support was written
entirely by (@skipjack
).