diff --git a/src/components/Breadcrumbs.js b/src/components/Breadcrumbs.js
new file mode 100644
index 0000000..05501ba
--- /dev/null
+++ b/src/components/Breadcrumbs.js
@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+
+import { Link } from 'react-router-dom';
+
+import Breadcrumbs from '@material-ui/core/Breadcrumbs';
+import Typography from '@material-ui/core/Typography';
+
+class MyBreadcrumbs extends Component {
+ render() {
+ return (
+ this.props.content && this.props.content.length > 1 ?
+
+ {this.props.content.splice(0, this.props.content.length-1).map((content, i) => (
+
+ {content.title}
+
+ ))}
+ {this.props.content.slice(-1)[0].title}
+
+ : null
+ );
+ };
+}
+
+export default MyBreadcrumbs;
diff --git a/src/components/Tutorial/Tutorial.js b/src/components/Tutorial/Tutorial.js
index 15ea3a0..9d92492 100644
--- a/src/components/Tutorial/Tutorial.js
+++ b/src/components/Tutorial/Tutorial.js
@@ -2,11 +2,16 @@ import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
+import Breadcrumbs from '../Breadcrumbs';
+
class Tutorial extends Component {
render() {
- console.log(this.props);
return (
-
Tutorial {this.props.match.params.tutorialId}
+
+
+
+
Tutorial {this.props.match.params.tutorialId}
+
);
};
}
diff --git a/src/components/Tutorial/TutorialHome.js b/src/components/Tutorial/TutorialHome.js
index fbaf47d..edd125d 100644
--- a/src/components/Tutorial/TutorialHome.js
+++ b/src/components/Tutorial/TutorialHome.js
@@ -1,5 +1,7 @@
import React, { Component } from 'react';
+import Breadcrumbs from '../Breadcrumbs';
+
import tutorials from './tutorials.json';
import { Link } from 'react-router-dom';
@@ -11,6 +13,8 @@ class TutorialHome extends Component {
render() {
return (
+
+
Tutorial-Übersicht
{tutorials.map((tutorial, i) => (