Implement breadcrumbs on page layout

_config.yml

@@ -8,6 +8,14 @@ description: > # this means to ignore newlines until "baseurl:"
 keywords: Jekyll, GitHub Pages, theme, website, blog
 baseurl: /jekyll-theme-marketing
 lang: en_US
+css:
+  header:
+    background-color: "#1A69D5"
+  menu:
+    font-color: "#1A69D5"
+    icons: "#1A69D5"
+  footer:
+    background-color: "#1D6BD6"
 
 # Build settings
 markdown: kramdown

_layouts/page.html

@@ -15,6 +15,40 @@
     {% assign i18n-subtitle = site.data.i18n.catalog[page.collection][site.lang][i18n-id].subtitle %}
   {% endif %}
 {% endif %}
+
+<nav aria-label="breadcrumb">
+  <ol class="breadcrumb">
+    {% for level in (-1..page.categories.size) %}
+      {% if forloop.first %}
+        <li class="breadcrumb-item home"><a href="{{ '/' | relative_url }}"><span class="glyphicon glyphicon-home"></span></a></li>
+        {% if page.menu-father %}
+          <li class="breadcrumb-item {{ page.collection }}"><a href="{{ page.collection | prepend: '/' | relative_url }}">{{ site.data.i18n.catalog[page.collection][site.lang][page.collection].title }}</a></li>
+        {% endif %}
+      {% elsif forloop.last %}
+        <li class="breadcrumb-item {{ i18n-id}} active" aria-current="page">{% if i18n-title %}{{ i18n-title }}{% else %}{{ page.title }}{% endif %}</li>
+      {% else %}
+        {% assign cat-num = forloop.index %}
+        {% assign url-size = page.url | size | minus: 2 %}
+        {% assign sections = page.url | slice: 1,url-size | split : '/' %}
+        {% capture level-url %}
+          {% for section in sections %}
+            {% if forloop.index > cat-num %} {% break %} {% endif %}
+            {{ section | append: '/' }}
+          {% endfor %}
+        {% endcapture %}
+        {% assign level-url = level-url | strip_newlines | replace: ' ', '' | relative_url %}
+        {% assign level-url-size = level-url | size | minus: 2 %}
+        {% assign level-i18n-id = level-url | slice: 1,level-url-size | replace: '/', '-' | remove_first: page.collection | remove_first: '-' %}
+        {% assign level-i18n-title = site.data.i18n.catalog[page.collection][site.lang][level-i18n-id].title %}
+        {% assign page-commercial-downcase = page.commercial | downcase  %}
+        {% unless page.categories[level] == page-commercial-downcase %}
+          <li class="breadcrumb-item {{ level-i18n-id }}"><a href="{{ level-url }}">{% if level-i18n-title %}{{ level-i18n-title }}{% else %}{{ page.categories[level] | replace: '-', ' ' | capitalize }}{% endif %}</a></li>
+        {% endunless %}
+      {% endif %}
+    {% endfor %}
+  </ol>
+</nav>
+
 <h2 id="{{ i18n-id }}" class="post {{ class }}">{% if i18n-title %}{{ i18n-title }}{% else %}{{ page.title }}{% endif %}</h2>
 <h3 id="{{ i18n-id }}" class="post {{ class }}">{% if i18n-subtitle %}{{ i18n-subtitle }}{% else %}{{ page.subtitle }}{% endif %}</h3>
 

_sass/breadcrumbs/_bootstrap.scss

@@ -0,0 +1,12 @@
+nav ol.breadcrumb{
+  background: #fff;
+  font-size: 1.1em;
+  margin-left: 20px;
+  padding-top: 20px;
+
+  li{
+    a{
+      color: $font-color-menu;
+    }
+  }
+}

assets/css/main.scss

@@ -1,9 +1,13 @@
 ---
 # Only the main Sass file needs front matter (the dashes are enough)
 ---
-
+// Define charset
 @charset "utf-8";
 
+// Define variables
+$font-color-menu: {{ site.css.menu.font-color }};
+
 // Import partials.
 @import "common/common";
+@import "breadcrumbs/bootstrap";
 @import "product-cards/3d-space";