Separated Breadcrumbs into its own component

frontend/scenes/DocumentScene/DocumentScene.js

@@ -17,6 +17,7 @@ import Document from 'components/Document';
 import DropdownMenu, { MenuItem, MoreIcon } from 'components/DropdownMenu';
 import { Flex } from 'reflexbox';
 import Sidebar from './components/Sidebar';
+import Breadcrumbs from './components/Breadcrumbs';
 
 import styles from './DocumentScene.scss';
 
@@ -202,7 +203,7 @@ class DocumentScene extends React.Component {
         </div>
       );
 
-      title = this.renderLayoutTitle();
+      title = <Breadcrumbs store={this.store} />;
       titleText = `${doc.collection.name} - ${doc.title}`;
     }
 

frontend/scenes/DocumentScene/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,36 @@
+// @flow
+import React from 'react';
+import styled from 'styled-components';
+import { Link } from 'react-router';
+import type { Document, NavigationNode } from 'types';
+import DocumentSceneStore from '../../DocumentSceneStore';
+
+type Props = {
+  store: DocumentSceneStore,
+};
+
+const Breadcrumbs = ({ store }: Props) => {
+  const { document, pathToDocument } = store;
+  if (document && document.collection) {
+    const titleSections = pathToDocument
+      ? pathToDocument.map(node => (
+          <Link key={node.id} to={node.url}>{node.title}</Link>
+        ))
+      : [];
+    titleSections.unshift(
+      <Link key={document.collection.id} to={document.collection.url}>
+        {document.collection.name}
+      </Link>
+    );
+
+    return (
+      <span>
+        &nbsp;/&nbsp;
+        {titleSections.reduce((prev, curr) => [prev, ' / ', curr])}
+        {` / ${document.title}`}
+      </span>
+    );
+  }
+};
+
+export default Breadcrumbs;

frontend/scenes/DocumentScene/components/Breadcrumbs/index.js

@@ -0,0 +1,3 @@
+// @flow
+import Breadcrumbs from './Breadcrumbs';
+export default Breadcrumbs;