diff --git a/src/analytics/example/component/breadcrumb/breadcrumb-button/index.ejs b/src/analytics/example/component/breadcrumb/breadcrumb-button/index.ejs
index 4c4b84730..4482127cf 100644
--- a/src/analytics/example/component/breadcrumb/breadcrumb-button/index.ejs
+++ b/src/analytics/example/component/breadcrumb/breadcrumb-button/index.ejs
@@ -1,23 +1,5 @@
 <% const sample = getSample(include); %>
 
-<% const getData = (data = {}) => {
-  return {
-    id: uniqueId('breadcrumb'),
-    segments: [
-      { label: 'Accueil', id: uniqueId('breadcrumb') },
-      { label: 'Segment 1 : lorem ipsum', id: uniqueId('breadcrumb') },
-      { label: 'Segment 2 : lorem ipsum', id: uniqueId('breadcrumb') },
-      { label: 'Segment 3 : lorem ipsum', id: uniqueId('breadcrumb') },
-      { label: 'Page Actuelle' }
-    ],
-    ...data
-  }
-};
-%>
-
-<div class="<%= prefix %>-container" >
-
-  <%- section('Étiquette d’élément BUTTON' , null, 0) %>
-  <%- include('../../../../../component/breadcrumb/template/ejs/breadcrumb.ejs', { breadcrumb: getData({ markup: 'button' }) }); %>
-
+<div class="<%= prefix %>-container">
+  <%- sample('Étiquette d’élément button', '../../../../../component/breadcrumb/example/sample/sample-button'); %>
 </div>
diff --git a/src/analytics/example/component/breadcrumb/index.ejs b/src/analytics/example/component/breadcrumb/index.ejs
index d282e9f93..a2f585f17 100644
--- a/src/analytics/example/component/breadcrumb/index.ejs
+++ b/src/analytics/example/component/breadcrumb/index.ejs
@@ -1,23 +1,5 @@
 <% const sample = getSample(include); %>
 
-<% const getData = (data = {}) => {
-  return {
-    id: uniqueId('breadcrumb'),
-    segments: [
-      { path: '', label: 'Accueil', id: uniqueId('breadcrumb') },
-      { path: 'segment-1', label: 'Segment 1 : lorem ipsum', id: uniqueId('breadcrumb') },
-      { path: 'segment-2', label: 'Segment 2 : lorem ipsum', id: uniqueId('breadcrumb') },
-      { path: 'segment-3', label: 'Segment 3 : lorem ipsum', id: uniqueId('breadcrumb') },
-      { label: 'Page Actuelle' }
-    ],
-    ...data
-  }
-};
-%>
-
-<div class="<%= prefix %>-container" >
-
-  <%- section('Étiquette d’élément A' , null, 0) %>
-  <%- include('../../../../component/breadcrumb/template/ejs/breadcrumb.ejs', { breadcrumb: getData() }); %>
-
+<div class="<%= prefix %>-container">
+  <%- sample('Étiquette d’élément a', '../../../../component/breadcrumb/example/sample/sample-a'); %>
 </div>
diff --git a/src/component/breadcrumb/example/alternative/index.ejs b/src/component/breadcrumb/example/alternative/index.ejs
new file mode 100755
index 000000000..210a9b548
--- /dev/null
+++ b/src/component/breadcrumb/example/alternative/index.ejs
@@ -0,0 +1,3 @@
+<% const sample = getSample(include); %>
+
+<%- sample('Fil d’Ariane avec boutons', '../sample/sample-button', { }, true); %>
diff --git a/src/component/breadcrumb/example/index.ejs b/src/component/breadcrumb/example/index.ejs
index c6bbf61bf..b2b7c3dcf 100755
--- a/src/component/breadcrumb/example/index.ejs
+++ b/src/component/breadcrumb/example/index.ejs
@@ -1,3 +1,5 @@
 <% const sample = getSample(include); %>
 
