React Breadcrumbs

React Component for React-Router.

Demo at learnreact.robbestad.com

Source on github

Installation

% npm install react-breadcrumbs --save

Versioning

The aim is to correlate with react-router.

Usage

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.

Styling

The breadcrumbs are set up with a div with the class name "breadcrumbs".