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.