diff --git a/frontend/scenes/DocumentScene/DocumentScene.js b/frontend/scenes/DocumentScene/DocumentScene.js
index def21887e..c23600af8 100644
--- a/frontend/scenes/DocumentScene/DocumentScene.js
+++ b/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 {
);
- title = this.renderLayoutTitle();
+ title = ;
titleText = `${doc.collection.name} - ${doc.title}`;
}
diff --git a/frontend/scenes/DocumentScene/components/Breadcrumbs/Breadcrumbs.js b/frontend/scenes/DocumentScene/components/Breadcrumbs/Breadcrumbs.js
new file mode 100644
index 000000000..adec66f13
--- /dev/null
+++ b/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 => (
+ {node.title}
+ ))
+ : [];
+ titleSections.unshift(
+
+ {document.collection.name}
+
+ );
+
+ return (
+
+ /
+ {titleSections.reduce((prev, curr) => [prev, ' / ', curr])}
+ {` / ${document.title}`}
+
+ );
+ }
+};
+
+export default Breadcrumbs;
diff --git a/frontend/scenes/DocumentScene/components/Breadcrumbs/index.js b/frontend/scenes/DocumentScene/components/Breadcrumbs/index.js
new file mode 100644
index 000000000..8fe21291d
--- /dev/null
+++ b/frontend/scenes/DocumentScene/components/Breadcrumbs/index.js
@@ -0,0 +1,3 @@
+// @flow
+import Breadcrumbs from './Breadcrumbs';
+export default Breadcrumbs;