diff --git a/layouts/partials/breadcrumbs/index.html b/layouts/partials/breadcrumbs/index.html
new file mode 100644
index 0000000..fd04931
--- /dev/null
+++ b/layouts/partials/breadcrumbs/index.html
@@ -0,0 +1,5 @@
+<nav aria-label="breadcrumb" role="navigation">
+  <ol class="breadcrumb">
+  {{ partial "breadcrumbs/item.html" (dict "page" . "current" .) }}
+  </ol>
+</nav>
diff --git a/layouts/partials/breadcrumbs/item.html b/layouts/partials/breadcrumbs/item.html
new file mode 100644
index 0000000..fe1626c
--- /dev/null
+++ b/layouts/partials/breadcrumbs/item.html
@@ -0,0 +1,7 @@
+{{ if .page.Parent }}{{ if not .page.Parent.IsHome }}
+{{ partial "breadcrumbs/item.html" (dict "page" .page.Parent "current" .current)  }}
+{{ end }}{{ end }}
+
+{{ if ne .page .current }}
+  <li class="breadcrumb-item"><a href="{{ .page.Permalink }}">{{ .page.LinkTitle }}</a></li>
+{{ end }}
diff --git a/layouts/partials/content.html b/layouts/partials/content.html
index 2aa2b1e..db00271 100644
--- a/layouts/partials/content.html
+++ b/layouts/partials/content.html
@@ -1,6 +1,7 @@
 {{ if .Params.image }}
   <div class="mb-3 image header-image" data-image="{{ .Params.image }}"></div>
 {{ end }}
+{{ partial "breadcrumbs/index.html" . }}
 <h1 class="display-5">{{ .Title }}</h1>
 <h5 class="my-3">{{ partial "subtitle.html" . }}</h5>
 <p>{{ partial "content-details.html" . }}</p>
diff --git a/static/src/scss/style.scss b/static/src/scss/style.scss
index f0255b8..376b891 100644
--- a/static/src/scss/style.scss
+++ b/static/src/scss/style.scss
@@ -211,3 +211,16 @@ p code, li code {
 .tag {
   font-size: 1rem;
 }
+
+.breadcrumb {
+  background-color: initial;
+  padding: 0;
+  font-size: $spacer * 0.9;
+  margin-bottom: 0;
+  margin-top: $spacer * 1.5;
+
+  .breadcrumb-item + .breadcrumb-item::before {
+    padding: 0 0.2rem;
+    color: $black;
+  }
+}