Add breadcrumb nav and show active navbar item

assets/css/bobastyle.css

@@ -153,7 +153,7 @@ footer {
   text-decoration: none;
 }
 
-.langbar-item.selected {
+.navbar-item.active, .langbar-item.active {
   font-weight: bold;
 }
 
@@ -285,6 +285,28 @@ h1 svg.icon {
 
 
 
+/* Breadcrumb navigation */
+.breadcrumb {
+  margin-top: 40px;
+  margin-bottom: 20px;
+  margin-left: 20px;
+}
+
+.breadcrumb ul {
+  padding: 0;
+  list-style: none;
+}
+
+.breadcrumb li {
+  display: inline;
+}
+
+.breadcrumb li+li:before {
+  content: "»"
+}
+
+
+
 /* Print compatibility */
 @media print {
   .top, .section-header-link {

layouts/_default/baseof.html

@@ -8,6 +8,10 @@
             {{ partial "top.html" . }}
         </div>
 
+        {{ if not .IsHome }}
+        {{ partial "breadcrumb.html" . }}
+        {{ end }}
+
         <div class="content">
         {{- block "main" . }}
         {{ .Content }}

layouts/partials/breadcrumb.html

@@ -0,0 +1,19 @@
+<nav class="breadcrumb">
+    <ul>
+        {{ template "breadcrumbnav" (dict "p1" . "p2" .) }}
+    </ul>
+</nav>
+{{ define "breadcrumbnav" }}
+{{ if .p1.Parent }}
+{{ template "breadcrumbnav" (dict "p1" .p1.Parent "p2" .p2 ) }}
+{{ else if not .p1.IsHome }}
+{{ template "breadcrumbnav" (dict "p1" .p1.Site.Home "p2" .p2 ) }}
+{{ end }}
+<li{{ if eq .p1 .p2 }} class="active"{{ end }}>
+    {{ if eq .p1 .p2 }}
+    {{ .p1.Title }}
+    {{ else }}
+    <a href="{{ .p1.Permalink }}">{{ .p1.Title }}</a>
+    {{ end }}
+</li>
+{{ end }}

layouts/partials/top.html

@@ -4,24 +4,25 @@
 
 <nav class="navbar">
     {{ with .Site.Home }}
-    <a class="navbar-item" href="{{ .Permalink | absLangURL }}">{{ .Title }}</a>
+    <a class="navbar-item{{ if $.IsHome }} active{{ end }}" href="{{ .Permalink | absLangURL }}">{{ .Title }}</a>
     {{ end }}
 
     {{ range .Site.Menus.main }}
-    <a class="navbar-item" href="{{ .URL }}">{{ .Name }}</a>
+
+    {{ $isActive := false }}
+    {{ if or ($.HasMenuCurrent .Menu .) ($.IsMenuCurrent .Menu .) }}
+    {{ $isActive = true }}
+    {{ end }}
+
+    <a class="navbar-item{{ if $isActive }} active{{ end }}" href="{{ .URL }}">{{ .Name }}</a>
+
     {{ end }}
 </nav>
 
 {{ if .Site.IsMultiLingual }}
 <nav class="langbar">
     {{ range .Site.Home.AllTranslations }}
-
-    {{ if eq .Language $.Site.Language }}
-    <a class="langbar-item selected" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
-    {{ else }}
-    <a class="langbar-item" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
-    {{ end }}
-
+    <a class="langbar-item{{ if eq .Language $.Site.Language }} active{{ end }}" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
     {{ end }}
 </nav>
 {{ end }}