Breadcrumb template not updated for USWDS v3

Created on 30 January 2025, 2 months ago

Problem/Motivation

The breadcrumb template breadcrumb.html.twig does not contain updated classes and other markup from USWDS v3.

See https://designsystem.digital.gov/components/breadcrumb/.

Proposed resolution

Update the template file according to USWDS docs -- specifically, adding a <nav> tag as a wrapper and updating classes on the elements:

{% if breadcrumb %}
<h2 id="system-breadcrumb" class="visually-hidden">{{ 'Breadcrumb'|t }}</h2>
<nav class="usa-breadcrumb" aria-label="Breadcrumbs,,">
  <ol class="usa-breadcrumb__list">
  {% for item in breadcrumb %}
  <li class="usa-breadcrumb__list-item">
      {% if item.url %}
      <a href="{{ item.url }}" class="usa-breadcrumb__link">{{ item.text }}</a>
      {% else %}
      {{ item.text }}
      {% endif %}
  </li>
  {% endfor %}
  </ol>
</nav>
{% endif %}
πŸ“Œ Task
Status

Active

Version

3.1

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States majorrobot

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024