Magento 2 My Account Menu / Navigation Links : Add, Delete, Re-order Custom Links
Managing Navigation Links plays a paramount role to the store’s website as it has strong effects on your SEO. Therefore, 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.
Enjoyed the tutorial? Spread it to your friends!
Featured Extensions
