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 Extension

SEO Extension for Magento 2

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

(96 reviews)
Check it out!

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!

Image Description
Vinh Jacker
With over a decade of experience crafting innovative tech solutions for ecommerce businesses built on Magento, Jacker is the mastermind behind our secure and well-functioned extensions. With his expertise in building user-friendly interfaces and robust back-end systems, Mageplaza was able to deliver exceptional Magento solutions and services for over 122K+ customers around the world.
Previous Add Rel Prev, Next tag
Next How to Optimize Default Checkout Page in Magento 2
One Step Checkout for Magento 2 by Mageplaza
x