react-easy-breadcrumb

A simple react component for generating breadcrumbs.

Installation

npm install react-easy-breadcrumb

or

yarn add react-easy-breadcrumb

Breadcrumbs component props

The breadcrumbs instance is implemented in the Breadcrumbs component.

property	type	default	description
separator	element	>	separator between breadcrumbs items
crumbs	array	undefined	array of breadcrumbs items

crumbs props

The crumbs property is array of breadcrumbs item that will be used in the Breadcrumbs component.

property	type	default	description
link	Link (eg: https:/github.com/)	/	Link that is to be routed when clicked on the item.
title	Text	empty string	The title that will be displayed as a crumb/item.
tintColor	Color or hex value	#4a4a4a	Color that you want the item to display.

Example

import { Breadcrumbs } from 'react-easy-breadcrumb';
import Separator from '../images/separator.svg';

const links = [
	{
		link: 'http://github.com/',
		title: 'Home'
	},
	{
		link: 'http://google.com/',
		title: 'Profile',
		tintColor: '#3098'
	},
	{
		link: 'http://twitter.com/',
		title: 'Bookmarks',
		tintColor: 'red'
	}
];

const Page = (
	<div>
		<Breadcrumbs crumbs={links} separator={Separator} />
	</div>
);

export default Page;

result

LICENSE

MIT