Breadcrumb

src/Breadcrumb/index.js

@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const Breadcrumb = ({ children, icon = 'angle-right', addDelimiter = true, ...rest }) => {
+  // Automatically add delimiter
+  const kids =
+    children.length > 0
+      ? children.map((child, index) => [
+          child,
+          addDelimiter && index + 1 < children.length && (
+            <hx-icon class="delimiter" type={icon}></hx-icon>
+          ),
+        ])
+      : children;
+
+  return (
+    <nav className="hxBreadcrumb" {...rest}>
+      {kids}
+    </nav>
+  );
+};
+
+Breadcrumb.propTypes = {
+  icon: PropTypes.string,
+  children: PropTypes.func,
+};
+
+export default Breadcrumb;

src/Breadcrumb/stories.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import Breadcrumb from './index';
+
+storiesOf('Breadcrumb', module)
+  .add('Multiple Breadcrumbs', () => {
+    return (
+      <Breadcrumb>
+        <a href="#">Home</a>
+        <a href="#">Library</a>
+        <a href="#">Current</a>
+      </Breadcrumb>
+    );
+  })
+  .add('Single Breadcrumb', () => {
+    return (
+      <Breadcrumb>
+        <a href="#">Home</a>
+      </Breadcrumb>
+    );
+  });

src/index.mjs

@@ -1,6 +1,7 @@
 /* Export helix-react definition */
 import Alert from './Alert';
 import Button from './Button';
+import Breadcrumb from './Breadcrumb';
 import Busy from './Busy';
 import Checkbox from './Checkbox';
 import ChoiceTile from './ChoiceTile';
@@ -26,6 +27,7 @@ import Tooltip from './Tooltip';
 export {
   Alert,
   Button,
+  Breadcrumb,
   Busy,
   Checkbox,
   ChoiceTile,