React Breadcrumbs

React Component for React-Router.

Installation

npm install react-breadcrumbs --save

Versioning

The aim is to be compatible with the current version of react-router.

Please use the master branch only

Demo

>> TO THE DEMO

The demo shows how the breadcrumbs will use the named routes for parent paths and parameterized paths when provided with :parameter in your routes.

The demo is using this route setup:

<Routerhistory={hashHistory}><Routepath="/"name="Examples"component={App}><Routename="Users"path="users"component={Users}><Routename="UserLocator"path=":userId"component={User}><Routename="UserDetails"path="details"component={UserDetails}/></Route></Route><Routename='RouteName1'path='parent'component={Info}><Routename='RouteName2'path='child1'component={Info}><Routename='RouteName3'path=':item1'component={Info}><Routename='RouteName4'path='child2'component={Info}><Routename='RouteName5'path=':item2'component={Info}><Routename='RouteName6'path='child3'component={Info}></Route></Route></Route></Route></Route></Route></Route><Routename="404: No Match for route"path="*"component={NoMatch}/></Router>

Routes with parameterized paths default to using the parameter value as the breadcrumb name. However, there may be a case where you want to override this behavior.
If you want to force the route to use the name value provided you can add the staticName prop to the Route:

<Routename="UserLocator"staticName={true}path=":userId"component={User}>

Usage

varBreadcrumbs=require('react-breadcrumbs');MyComponent=React.createClass({render: function(){return(<div><Breadcrumbsroutes={this.props.routes}params={this.props.params}/></div>);}});

Optionally, you can add this prop (string or React element) to replace the default separator:

<Breadcrumbsseparator=" | "/>

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:

<BreadcrumbsbreadcrumbName="My breadcrumb name"/>

The point of this property is to provide a method to set a breadcrumb name for the final breadcrumb.

<Breadcrumbsexcludes={['App']}/>

This will print all breadcrumbs, except for the one where the route name is App.

<BreadcrumbssetDocumentTitle={true}/>

Starting with v1.3.4, this will set the document title to your last item in the breadcrumbs.

<BreadcrumbscreateElement={false}/>

This property allows you to choose whether a wrapper element is created around the breadcrumb. When false, no wrapper element is created, allowing you to create your own wrapper with custom props.

<BreadcrumbsdisplayMissing="true|false"displayMissingText="This title is missing"/>

This property set allows you determine if you want to display routes in the hierarchy with missing display names. default = true. When true, uses the displayMissingText property as an override to the default text.

<BreadcrumbswrapperElement="ol"itemElement="li"/>

These properties allow you to override the default div and span elements to specify an alternate set based on your styling and markup needs.

<BreadcrumbswrapperClass="breadcrumbs"itemClass="step"/>

These properties allow you to override the default class set on the breadcrumbs node and item elements.

<BreadcrumbshideNoPath="true|false"/>

These properties allow you to append and/or prepend an arbitrary amount of react elements

<Breadcrumbsprepend={<SingleComponent/>}append={[<this>too</this>,<this>also</this]}/>

In some cases React-Router may not have a path in the parent node. This is a valid use case when you want to wrap components with other components but they are not true routes. For these you can use the "hideNoPath" property (default=true) to either hide or show these in the breadcrumbs.

Styling

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