Material-ui-breadcrumbs NPM

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

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.