breadcrumbs fix

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 %}

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;

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>