Magento 2 Customer Account Navigation Add Css Class to link not working

Question

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?

Answer 1

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>

Answer 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;
   }
}

Answer 3

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>

2. 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()));
    }
}

3. Cache clean

Answer 4

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>

Answer 5

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');
});

Answer 6

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>

2. 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);
    }
}

Answer 7

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>