React Breadcrumbs Light

Demo

See demo here

Description

Easy to use breadcrumbs for React.

The package includes:

• Service: just call it in some root component and it will be returning current breadcrumbs array
• Breadcrumbs component: just import and use it. Could be manually configured and styled
• TS Types for both

Installation

npm i react-breadcrumbs-light

Breadcrumbs service

Provides function getBreadcrumbs, which returns an array of breadcrumbs.

Example (Argument Routes is specified in next subsection):

// Usage
const crumbs = getBreadcrumbs(Routes, window.location.pathname);

// Returned array
[
  { link: '/', title: 'Home', icon: 'any icon: string | html | component' },
  { link: '/clients', title: 'Clients', icon: '...' },
  { link: '/clients/1', title: 'Client № - 1, welcome!', icon: '...' }
]

There are 2 required arguments and 2 optional:

Title	Type	Description	Default
routes *	array	array of route objects (see example below)	-
fullUrl *	string	current location full path (see example below)	-
notFoundTitle	string	title for not found route	'Page Not Found'
notFoundIcon	any	icon for not found route	undefined

Routes

Example:

const Routes = [
  { title: 'Home', link: '/', icon: 'any icon: string | html | svg | component' },
  { title: 'Clients', link: '/clients', icon: '...', children: [
    { title: 'Client № - ', suffix: ', welcome!', link: '/clients/:id', icon: '...' },
    { title: 'Settings', link: '/clients/settings', icon: '...' }
  ] }
];

Fields:

Title	Type	Description
link *	string	breadcrumb link
title	string	breadcrumb title
suffix	string	breadcrumb suffix (added at the end of output breadcrumb title)
icon	any	breadcrumb icon
children	array	array of objects, similar to Routes, for nested routes

Features:

• If title is not provided, link will be used as breadcrumb title (First letter uppercased)
• For root route ('' or '/') if title not provided, the crumb title will be 'Root' by default
• link field may contain dynamic routes (ex.: '/route/:id', just as react-router)
• For dynamic routes 'title' field will be used as prefix for current pathname (first letter uppercased), if provided

FullUrl

It should be a current location, for ex.:

• window.location.pathname
• If using withRouter HOC of react-router-dom: location.pathname prop

Important

Do not forget to wrap Component, where you are using getBreadcrumbs function into withRouter() HOC, provided by react-router-dom. It is necessary to provide for your breadcrumbs Component updated current location, when route changes.

Example (Play with example here):

import { getBreadcrumbs } from 'react-breadcrumbs-light';
import { withRouter } from 'react-router-dom';

const CustomCrumbs = ({ location }) => {
  // Get current breadcrumbs
  const crumbs = getBreadcrumbs(Routes, window.location.pathname);

  // Render
  return (
    <ul>
      {crumbs.map((item, i, arr) => i !== arr.length - 1
        ? (
            <li key={i}>
              <Link to={item.link}>{item.title}</Link>
            </li>
          )
        : <li key={i}>{item.title}</li>)}
    </ul>
  );
};

const RoutedCustomCrumbs = withRouter(CustomCrumbs);

Breadcrumbs component

Provides a ready to use component. Can be styled and configured.

Play with example here.

<Breadcrumbs routes={Routes} />

There is only 1 required argument. And bunch of optional:

Title	Type	Description	Default
routes *	array	array of route objects (see example above)	-
separator	any	separator for crumbs	/
icons	boolean	whether to show icons	true
titles	boolean	whether to show titles	true
noTitlesOnMobile	boolean	if true - hide titles when device width <= 600px (do not forget to provide icons in such case)	false
notFoundTitle	string	title for not found pages	'Page Not Found'
notFoundIcon	any	icon for not found pages	undefined
customClasses	object	classes for each element of Breadcrumbs component	-

Similar to first required argument for Breadcrumbs service - Routes array.

customClasses

Title	Type	Description	Html Element
root	string	class for root element	nav
list	string	class for list element	ul
link	string	class for link element	a
currentLink	string	class for currentLink element	li
icon	string	class for icon element	span (holder for icon)
title	string	class for title element	span
separator	string	class for separator element	li (holder for separator)

License

This project is licensed under the terms of the MIT license.