How to Add, Delete, Re-order Custom Links for My Account Menu / Navigation in Magento 2

Navigation links play a vital role in Magento 2 stores as they affect the stores’ SEO performance greatly. A well-planned navigation will be a good contribution to the site overall experience. It not only improves search experience but also increases conversion rate and SEO ranking. Therefore it’s important to manage Navigation links well. So In this post, I will instruct you the way to add, re-order and delete the Custom Links.

SEO for M2

Drive more traffic to your online store and boost your rank on search engines

Check it out!

How to Add, Delete, Re-order Custom Links

Step 1: Create customer_account.xml
Step 2: Manage the Custom Links

Step 1: Create customer_account.xml

Before you can add, delete or re-order the links, the first thing you will have to do is creating customer_account.xml in your theme. Please follow the below instruction:

app/design/frontend/mageplaza/mytheme/Magento_Customer/layout/customer_account.xml

Step 2: Manage the Custom Links

Add Custom Links

To add a new Custom Links, all you have to do is copy the following code:

<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">My Label</argument>
             <argument name="path" xsi:type="string">my-path</argument>
         </arguments>
    </block>
</referenceBlock>

Then add it to your layout xml file. Remember to custom Link label and path

Re-order links

To change order of the links, you need to move the element from its original place and place it back. And asking Magento 2 to place it after or before the link that you want simultaneously.

<move element="YOUR_ELEMENT_NAME" destination="customer_account_navigation" after="YOUR_NEW_PLACE" />

In this case, I will do an example to move My Wish List menu item after My Orders:

<!-- eg. "My Wish List" move after "My Orders" -->
<move element="customer-account-navigation-wish-list-link" destination="customer_account_navigation" after="customer-account-navigation-orders-link" />

Or before Order Links menu item:

<!-- eg. "My Wish List" move before "My Orders" -->
<move element="customer-account-navigation-wish-list-link" destination="customer_account_navigation" after="customer-account-navigation-orders-link" />

Delete a link

To make it simple and easy to follow, below is the example to show you the method to remove all the links from the navigation one at a time.

Syntax to remove:

<referenceBlock name="block-name-here" remove="true"/>

Here are list of common block names:

- customer-account-navigation-customer-balance-link : Store credit 
- customer-account-navigation-downloadable-products-link : Downloadable product link 
- customer-account-navigation-newsletter-subscriptions-link : Subscription link 
- customer-account-navigation-billing-agreements-link : Billing agreement link 
- customer-account-navigation-product-reviews-link : Product review link 
- customer-account-navigation-my-credit-cards-link : My credit card link 
- customer-account-navigation-account-link : Account link 
- customer-account-navigation-account-edit-link : Account edit link 
- customer-account-navigation-address-link : Address link 
- customer-account-navigation-orders-link : Orders link 
- customer-account-navigation-wish-list-link : Wish list link 
- customer-account-navigation-gift-card-link : Gift card link 
- customer-account-navigation-giftregistry-link : Gift registry 
- customer-account-navigation-reward-link : Reward points 
- customer-account-navigation-checkout-sku-link : Order by SKU

Conclusion

In short, above are the easiest instruction on how to add, delete, re-order navigation links in your account dashboard. I hope this article could help you to administrate your custom links effectively. If you have any questions about this tutorial, let us know in the comment section. Thanks for reading!

Vinh Jacker

Hello, I'm the Chief Technology Officer of Mageplaza, and I am thrilled to share my story with you. My deep love and passion for technology have fueled my journey as a professional coder and an ultra-marathon runner. Over the past decade, I have accumulated extensive experience and honed my expertise in PHP development.

Previous Add Rel Prev, Next tag

Next How to Optimize Default Checkout Page in Magento 2