Breadcrumbs, základní styly

sass/main.scss

@@ -26,6 +26,7 @@ header {
 		justify-content: space-between;
 		height: 6rem;
 		max-width: 1250px;
+		width: 100%;
 	}
 
 	a.logo {
@@ -213,3 +214,43 @@ div.rambotron {
 		}
 	}
 }
+
+div.breadcrumbs {
+	border-top: 1px solid #D8DEE9;
+
+	.wrap {
+		margin: 0 auto;
+		display: flex;
+		max-width: 1250px;
+		width: 100%;
+	}
+
+	a.home {
+		display: flex;
+		align-items: center;
+	}
+
+	ul {
+		display: flex;
+		margin-left: .9rem;
+
+		li {
+			display: flex;
+			align-items: center;
+
+			&::before {
+				content: "\203A";
+				margin: 0 1em;
+				font-weight: bold;
+				color: #D8DEE9;
+			}
+
+			a {
+				display: inline-block;
+				padding: 1rem;
+
+				&:hover { text-decoration: underline }
+			}
+		}
+	}
+}

static/home.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23"><path d="M0 0h23v23H0z" fill="none"/><path d="M18.182 20H4.818a.952.952 0 01-.955-.949v-8.542H1L10.858 1.6a.959.959 0 011.285 0L22 10.509h-2.864v8.542a.952.952 0 01-.954.949zm-5.727-1.9h4.773V8.76L11.5 3.583 5.773 8.76v9.34h4.773v-5.693h1.909z" fill="#88c0d0"/></svg>

templates/page.html

@@ -1,5 +1,18 @@
 {% extends "base.html" %}
 
+{% block extra %}
+	<div class="breadcrumbs">
+		<div class="wrap">
+			<a href="{{ config.base_url }}" class="home"><img src="{{ get_url(path="home.svg") }}" alt="Home"></a>
+			<ul>
+				<li><a href="">Item</a></li>
+				<li><a href="">Item</a></li>
+				<li><a href="">Item</a></li>
+			</ul>
+		</div>
+	</div>
+{% endblock %}
+
 {% block content %}
 	<section>
 		<h1>{{ page.title }}</h1>