@evo/breadcrumbs
v1.0.4
Published
Breadcrumbs component
Downloads
80
Maintainers
Keywords
Readme
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>