Magento 2 Add custom CSS class to breadcrumbs

Question

I need to add my own CSS class to the <ul> tag in breadcrumbs.

in Magento_Catalog/templates/products/breadcrumbs.pthml the code look like this

<div class="breadcrumbs"></div>
<script type="text/x-magento-init">
 {
 ".breadcrumbs": <?= $viewModel->getJsonConfigurationHtmlEscaped() ?>
 }
</script>

And this code is rendered to the following on frontend.

<div class="breadcrumbs"><!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<ul class="items">
 <li class="item home"> 
 <a href="http://example.com/" title="Go to Home Page">Home</a>
 </li>
 <li class="item product"> 
 <strong>Test product</strong> 
 </li>
</ul>
</div>

I want to add my own css class for example .breadcrumb-style to the <ul> tag.

What should I do? I did find the _breadcrumb.less file, which allow me to edit the exiting class like .itmes, but I don't know how to add more CSS classes.

Answer 1

First create a new module for breadcrumbs. you need to rewrite the css with your custom module using di.xml of your frontend scope:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
 <preference for="Magento\Theme\Block\Html\Breadcrumbs" type="Namespace\Module\Block\Html\Breadcrumbs"/>
</config>

Then in your customized phtml file like namespace/module/view/frontend/templates/html/breadcrumbs.phtml, you can add your class:

<div class="breadcrumbs"><!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<ul class="items">
 <li class="item home"> 
 <a href="http://example.com/" title="Go to Home Page">Home</a>
 </li>
 <li class="item product"> 
 <strong>Test product</strong> 
 </li>
</ul>
</div>

and your customization css file:_breadcrumb.less will be going to namespace/module/view/frontend/web/css/source/ where you have your css changes: _breadcrumb.less content:

.breadcrumbs {color: somecolor;}

Please look at the full example on this resource.

• Magento Learner: Does the module from GITHUB work for Magento 2.3.1? I just installed the extension, and added my own css class in breadcrumbs.phtml. but it has no effect on the site.
• Nickool: have you run php bin/magento setup:upgrade?
• Nickool: yes it is compatible.
• Nickool: also do the php bin/magento c:c
• Magento Learner: yes, I ran setup:upgrade and cleared the cache after activated the module. I'm actually quite comfortable working with custom extensions, so I guess I didn't miss anything. I tried to add my style to <ul class="items breadcrum-style">, but It has no effect on the frontend. It's the breadcrumb for product page I'm trying to edit. I guess this extension works for product page as well right. it's weird it's not affact.

Answer 2

You can check with this file. /Magento_Theme/web/templates/breadcrumbs.html Try to copy this file in your theme folder and change in it according to your requirements. You can find in files <%- crumb.name %> i did the same thing as i want to change the class name.