diff --git a/app/templates/app/document_detail.html b/app/templates/app/document_detail.html
index 5a62493..5aae28f 100644
--- a/app/templates/app/document_detail.html
+++ b/app/templates/app/document_detail.html
@@ -8,7 +8,12 @@
 {% block content %}
 {% spaceless %}
 <div class="text-break m-4">
-    <p><a href="{% url 'documents' %}">{% trans "Documents" %}</a> > {{ document.title }}</p>
+    <nav aria-label="{% trans 'Breadcrumb' %}">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a href="{% url 'documents' %}">{% trans "Documents" %}</a></li>
+            <li class="breadcrumb-item active" aria-current="page">{{ document.title }}</li>
+        </ol>
+    </nav>
 
     <div>
         <h1 id="main-heading">{{ document.title }}</h1>
diff --git a/app/templates/app/institution_detail.html b/app/templates/app/institution_detail.html
index 75cea3d..57e011f 100644
--- a/app/templates/app/institution_detail.html
+++ b/app/templates/app/institution_detail.html
@@ -8,7 +8,12 @@
 {% block content %}
 {% spaceless %}
 <div class="text-break m-4">
-    <p><a href="{% url 'institutions' %}">{% trans "Institutions" %}</a> > {{ institution.name }}</p>
+    <nav aria-label="{% trans 'Breadcrumb' %}">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a href="{% url 'institutions' %}">{% trans "Institutions" %}</a></li>
+            <li class="breadcrumb-item active" aria-current="page">{{ institution.name }}</li>
+        </ol>
+    </nav>
 
     <div class="mb-3 row">
         <div class="{% if institution.logo %}col-md-6{% else %}col-md-12{% endif %}">
diff --git a/app/templates/app/project_detail.html b/app/templates/app/project_detail.html
index e765662..56f6ffa 100644
--- a/app/templates/app/project_detail.html
+++ b/app/templates/app/project_detail.html
@@ -8,7 +8,12 @@
 {% block content %}
 {% spaceless %}
 <div class="text-break m-4">
-    <p><a href="{% url 'projects' %}">{% trans "Projects" %}</a> > {{ project.name }}</p>
+    <nav aria-label="{% trans 'Breadcrumb' %}">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a href="{% url 'projects' %}">{% trans "Projects" %}</a></li>
+            <li class="breadcrumb-item active" aria-current="page">{{ project.name }}</li>
+        </ol>
+    </nav>
 
     <div class="mb-3 row">
       {# incorrect indent facilitates comparison with document_detail.html #}