codio/react-breadcrumbs

Automatic breadcrumbs for React-Router

React Breadcrumbs

React Component for React-Router.

Demo at opensourceprojects.robbestad.com

Source on github

Installation

% npm install react-breadcrumbs --save

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.

Styling

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