@evo/breadcrumbs

Breadcrumbs

React component to create "breadcrumbs" with built-in styles.

Usage

Example of usage:

import Breadcrumbs from '@evo/breadcrumbs';
import '@evo/breadcrumbs/index.css';

const Example = () => (
    <Breadcrumbs
        classNames={{
            breadcrumbsBody: 'path',
            breadcrumbsItem: 'path__item',
            breadcrumbsIcon: 'path__icon',
            breadcrumbsLink: 'path__link',
            breadcrumbsText: 'path__text',
            breadcrumbsExpander: 'path__expander',
            breadcrumbsFirstItem: 'path__item path__item_position_first',
            breadcrumbsLastItem: 'path__item path__item_position_last',
        }}
        path={[
            { name: 'Home', url: '#' },
            { name: 'Lorem ipsum dolor sit amet', url: '#' },
            { name: 'Ut enim ad minim veniam', url: '#' },
            { name: 'Excepteur sint occaecat cupidatat', url: '#' },
            { name: 'Consectetur adipisicing elit, sed do eiusmod tempor' },
        ]}
        homeIcon='<svg baseProfile='full' version='1.1' viewBox='0 0 1000 1000' xmlns='http://www.w3.org/2000/svg'>...</svg>'
    />
);

To include @evo/breadcrumbs/index.css into common bundle you should add css-loader (without module option) only for @evo/breadcrumbs path to webpack.config.js:

module.exports = {
    ...
    rules: [
        ...
        {
            test: /(\.css)$/,
            include: /@evo\/breadcrumbs/,
            use: [
                ...
                'css-loader'
            ]
        },
        ...
    ],
    ...    
}

Dependencies

The following dependencies should be installed in the project that will use this component:

"peerDependencies": {
    "react": ">=16.4.2",
    "react-dom": ">=16.4.2",
    "prop-types": ">=15.5.10"
},

API

Breadcrumbs component has following options:

classNames

type: object;

default: {};

This property is not required. It contains appropriate CSS class names for each tag of Breadcrumbs component.

There is a list of keys:

• breadcrumbsBody,
• breadcrumbsItem,
• breadcrumbsIcon,
• breadcrumbsLink,
• breadcrumbsText,
• breadcrumbsExpander,
• breadcrumbsFirstItem,
• breadcrumbsLastItem.

path

type: array;

This property is required. Each item of the path property is object that contains following keys:

• name (required),
• url.

homeIcon

type: string;

default: null;

This property is not required. It contains SVG string. For example:

<svg
    baseProfile='full'
    version='1.1'
    viewBox='0 0 16 16'
    xmlns='http://www.w3.org/2000/svg'
>
    <path d='m15.316708,6.684536l-6.592088, -6.225863c-0.196815,-0.148935 -0.39563,-0.379723 -0.646938,-0.379723l-0.105259,0c-0.251308,0 -0.450145,0.290621 -0.646915,0.439806l-6.655034,6.168643c-0.758855,0.622327 -0.775762,1.072473 -0.477278,1.433993c0.150685,0.182885 0.187566,0.280145 0.819165,0.280145l1.197615,-0.000341l0,5.967352c0,1.070859 0.535543,1.552478 1.387499,1.552478l1.417132,0l0.836867,-0.004999l0,-5.271193c0,-0.582673 0.332865,-0.757673 0.753469,-0.757673l2.884484,0c0.374973,0 0.702362,0.158002 0.702362,0.787465l0,5.234607l0.630303,0.011817l1.625173,0c0.897177,0 1.38759,-0.540134 1.38759,-1.464376l0,-6.058021l1.162688,-0.000205c0.588582,0 0.602284,0.016452 0.796441,-0.185521c0.395516,-0.411582 0.15732,-1.107468 -0.477278,-1.52839z'/>
</svg>