Magento 2: Managing Navigation Links in Account Dashboard

This short guide will help you to find out how to manage navigation links in frontend customer’s account dashboard in Magento 2.

In the below example, you will learn how to

  • Add new custom link
  • Remove the existing link
  • Reorder the links
  • Change link label

in the customer’s account dashboard.

First of all, create a new XML file named customer_account.xml in your theme like a file path below,

Sample File Path: app/design/frontend/YOUR_VENDOR/YOUR_THEME/Magento_Customer/layout/customer_account.xml

Add New Custom Link

Here is the example code that you need to add in the layout XML file (customer_account.xml) as follows, this helps to add a new custom link in the customer account dashboard in Magento 2 frontend.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="customer_account_navigation">
            <block class="Magento\Framework\View\Element\Html\Link\Current" name="customer-account-navigation-custom-link" after="-" >
                <arguments>
                    <argument name="label" xsi:type="string" translate="true">Custom Link Label</argument>
                    <argument name="path" xsi:type="string">custom-link-path</argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>

In the above code, the custom-link-path will be mentioned along with its path i.e, module/controller/action.

Remove Existing Link

Here is the example code that you need to add in the layout XML file (customer_account.xml) as follows, this helps to remove the navigation link from the customer account dashboard in Magento 2 frontend.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <!-- To Remove Remove Account Dashboard-->
        <referenceBlock name="customer-account-navigation-account-link" remove="true"/>
 
        <!-- To Remove Account Information-->
        <referenceBlock name="customer-account-navigation-account-edit-link" remove="true"/>
         
        <!-- To Remove Address Book-->
        <referenceBlock name="customer-account-navigation-address-link" remove="true"/>
  
        <!-- To Remove My Orders-->
        <referenceBlock name="customer-account-navigation-orders-link" remove="true"/>
  
        <!-- To Remove My Downloadable Products-->
        <referenceBlock name="customer-account-navigation-downloadable-products-link" remove="true"/>
  
        <!-- To Remove Newsletter Subscriptions-->
        <referenceBlock name="customer-account-navigation-newsletter-subscriptions-link" remove="true"/>
  
        <!-- To Remove My Credit Cards-->
        <referenceBlock name="customer-account-navigation-my-credit-cards-link" remove="true"/>
  
        <!-- To Remove Billing Agreements-->
        <referenceBlock name="customer-account-navigation-billing-agreements-link" remove="true"/>
  
        <!-- To Remove My Product Reviews-->
        <referenceBlock name="customer-account-navigation-product-reviews-link" remove="true"/>
 
        <!-- To Remove My Wish List-->
        <referenceBlock name="customer-account-navigation-wish-list-link" remove="true"/>
  
        <!-- For Enterprise -->
        <!-- To Remove Gift card link -->
        <referenceBlock name="customer-account-navigation-gift-card-link" remove="true"/>
 
        <!-- To Remove Order by SKU -->
        <referenceBlock name="customer-account-navigation-checkout-sku-link" remove="true"/>
 
        <!-- To Remove Gift registry -->
        <referenceBlock name="customer-account-navigation-giftregistry-link" remove="true"/>
  
        <!-- To Remove Reward points -->
        <referenceBlock name="customer-account-navigation-reward-link" remove="true"/>
  
        <!-- To Remove My Invitations -->
        <referenceBlock name="customer-account-navigation-magento-invitation-link-container" remove="true"/>
  
        <!-- To Remove Stored Payment Methods -->
        <referenceBlock name="customer-account-navigation-my-credit-cards-link" remove="true"></referenceBlock>
  
        <!-- To Remove My Returns -->
        <referenceBlock name="customer-account-navigation-return-history-link" remove="true"></referenceBlock>
  
        <!-- To Remove Store Credit -->
        <referenceBlock name="customer-account-navigation-customer-balance-link" remove="true"></referenceBlock>
    </body>
</page>

Reorder The Links

Here is the example code that you need to add in the layout XML file (customer_account.xml) as follows, this helps to move navigation link position in customer account dashboard in Magento 2 frontend.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <move element="customer-account-navigation-orders-link" destination="customer_account_navigation" after="customer-account-navigation-account-link"/>
    </body>
</page>

Change Link Label

Here is the example code that you need to add in the layout XML file (customer_account.xml) as follows, this helps to change links label in customer account dashboard in Magento 2 frontend.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="customer-account-navigation-orders-link">
            <arguments>
                <argument name="label" xsi:type="string" translate="true">My Orders History</argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

The above example will be changed the label of My Orders in to My Orders History.

Hope this helps.

Leave a Reply

Your email address will not be published. Required fields are marked *