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.

Improve this question

2 Answers 2

Reset to default
2

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
18
  • 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. Commented Jul 11, 2019 at 22:49
  • have you run php bin/magento setup:upgrade? Commented Jul 11, 2019 at 22:51
  • yes it is compatible. Commented Jul 11, 2019 at 22:51
  • also do the php bin/magento c:c Commented Jul 11, 2019 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. Commented Jul 11, 2019 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 and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.