1

XML:

<referenceBlock name="customer_account_navigation">
 <block class="Magento\Customer\Block\Account\SortLinkInterface" name="customer-account-navigation-account-link">
    <arguments>
       <argument name="label" xsi:type="string" translate="true">Account Dashboard</argument>
       <argument name="path" xsi:type="string">customer/account</argument>
       <argument name="sortOrder" xsi:type="number">250</argument>
       <argument name="css_class" xsi:type="string">my-custom-css-class-here-not-working</argument>
    </arguments>
 </block>
 <!-- @Prashant Valanda suggestion -->
 <referenceBlock name="customer-account-navigation-account-link">
  <arguments>
   <argument name="label" xsi:type="string" translate="true">Account Dashboard works</argument>
   <argument name="path" xsi:type="string">customer/account</argument>
   <argument name="sortOrder" xsi:type="number">250</argument>
   <argument name="css_class" xsi:type="string">but-my-custom-css-class-here-still-does-not-work</argument> 
  </arguments>
 </referenceBlock>
</referenceBlock>

Taken from /../vendor/magento/module-customer/view/frontend/layout/customer_account.xml

Any ideas how one can add css class?

1
  • Have you found a solution to this? I have the same problem that I can not add my own css class to link in customer account navigation. Mar 6, 2019 at 16:27

7 Answers 7

4

Try this:

<block class="Magento\Customer\Block\Account\SortLinkInterface" name="customer-account-navigation-address-link">
  <arguments>
     <argument name="label" xsi:type="string" translate="true">Manage Address</argument>
     <argument name="path" xsi:type="string">customer/address</argument>
     <argument name="sortOrder" xsi:type="number">190</argument>
     <argument name="attributes" xsi:type="array">
        <item name="class" xsi:type="string">manage-address</item>
     </argument>
 </arguments>
</block>
2
  • it's working for me but when I add this all other tabs are not shown on account navigation. How can I solve this one any idea? Apr 20, 2021 at 19:00
  • perfect answer!!! +1 :) Oct 1, 2021 at 6:16
2

You cannot add a custom class unless you rewrite Magento's class:

Magento\Framework\View\Element\Html\Link\Current

But you can add arbitrary HTML attributes.

For example, here I am removing links only in mobile view by adding attribute mobile="hidden"

<referenceBlock name="customer-account-navigation-account-link">
    <arguments>
       <argument name="label" xsi:type="string" translate="true">Account Dashboard</argument>
       <argument name="path" xsi:type="string">customer/account</argument>
       <argument name="sortOrder" xsi:type="number">250</argument>
       <argument name="attributes" xsi:type="array">
          <item name="mobile" xsi:type="string">hidden</item>
       </argument>
    </arguments>
</referenceBlock>

And then in my CSS (actually somewhere in my less files) I put this:

@media (max-width: 767px) {
   *[mobile="hidden"] {
      display: none !important;
   }
}
2

To add unique css class in each <li> element of Magento My account navigation :

  1. Override Magento\Customer\Block\Account\Navigation by Adding below in di.xml
<config
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="Magento\Customer\Block\Account\Navigation"
                type="AR\Customer\Block\Account\Navigation"/>
</config>
  1. Create AR/Customer/Block/Account/Navigation.php and add below:
<?php
namespace AR\Customer\Block\Account;
class Navigation extends \Magento\Customer\Block\Account\Navigation
{
    /**
     * Render Block
     *
     * @param \Magento\Framework\View\Element\AbstractBlock $link
     * @return string
     */
    public function renderLink(\Magento\Framework\View\Element\AbstractBlock $link)
    {
        $label = strtolower(str_replace(' ', '', $link->getLabel()));
        return str_replace("nav", $label." nav",$this->_layout->renderElement($link->getNameInLayout()));
    }
}
  1. Cache clean
0

Remove all you have, and add this code to any container you want.

This should give you the account link with a custom css class:

<block class="Magento\Customer\Block\Account\Link" name="customer-account-navigation-account-link">
    <arguments>
        <argument name="label" xsi:type="string" translate="true">Account Dashboard</argument>
        <argument name="sortOrder" xsi:type="number">110</argument>
        <argument name="class" xsi:type="string">my-custom-css-class-here</argument>
    </arguments>
</block>
1
  • This one is pretty good, but we loose the "active" class that is automatically added when using Magento\Customer\Block\Account\SortLinkInterface. Any idea how to preserve the active class functionality?
    – PauGNU
    Jul 2, 2020 at 10:22
0

For someone like me for whom none of the solutions worked, leave the Magento 2 XML garbage and just add the class using jQuery.

In your theme, add the jquery in navigation.js file which should be present in app/design/frontend/Vendor/theme/web/js/navigation.js

I wanted to add nav item classes to the li element of the navigation links. So I simply added the below jQuery code at the end.

require(['jquery'],function($){
    $('.nav.items li').addClass('nav item');
});
0

Here's a Magento 2.4+ way of doing it - similar to ansuhman's answer, except it works.

  1. Add a plugin to app/code/Vendor/Yourmodule/etc/di.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">

    <!-- Insert this code -->
    <type name="Magento\Framework\View\Element\Html\Links">
      <plugin name="addClassnamesToLinks" type="Vendor\Yourmodule\Plugin\Links" sortOrder="1" disabled="false" />
    </type>
    <!-- End insert -->

</config>
  1. Create a plugin class at app/code/Vendor/Yourmodule/Plugin/Links.php
<?php
namespace Vendor\Yourmodule\Plugin;
class Links
{
    public function afterRenderLink(\Magento\Framework\View\Element\AbstractBlock $subject, $result)
    {
        $label = strtolower(str_replace(' ', '-', strip_tags($result) ) );
        return str_replace("nav", $label." nav", $result);
    }
}
-1

Use below code:

<referenceBlock name="customer-account-navigation-account-link">
    <arguments>
       <argument name="label" xsi:type="string" translate="true">Account Dashboard</argument>
       <argument name="path" xsi:type="string">customer/account</argument>
       <argument name="sortOrder" xsi:type="number">250</argument>
       <argument name="css_class" xsi:type="string">my-custom-css-class-here-not-working</argument>
    </arguments>
</referenceBlock>
3
  • 2
    It doesn't work! Note: it does overwrite the block I've tested it but it does NOT Add the css class Aug 30, 2018 at 16:31
  • @JulianoVargas where you have placed this file? Aug 30, 2018 at 18:12
  • I've updated the question to see where I placed the xml and the file is under my theme! Aug 31, 2018 at 8:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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