React Breadcrumbs Light
Demo
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):
// Usageconst crumbs = ; // 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 = ; // Render return <ul> crumbs </ul> ;; const RoutedCustomCrumbs = ;
Breadcrumbs component
Provides a ready to use component. Can be styled and configured.
<Breadcrumbs = />
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.