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.

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

If you need to add a class to the li tag, and not to the href tag, you will need to define a custom template, inside your custom block.

class Link extends \Magento\Framework\View\Element\Html\Link implements SortLinkInterface
    /* define a custom phtml template */
    protected $_template = 'Mymodule_Customer::my-custom-link.phtml';

Now you have to create the file Mymodule/Customer/view/frontend/templates/my-custom-link.phtml

<li class="the-class-you-want-to-use">
    <a <?php echo $block->getLinkAttributes() ?>><?php echo $block->escapeHtml($block->getLabel())?></a>

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.