diff --git a/static/src/js/app.js b/static/src/js/app.js
index 617e092..67b9754 100644
--- a/static/src/js/app.js
+++ b/static/src/js/app.js
@@ -7,6 +7,7 @@ import ProjectImagesTypes from './components/index/project-images-types';
import ProjectImagesMain from './components/index/project-images-main';
import NavBar from './components/navbar/navbar';
+import Breadcrumbs from './components/breadcrumbs';
if ($('body').hasClass('index')) { // Render components on index
React.render(, document.getElementById('project-images-types'));
@@ -16,3 +17,7 @@ if ($('body').hasClass('index')) { // Render components on index
if ($('navbar')) {
React.render(, $('navbar')[0]);
}
+
+if ($('#breadcrumbs')) {
+ React.render(, $('#breadcrumbs')[0]);
+}
diff --git a/static/src/js/components/breadcrumbs.js b/static/src/js/components/breadcrumbs.js
new file mode 100644
index 0000000..1224430
--- /dev/null
+++ b/static/src/js/components/breadcrumbs.js
@@ -0,0 +1,40 @@
+import React from 'react';
+
+let {
+ Breadcrumb,
+ BreadcrumbItem
+} = require('react-bootstrap');
+
+export default class Breadcrumbs extends React.Component {
+ render() {
+ const parts = location.pathname.split('/').slice(1, -1);
+ var elements = [];
+ for (var i = 0; i < parts.length; i++) {
+ var dirs = [];
+ for (var j = 0; j <= i; j++) {
+ dirs.push(parts[j]);
+ }
+ if (i === (parts.length - 1)) {
+ elements.push(
+
+ {parts[i]}
+
+ );
+ } else {
+ var url = '/' + dirs.join('/') + '/';
+ elements.push(
+
+
+ {parts[i]}
+
+
+ );
+ }
+ }
+ return (
+
+ { elements }
+
+ );
+ }
+}
diff --git a/templates/content_base.html b/templates/content_base.html
index 1aa9f18..20b71dc 100644
--- a/templates/content_base.html
+++ b/templates/content_base.html
@@ -9,6 +9,9 @@
{% block pageTitle %}{% endblock %}
+
{% block content %}{% endblock %}