Add initial breadcrumb partial

* Add initial breadcrumb partial
* Add aria-current=page property
* Add separators via CSS to be comply with screen readers
* Use ordered list to the set of links
* Update README.md: add breadcrumb section

README.md

@@ -33,6 +33,7 @@
     - [Related Content](#related-content)
     - [Share Buttons](#share-buttons)
     - [Featured Image](#featured-image)
+    - [Breadcrumb](#breadcrumb)
     - [Footer Social Icons](#footer-social-icons)
     - [Web App Manifest](#web-app-manifest)
 - [Contributing](#contributing)
@@ -157,6 +158,10 @@ googleAnalytics = "" # Enable Google Analytics by entering your tracking id
 [Params.Featured]
   previewOnly = false # Show only preview featured image
 
+[Params.Breadcrumb]
+  enable = true # Enable breadcrumb block globally
+  homeText = "Binario" # Home node text
+
 [Params.Social]
   email = "example@example.com"
   facebook = "username"
@@ -348,6 +353,26 @@ featured:
 
 **Note**: `caption` and `credit` appear only on single pages, not summaries.
 
+#### Breadcrumb
+
+Breadcrumb navigation is a hierarchical navigation menu presented as a trail of links. The main purpose of breadcrumb is
+to help users navigate in the site hierarchy.
+
+For enabling breadcrumb partial globally (for all single and list pages), use `enable` param under the
+`[Params.Breadcrumb]` section of your config.toml file:
+
+```toml
+[Params.Breadcrumb]
+  enable = true
+```
+
+The global `.Site.Params.Breadcrumb.enable` param can be overridden for specific posts with `breadcrumb` page's front
+matter param:
+
+```yaml
+breadcrumb: false
+```
+
 #### Footer Social Icons
 
 With Binario, you have the option to display social icons in the footer. To display them, set up `[Params.Social]`

assets/css/main.css

@@ -555,6 +555,48 @@ button:not(:-moz-focusring):focus > .main-nav__btn-box {
 	stroke: #fff;
 }
 
+.breadcrumb {
+	padding: .875rem;
+	margin: .1875rem 0 -.1875rem;
+	color: #c3c3c3;
+	border-width: 1px 0 0;
+}
+
+.breadcrumb--separated {
+	margin: .1875rem 0 .3125rem;
+	border-width: 1px 0;
+}
+
+@media screen and (min-width: 480px) {
+	.breadcrumb {
+		margin: .625rem .3125rem -.625rem;
+		border-width: 1px 1px 0;
+	}
+
+	.breadcrumb--separated {
+		margin: .625rem .3125rem .3125rem;
+		border-width: 1px;
+	}
+}
+
+.breadcrumb__list {
+	display: flex;
+	flex-wrap: wrap;
+	padding: 0;
+	margin: 0;
+	list-style: none;
+}
+
+.breadcrumb__item {
+	display: flex;
+}
+
+.breadcrumb__item::after {
+	display: block;
+	margin: 0 .3125rem;
+	content: "›";
+}
+
 .alignleft {
 	float: left;
 	margin: 1rem 1rem 1rem 0;

layouts/_default/list.html

@@ -1,5 +1,6 @@
 {{ define "main" }}
 	<main class="main">
+		{{ partial "breadcrumb.html" . }}
 		{{- if or .Title .Content }}
 		<div class="page block">
 			{{ with .Title }}<h1 class="page__title">{{ . }}</h1>{{ end }}

layouts/_default/single.html

@@ -1,5 +1,6 @@
 {{ define "main" }}
 	<main class="main">
+		{{ partial "breadcrumb.html" . }}
 		<div class="single block">
 			<article class="post">
 				{{- partial "post_featured.html" (dict "page" . "IsSingle" true) }}

layouts/partials/breadcrumb.html

@@ -0,0 +1,31 @@
+{{- $breadcrumb := default .Site.Params.breadcrumb.enable .Params.breadcrumb -}}
+
+{{- 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 }}
+
+	{{- $crumbTitle := .p1.Title | default "..." -}}
+	{{- $crumbTitleHome := .p1.Site.Params.Breadcrumb.homeText | default .p1.Site.Title -}}
+	{{- if .p1.IsHome -}}
+		{{- $crumbTitle = $crumbTitleHome -}}
+	{{- end -}}
+
+	{{- if ne .p1 .p2 }}
+		<li class="breadcrumb__item">
+			<a class="breadcrumbs__link" href="{{ .p1.RelPermalink }}">{{ $crumbTitle }}</a>
+		</li>
+	{{- else }}
+		<li class="breadcrumbs__item breadcrumb__item--active" aria-current="page">{{ $crumbTitle }}</li>
+	{{- end }}
+{{- end }}
+
+{{- if $breadcrumb }}
+<nav class="breadcrumb{{ if not (or $.Title $.Content) }} breadcrumb--separated{{ end }} block" aria-label="breadcrumb">
+	<ol class="breadcrumb__list">
+		{{ template "breadcrumbnav" (dict "p1" . "p2" .) }}
+	</ol>
+</nav>
+{{- end }}