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.
• setCrumbs (func): A function(crumbs: [Object]): [Object] which will be called before crumbs are rendered.
• 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).