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
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.

Add Rel Prev, Next tag

Optimize Default Checkout Page