0

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.

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.

| improve this answer | |
  • 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. – Magento Learner Jul 11 '19 at 22:49
  • have you run php bin/magento setup:upgrade? – Nickool Jul 11 '19 at 22:51
  • yes it is compatible. – Nickool Jul 11 '19 at 22:51
  • also do the php bin/magento c:c – Nickool Jul 11 '19 at 22:52
  • 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. – Magento Learner Jul 11 '19 at 22:57
0

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.