Modern template - add breadcrumb

ot_templating/Resources/Private/Partials/Modern/Breadcrumb.html

@@ -0,0 +1,7 @@
+{namespace v=FluidTYPO3\Vhs\ViewHelpers}
+
+<f:comment><!--
+    -- Breadcrumb ViewHelper --
+    Voir: https://fluidtypo3.org/viewhelpers/vhs/master/Page/BreadCrumbViewHelper.html
+--></f:comment>
+{v:page.breadCrumb(class: 'breadcrumb', linkCurrent: FALSE)}

ot_templating/Resources/Private/Partials/Modern/Header.html

@@ -20,3 +20,5 @@
 <f:if condition="{ot:template.getPreference(key: 'displayCarousel')}==1">
     <f:render partial="Modern/Carousel" arguments="{_all}" />
 </f:if>
+
+<f:render partial="Modern/Breadcrumb" />

ot_templating/Resources/Public/assets/Modern/style/custom.css

@@ -451,6 +451,41 @@
         padding-top: 0 !important;
     }
 
+/*------------------------
+    Breadcrumb
+------------------------*/
+.breadcrumb {
+    list-style: none;
+    display: flex;
+    flex-direction: row;
+    font-weight: bold;
+    /*background: none;*/
+}
+
+.breadcrumb li {
+    margin: 0 3px;
+}
+
+.breadcrumb li a {
+    margin: 0 2px;
+}
+
+.breadcrumb li::before {
+    /*content: "> ";*/
+    font-family: "FontAwesome";
+    content: "\f105";
+    color: #bfbfbf;
+    margin: 0 2px;
+}
+
+.breadcrumb li:first-child::before {
+    content: "";
+}
+
+.breadcrumb > li:last-child {
+    color: #808080;
+}
+
 
 /*============================
 Slick carousels
@@ -1008,7 +1043,6 @@ Error pages (404, 403...)
 }
 
 
-
 /*============================
 Media queries
 ============================*/