Magento 2 Add custom CSS class to breadcrumbs

by Magento Learner   Last Updated July 11, 2019 23:09 PM

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.



Answers 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.

Nickool
Nickool
July 11, 2019 22:31 PM

Related Questions


Updated December 31, 2018 21:09 PM

Updated August 09, 2017 22:09 PM

Updated March 28, 2017 15:09 PM

Updated December 23, 2017 10:09 AM

Updated June 06, 2017 09:09 AM