material-ui-breadcrumbs

Material-UI Breadcrumbs

Breadcrumbs component for React integrated with material-ui package.

Requirements

• React 16.2.0 (not tested on other versions)
• Material-UI 0.20.0 (not tested on other versions)

Required Knowledge

I recommend that you get to know React and Material-UI.

Installation

npm i material-ui-breadcrumbs --save

or

yarn add material-ui-breadcrumbs

Usage

Once installed, just import and use the component:

import React from 'react';
import {Breadcrumbs} from 'material-ui-breadcrumbs/Breadcrumbs';
 
const className = 'custom-class';
const style = {
  width: '50%',
  height: '48px',
};
 
export const Example = () => (
  <Breadcrumbs
    className={className}
    style={style}
    transparentBackground={true}
  />
);
 
export default Example;

Properties

Props	Options	Default	Description
className	String	''	Adds custom class to breadcrumbs container.
style	Object	{}	Adds custom inline styles to breadcrumbs container.
itemClassName	String	''	Adds custom class to breadcrumbs item.
itemStyle	Object	{}	Adds custom inline styles to breadcrumbs item.
activeItemClassName	String	''	Adds custom class to active breadcrumbs item.
activeItemStyle	Object	{}	Adds custom inline styles to active breadcrumbs item.
separatorClassName	String	''	Adds custom class to breadcrumbs separator.
separatorStyle	Object	{}	Adds custom inline styles to breadcrumbs separator.
separator	ReactElement	null	Adds custom breadcrumbs separator element.
transparentBackground	boolean	false	sets no background to breadcrumbs container.
customBackgroundClassName	String	''	Adds custom class to custom breadcrumbs container.
customBackgroundStyle	Object	{}	Adds custom inline styles to custom breadcrumbs container.
customBackground	ReactElement	null	Adds custom breadcrumbs container element.
currentStep	string	null	sets current active breadcrumb link.
steps	{label: string; uri: string;}	[]	sets breadcrumb links list.

Contribute

1. Submit an issue
2. Fork the repository
3. Create a dedicated branch (never ever work in master)
4. The first time, run command: yarn into the directory
5. Fix bugs or implement features

Future

• Add tests
• Add examples

License

This project is licensed under the terms of the MIT license