Breadcrumbs

[bameyrick]

Use this place to discuss the breadcrumbs component in the ONS Design System

[jrbarnes9]

Deep levels of breadcrumbs take up too much space on mobile:

A solution e.g. to display only the parent page link is required for under 500px breakpoint e.g...

[bameyrick]

This layout issue wouldn't be unique to mobile, as this wrapping will happen on all viewports on pages with deep levels of nesting and/or with very long page titles, so I don't think changing to only a parent page link on only breadcrumbs solves the larger problem that deep nesting and long page names make this component take up more space.

[bameyrick]

Deep levels of breadcrumbs take up too much space on mobile:

[jrbarnes9]

Breadcrumbs chevrons hidden when screen colours inverted (using v12 ZoomFusion)

[jrbarnes9]

Breadcrumbs not rendering correctly in IE11:

[trevorsaint]

Breadcrumbs not rendering correctly at breakpoint 500px and below.

[trevorsaint]

We should remove the 'current page' from the breadcrumb. It adds no real value other than visual distraction.

Problem

Improvement

GDS have removed the current page.
https://design-system.service.gov.uk/components/breadcrumbs/

[jrbarnes9]

Consider aligning breadcrumbs with previous link used in questionnaires, and consider use of back links in transactions

[trevorsaint]

We need to remove ID’s from SVG’s unless absolutely required, which don’t appear to be.

This is causing W3C validation errors due to duplicate ID’s.

[trevorsaint]

Breadcrumb arrow does not align with the edge of the page content when in a single breadcrumb state.

A negative left margin of -6px will perfectly align it.

[trevorsaint]

I am not sure why we have ID’s on the breadcrumbs. But having empty IDs on the links will cause the page to break W3C validation.

[jrbarnes9]

Need to be able to add classes to breadcrumb links