Magento 2 - Adding Class to individual Navigation Items on Account Page

Question

I need to add a class to each of these navigation items on the Account page.

The file containing the navigation wrapper can be found at (vendor\magento\module-customer\view\frontend\templates\account\navigation.phtml):

<div class="block account-nav">
    <div class="title">
        <strong><?= $block->escapeHtml(__('My Account')) ?></strong>
    </div>
    <div class="content">
        <nav class="account-nav">
            <ul class="nav items">
                <?= $block->getChildHtml() ?>
            </ul>
        </nav>
    </div>
</div>

Thanks in advance!

Answer 1

You can add a class for different navigation links, please check below example.

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

Hope this will help you. Please let me know if you have any questions.

Answer 2

Just simply copy this code:

<referenceBlock name="customer_account_navigation">
            <block class="Magento\Framework\View\Element\Html\Links"
             template="Magentoexample_Module::account/navigation.phtml" cacheable="false">
            </block>
 </referenceBlock> 

by creating the below file:

/app/code/Magentoexample/Module/view/frontend/layout/default.xml

and then create:

/app/code/Magentoexample/Module/view/frontend/templates/account/navigation.phtml and paste your code like this:

<ul class="nav items">
 <li  class="nav item my-custom-class"><a
                href="<?php echo $block->getUrl('customer/account') ?>"><?php echo __('Orders'); ?></a></li>
</ul>