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