React Component for React-Router.
Demo at learnreact.robbestad.com
Source on github
% npm install react-breadcrumbs --save
Semver:
0.13 branch
% npm install react-breadcrumbs@0.13.x --save
1.0.0 beta branch
% npm install react-breadcrumbs@1.0.x --save
The aim is to correlate with react-router.
Note: There are now two branches of react-breadcrumbs, a version for the 0.13-branch of react-router and one for the 1.0.0-beta1. Please take care that you use the one that matches your installed version of React-Router.
NB! The master branch mirrors the 0.13 branch
var Breadcrumbs = require('react-breadcrumbs');
MyComponent = React.createClass({
render: function() {
return (
<div>
<Breadcrumbs />
</div>
);
}
});
Optionally, you can add this prop to replace the default separator:
<Breadcrumbs separator=" | " />
The breadcrumbs will automatically populate based on your route configuration. It requires that you have a name="" parameter in your routes for every route. It will use the displayName parameter for the Breadcrumb link.
Another optional is breadcrumbName:
<Breadcrumbs breadcrumbName="My breadcrumb name" />
The point of this property is to provide a method to set a breaadcrumb name for the final breadcrumb.
You can also exclude specific routes if you want to:
<Breadcrumbs excludes={['App']} />
This will print all breadcrumbs, except for the one where the route name is App.
The breadcrumbs are set up with a div with the class name "breadcrumbs".