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

Account Page Left Sidebar Links

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 class="content">
        <nav class="account-nav">
            <ul class="nav items">
                <?= $block->getChildHtml() ?>

Thanks in advance!


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

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

| improve this answer | |
  • I have added this to the customer_account.xml but as a referenceBlock. The class is not showing on the front end, please can you advise on this. – Developer Nov 7 '19 at 9:31
  • Hve you cleared a cache after updating in xml file? – Nits Nov 8 '19 at 10:39
  • Yes I have done. It adds the class now, is there a way for it to target the li rather than adding to the a tag? – Developer Nov 11 '19 at 12:29
  • Then you need to change the template for account navigation. – Nits Nov 11 '19 at 15:35
  • The account navigation is changed through the customer_account.xml or is it a different template that needs to be altered? Please advise – Developer Nov 12 '19 at 17:10

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

by creating the below file:


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>
| improve this answer | |

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.