diff --git a/kitsune/sumo/jinja2/layout/breadcrumbs.html b/kitsune/sumo/jinja2/layout/breadcrumbs.html
index fd464c943..0a9155a30 100644
--- a/kitsune/sumo/jinja2/layout/breadcrumbs.html
+++ b/kitsune/sumo/jinja2/layout/breadcrumbs.html
@@ -1,11 +1,13 @@
 {% if breadcrumbs %}
-    <ol id="breadcrumbs" class="breadcrumbs">
-      {% for target, label in breadcrumbs %}
-        {% if target %}
-          <li><a href="{{ target }}">{{ label|truncate(length=30) }}</a></li>
-        {% else %}
-          <li>{{ label|truncate(length=40) }}</li>
-        {% endif %}
-      {% endfor %}
-    </ol>
+<div class="breadcrumbs" {% if id %}id="{{ id }}"{% endif %}>
+  <ol id="breadcrumbs" class="breadcrumbs--list">
+  {% for target, label in breadcrumbs %}
+    {% if target %}
+      <li><a href="{{ target }}">{{ label|truncate(length=30) }}</a></li>
+    {% else %}
+      <li>{{ label|truncate(length=40) }}</li>
+    {% endif %}
+  {% endfor %}
+  </ol>
+</div>
 {% endif %}
diff --git a/kitsune/sumo/static/sumo/scss/components/_breadcrumbs.scss b/kitsune/sumo/static/sumo/scss/components/_breadcrumbs.scss
index 3d7b4838e..be352e9f8 100644
--- a/kitsune/sumo/static/sumo/scss/components/_breadcrumbs.scss
+++ b/kitsune/sumo/static/sumo/scss/components/_breadcrumbs.scss
@@ -11,7 +11,7 @@
 //
 // Style guide: breadcrumbs
 
-.breadcrumbs {
+.breadcrumbs--list {
   display: flex;
   list-style: none;
   @include c.text-body-sm;
diff --git a/styleguide/styleguide-examples/breadcrumbs.njk b/styleguide/styleguide-examples/breadcrumbs.njk
index 292814247..de8a8e744 100644
--- a/styleguide/styleguide-examples/breadcrumbs.njk
+++ b/styleguide/styleguide-examples/breadcrumbs.njk
@@ -1,5 +1,5 @@
-<div class="breadcrumbs--wrap {{ modifier_class }}">
-    <ol class="breadcrumbs">
+<div class="breadcrumbs {{ modifier_class }}">
+    <ol class="breadcrumbs--list">
       <li><a href="#1">Home</a></li>
       <li><a href="#1">Link 2</a></li>
       <li>Current Page</li>