0

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?

  • 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. – Magento Learner Mar 6 '19 at 16:27
3

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>
| improve this 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;
   }
}
| improve this answer | |
0

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>
| improve this answer | |
  • 1
    It doesn't work! Note: it does overwrite the block I've tested it but it does NOT Add the css class – Juliano Vargas Aug 30 '18 at 16:31
  • @JulianoVargas where you have placed this file? – Prashant Valanda Aug 30 '18 at 18:12
  • I've updated the question to see where I placed the xml and the file is under my theme! – Juliano Vargas Aug 31 '18 at 8:03
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>
| improve this answer | |
  • 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 2 days ago

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.