-<%- sample('Fil d’Ariane', './sample/breadcrumb', { }, true); %>
+<%- sample('Fil d’Ariane avec liens', './sample/sample-a', { }, true); %>
+
+
diff --git a/src/component/breadcrumb/example/sample/breadcrumb.ejs b/src/component/breadcrumb/example/sample/sample-a.ejs
similarity index 100%
rename from src/component/breadcrumb/example/sample/breadcrumb.ejs
rename to src/component/breadcrumb/example/sample/sample-a.ejs
diff --git a/src/component/breadcrumb/example/sample/sample-button.ejs b/src/component/breadcrumb/example/sample/sample-button.ejs
new file mode 100644
index 000000000..1458756b1
--- /dev/null
+++ b/src/component/breadcrumb/example/sample/sample-button.ejs
@@ -0,0 +1,14 @@
+<% const data = {
+  id: uniqueId('breadcrumb'),
+  segments: [
+    { markup: 'button', path: undefined, label: 'Accueil' },
+    { markup: 'button', path: undefined, label: 'Segment 1 : lorem ipsum' },
+    { markup: 'button', path: undefined, label: 'Segment 2 : lorem ipsum' },
+    { markup: 'button', path: undefined, label: 'Segment 3 : lorem ipsum dolor sit amet' },
+    { markup: 'span', path: undefined, label: 'Page Actuelle' }
+  ],
+  ...locals.breadcrumb
+}
+%>
+
+<%- include('../../template/ejs/breadcrumb.ejs', {breadcrumb: data}); %>
diff --git a/src/component/breadcrumb/i18n/fr.yml b/src/component/breadcrumb/i18n/fr.yml
new file mode 100644
index 000000000..3b80f3d7f
--- /dev/null
+++ b/src/component/breadcrumb/i18n/fr.yml
@@ -0,0 +1,6 @@
+title: Fil d'Ariane
+description: Le fil d’Ariane est un système de navigation secondaire qui permet à l’utilisateur de se situer sur le site qu’il consulte.
+doc: https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/fil-d-ariane
+subdir:
+  title: Mises en situation
+  alternative: Alternatives
diff --git a/src/component/breadcrumb/style/_module.scss b/src/component/breadcrumb/style/_module.scss
index 7ac49cd6e..3f4b56345 100644
--- a/src/component/breadcrumb/style/_module.scss
+++ b/src/component/breadcrumb/style/_module.scss
@@ -72,22 +72,20 @@ un padding de 4px et une marge négative en compensation sont mis en place afin
       }
     }
   }
-
+  
   &__link {
     vertical-align: top;
     position: relative;
     @include link-underline;
     @include disable-tint;
     @include text-style(xs);
-    @include padding(0);
     @include hover-underline;
-
+    @include padding(0);
+    
     &[aria-current] {
-      &:not(button):not([href]) {
-        pointer-events: none;
-        cursor: default;
-        @include disable-underline;
-      }
+      pointer-events: none;
+      cursor: default;
+      @include disable-underline;
     }
   }
 }
diff --git a/src/component/breadcrumb/template/ejs/breadcrumb.ejs b/src/component/breadcrumb/template/ejs/breadcrumb.ejs
index 85c837079..85568bd8d 100644
--- a/src/component/breadcrumb/template/ejs/breadcrumb.ejs
+++ b/src/component/breadcrumb/template/ejs/breadcrumb.ejs
@@ -16,7 +16,6 @@
 <%
 let breadcrumb = locals.breadcrumb || {segments : []};
 if (breadcrumb.button === undefined) breadcrumb.button = 'Voir le fil d’Ariane';
-const markup = breadcrumb.markup || 'a';
 %>
 
 <nav role="navigation" class="<%= prefix %>-breadcrumb" aria-label="vous êtes ici :">
@@ -26,20 +25,26 @@ const markup = breadcrumb.markup || 'a';
     <ol class="<%= prefix %>-breadcrumb__list">
       <%
         let path = '';
-        const attrs = {};
         for (let i = 0; i < breadcrumb.segments.length; i++) {
+            const segmentAttrs = {};
             const segment = breadcrumb.segments[i];
+            const markup = segment.markup || 'a';
             if (segment.path != undefined) path += segment.path + '/';
-            if (segment.id) attrs.id = segment.id;
-            if (segment.href) {
-              attrs['href'] = segment.href;
+            if (segment.id) segmentAttrs.id = segment.id;
+            if (i === breadcrumb.segments.length - 1) {
+              segmentAttrs['aria-current'] = 'page';
             } else {
-              if (i === breadcrumb.segments.length - 1) attrs['aria-current'] = 'page';
-              else if (path !== '') attrs['href'] = path;
+              if (markup == 'a') {
+                if (segment.href) {
+                  segmentAttrs['href'] = segment.href;
+                } else {
+                  segmentAttrs['href'] = path;
+                }
+              }
             }
         %>
       <li>
-        <<%= markup %> class="<%= prefix %>-breadcrumb__link" <%- includeAttrs(attrs);%>><%= segment.label %></<%= markup %>>
+        <<%= markup %> class="<%= prefix %>-breadcrumb__link" <%- includeAttrs(segmentAttrs);%>><%= segment.label %></<%= markup %>>
       </li>
       <% } %>
     </ol>