react-breadcrumbs

React Breadcrumbs

React component use to generate a breadcrumb trail (compatible with React Router).

Installation

npm install --save react-breadcrumbs

Demo

The /demo directory and live demo site provide one example of how this package can be used. See the /demo for the code powering the small site.

>> TO THE LIVE DEMO

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.
• 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 makes allows 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" />

Changelog

2.1.0 (2017-10-14)

Features

• rewrite library to be compatible with react-router v4 (0637464)