Add additional class to breadcrumbs <div> on every page

Question

I am trying to add an additional class to the breadcrumbs block via a layout XML update. For example, I want the following line of code that appears below the header block by default in the blank theme:

<div class="breadcrumbs"></div>

To become as shown below on every page in the site:

<div class="breadcrumbs additional-class"></div>

So far I have added the following line of code to the app/design/frontend/[Vendor_Name]/[theme_dir]/Magento_Theme/layout/default.xml file:

<referenceBlock name="breadcrumbs" htmlClass="breadcrumbs container-fluid" />

After clearing all caches the change seems to have no effect on the frontend. Has anybody had any experience trying to change the class of the breadcrumbs container div?

Answer 1

You're mistaking the layout block for the markup, the markup is actually inside the template.

You need to copy this file into your theme:

magento/module-theme/view/frontend/templates/html/breadcrumbs.phtml

And add the class there:

<div class="breadcrumbs additional-class">

---

Also, I think htmlClass only works on containers and not blocks.