[Feature Request] Allow Yoast SEO Breadcrumbs to be displayed in a list order

[Pcosta88]

Add an option for the Yoast SEO Breadcrumbs to be displayed as either an ordered or unordered list.

See also: https://wordpress.org/support/topic/plugin-yoast-breadcrumbs-links-as-list-items?replies=1
https://wordpress.org/support/topic/plugin-wordpress-seo-by-yoast-breadcrumb-semantic-markup?replies=1

[Pcosta88]

Please inform the customer of conversation # 129955 when this conversation has been closed.

[Pcosta88]

Please inform the customer of conversation # 183023 when this conversation has been closed.

[jonoalderson]

This is sensible; semantically, these breadcrumbs are a structured list. I think we should provide an upgrade roue to alter the markup (a new function/shortcode).

We should also output a enqueue a yoast-breadcrumbs.css stylesheet, to ensure that we don't output theme/native CSS on these elements.

Specifically, we should:

• Add a new shortcode/function for generating 'V2 breadcrumbs' (e.g., yoast_breadcrumb_v2).
• Alter the markup to use an ordered list
• Add a new class to the breadcrumb container (to minimise specificity collisions on existing CSS)
• Add a new class for the first breadcrumb item (breadcrumb_first)
• Link the last/current element to the (canonical URL of) the current page
• Enqueue the CSS below

Alternatively, we could offer a filter/function to apply a custom 'walker' function (as per wp nav menu and similar) and wrapper function, which would allow advanced users to construct their own markup.

Example markup

<ol class="yoast_breadcrumbs">
    <li class="yoast_breadcrumb yoast_breadcrumb--first"><a href="https://www.example.come/">Home</a></li>
    <li class="yoast_breadcrumb"><a href="https://www.example.come/test-page/">Test Page</a></li>
    <li class="yoast_breadcrumb yoast_breadcrumb--last"><a aria-current="page" href="https://www.example.come/test-page/test-page-2/">Test Page 2</a></li>
</ol>

CSS

I think this should be pretty safe and consistent, but, feel free to adjust/adapt it if I've missed or messed up anything.

.yoast_breadcrumbs {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}
.yoast_breadcrumbs::after {
  content: "";
  clear: both;
  display: table;
}
.yoast_breadcrumbs > li.yoast_breadcrumb {
    float: left;
    margin: 0 6px 0 0;
    padding: 0;
}
.yoast_breadcrumbs > li.yoast_breadcrumb::after {
    content: "»";
    margin: 0 0 0 6px;
}
.yoast_breadcrumbs > li.yoast_breadcrumb--last::after {
    content: unset;
    margin: unset;
}

[rmarcano]

Received a request for this feature here: https://twitter.com/blueocto/status/1231979105953964033

[juliemoynat]

Hi,
It would be great to have this feature implemented for accessibility because semantic is part of web accessibility. Navigating through a list into something that is actually a list is easier than navigating into a paragraph.
Thanks