Add breadcrumbs

src/Pages/FormationMaterialPage.js

@@ -23,6 +23,8 @@ import FormationMaterialDescription from '../Components/FormationMaterialDescrip
 import TopicList from '../Components/TopicList.js';
 import TopicFooter from '../Components/TopicFooter.js';
 import colecoes_obj from '../Components/FormationMaterialsResources/formationMaterials.js';
+import Breadcrumbs from "@material-ui/core/Breadcrumbs";
+import {Link} from "react-router-dom"
 
 export default function FormationMaterialPage(props) {
 	const colecao = props.location.pathname === "/colecao";
@@ -60,6 +62,16 @@ export default function FormationMaterialPage(props) {
 
 	return (
 		<Background>
+			<BreadCrumbsDiv>
+				<StyledBreadCrumbs>
+					<Link to="/">Página Inicial</Link>
+					<span>
+						{
+							colecao ? "Material de formação" : "Tópicos"
+						}
+					</span>
+				</StyledBreadCrumbs>
+			</BreadCrumbsDiv>
 			<MainContainer>
 				<Grid container
 					direction="row"
@@ -124,3 +136,20 @@ const MainContainer=styled.div`
         width : 1170px;
     }
 `
+const StyledBreadCrumbs = styled(Breadcrumbs)`
+  display: flex;
+  justify-content: flex-start;
+  max-width: 1170px;
+  span {
+    color: #a5a5a5;
+  }
+  a {
+    color: #00bcd4;
+    text-decoration: none;
+  }
+`
+
+const BreadCrumbsDiv = styled.div`
+  padding: 10px;
+  display: flex;
+`