react-bootstrap-breadcrumbs icon indicating copy to clipboard operation
react-bootstrap-breadcrumbs copied to clipboard

Breadcrumbs for React-Router and Bootstrap

react-bootstrap-breadcrumbs

Breadcrumbs for React-Router and Bootstrap

Inspired by React Breadcrumbs

Installation

npm i -S react-bootstrap-breadcrumbs

Example

<Route name='items' path='/items' handler={ItemsPage}>
  <Route name='item' path=':itemId' handler={ItemPage} />
</Route>

...

function getRouteTitle(name, route, params) {
  switch(name) {
  case 'items':
    return 'Items';
  case 'item':
    return 'Item #' + params.itemId;
  }
}

render() {
  return (
    <div>
      <Breadcrumbs getTitle={getRouteTitle} />
    </div>
  );
}

Render result:

<ol class="breadcrumbs">
  <li><a href="/items">Items</a></li>
  <li class="active">Item #42</li>
</ol>