implemented Breadcrumb ui-component

scm-ui-components/packages/ui-components/src/Breadcrumb.js

@@ -0,0 +1,44 @@
+//@flow
+import React from "react";
+import { Link } from "react-router-dom";
+
+type Props = {
+  path: string,
+  baseUrl: string
+};
+
+class Breadcrumb extends React.Component<Props> {
+  render() {
+    const { path, baseUrl } = this.props;
+
+    if (path) {
+      const paths = path.split("/");
+
+      return (
+        <nav className="breadcrumb" aria-label="breadcrumbs">
+          <ul>
+            {paths.map((path, index) => {
+              if (paths.length - 1 === index) {
+                return (
+                  <li className="is-active" key={index}>
+                    <Link to={"#"} aria-current="page">
+                      {path}
+                    </Link>
+                  </li>
+                );
+              }
+              return (
+                <li key={index}>
+                  <Link to={baseUrl + "/" + path}>{path}</Link>
+                </li>
+              );
+            })}
+          </ul>
+        </nav>
+      );
+    }
+    return null;
+  }
+}
+
+export default Breadcrumb;

scm-ui-components/packages/ui-components/src/index.js

@@ -27,6 +27,7 @@ export { default as Tooltip } from "./Tooltip";
 export { getPageFromMatch } from "./urls";
 export { default as Autocomplete} from "./Autocomplete";
 export { default as BranchSelector } from "./BranchSelector";
+export { default as Breadcrumb } from "./Breadcrumb";
 export { default as MarkdownView } from "./MarkdownView";
 export { default as SyntaxHighlighter } from "./SyntaxHighlighter";
 export { default as ErrorBoundary } from "./ErrorBoundary";