There are no notes for this item.
| Prop | Required? | Type | Default | Description |
|---|---|---|---|---|
| crumbs | Yes | [object] |
<div id="reactMount" data-tpl="breadcrumbs">
<nav class="va-nav-breadcrumbs">
<ul class="row va-nav-breadcrumbs-list columns" role="menubar" aria-label="Primary">
<li><a href="#1">link1</a></li>
<li><a href="#2">link2</a></li>
<li><a href="#3">link3</a></li>
</ul>
</nav>
</div>
<script>
window.currentProps = {
"package": {
"name": "department-of-veteran-affairs/jean-pants",
"version": "0.1.0"
},
"assetPath": "/design-system/",
"isProduction": true,
"componentSourcePath": "./Breadcrumbs.jsx",
"crumbs": [{
"link": "#1",
"key": "key1",
"label": "link1"
}, {
"link": "#2",
"key": "key2",
"label": "link2"
}, {
"link": "#3",
"key": "key3",
"label": "link3"
}]
}
</script>
import React from 'react';
import Breadcrumbs from './Breadcrumbs';
export default function BreadcrumbsExample(props) {
return (
<Breadcrumbs
includeSearch={props.includeSearch}
crumbs={props.crumbs}/>
);
}
package:
name: department-of-veteran-affairs/jean-pants
version: 0.1.0
assetPath: /design-system/
isProduction: true
componentSourcePath: ./Breadcrumbs.jsx
crumbs:
- link: '#1'
key: key1
label: link1
- link: '#2'
key: key2
label: link2
- link: '#3'
key: key3
label: link3
import PropTypes from 'prop-types';
import React from 'react';
class Breadcrumbs extends React.Component {
render() {
const crumbs = this.props.crumbs;
return (
<nav className="va-nav-breadcrumbs">
<ul className="row va-nav-breadcrumbs-list columns" role="menubar" aria-label="Primary">
{crumbs.map((c) => {
return <li key={c.key}><a href={c.link}>{c.label}</a></li>;
})}
</ul>
</nav>
);
}
}
Breadcrumbs.propTypes = {
// array should contain objects that contain each breadcrumb's
// key, href, and plain-text label
crumbs: PropTypes.arrayOf(PropTypes.object).isRequired
};
export default Breadcrumbs;
import React from 'react';
import { shallow } from 'enzyme';
import { axeCheck } from '../../../../lib/testing/helpers';
import { expect } from 'chai';
import Breadcrumbs from './Breadcrumbs.jsx';
const crumbs = [{ link: '#1', key: 'key1', label: 'link1' },
{ link: '#2', key: 'key2', label: 'link2' },
{ link: '#3', key: 'key3', label: 'link3' }];
describe('<Breadcrumbs>', () => {
it('should render three items', () => {
const tree = shallow(<Breadcrumbs
crumbs={crumbs}/>);
expect(tree.find('li')).to.have.lengthOf(3);
});
it('should contain link elements', () => {
const tree = shallow(<Breadcrumbs
crumbs={crumbs}/>);
expect(tree.find('a')).to.have.lengthOf(3);
});
it('should have plain-text labels', () => {
const tree = shallow(<Breadcrumbs
crumbs={crumbs}/>);
expect(tree.find('a').first().text()).to.equal('link1');
expect(tree.find('a').last().text()).to.equal('link3');
});
it('should pass aXe check', () => {
return axeCheck(<Breadcrumbs
crumbs={crumbs}/>);
});
});