Add a breadcrumbs block

numerique-gouv · Dec 5, 2023 · 4ef9400 · 4ef9400
1 parent c708174
commit 4ef9400
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git a/content_manager/templates/content_manager/blocks/breadcrumbs.html b/content_manager/templates/content_manager/blocks/breadcrumbs.html
@@ -0,0 +1,20 @@
+
+{% if self.get_ancestors|length > 1 %}
+<nav role="navigation" class="fr-breadcrumb" aria-label="vous êtes ici :">
+    <button class="fr-breadcrumb__button" aria-expanded="false" aria-controls="page-breadcrumb">Voir le fil d’Ariane</button>
+    <div class="fr-collapse" id="page-breadcrumb">
+        <ol class="fr-breadcrumb__list">
+            {% for p in self.get_ancestors %}
+                {% if p.is_root == False %}
+                    <li>
+                        <a class="fr-breadcrumb__link" href="{{ p.url }}">{{ p.title }}</a>
+                    </li>
+                {% endif %}
+            {% endfor %}
+            <li>
+                <a class="fr-breadcrumb__link" aria-current="page">{{ self.title }}</a>
+            </li>
+        </ol>
+    </div>
+</nav>
+{% endif %}
diff --git a/content_manager/templates/content_manager/content_page.html b/content_manager/templates/content_manager/content_page.html
@@ -37,10 +37,14 @@
     {% for block in page.body %}
         {% if block.block_type == 'hero' %}
             {% include "content_manager/blocks/hero.html" %}
+            <div class="fr-container">
+                {% include "content_manager/blocks/breadcrumbs.html" %}
+            </div>
         {% elif block.block_type == 'title' %}
             <div class="fr-container fr-mt-6w">
                 <div class="fr-grid-row fr-grid-row--gutters">
                     <div class="fr-col-12{% if not block.value.large %} fr-col-offset-md-2 fr-col-md-8{% endif %}">
+                        {% include "content_manager/blocks/breadcrumbs.html" %}
                         <h1 class="fr-display--sm">{{ block.value.title }}</h1>
                     </div>
                 </div>