Magento 2 My Account Menu / Navigation Links : Add, Delete, Re-order Custom Links
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.
How to Add, Delete, Re-order 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!
Enjoyed the tutorial? Spread it to your friends!
Featured Extensions
