Magento 2 My Account Menu / Navigation Links : Add, Delete, Re-order Custom Links

May 17, 2021 The Online Helper

Controlling Navigation Links plays an important role in the store’s website as it has great impacts on your SEO.

How to Add, Delete, Re-order Custom Links

Create customer_account.xml
Manage the Custom Links

Add a Custom Links
Re-order links
Delete the link

Step#1: Create customer_account.xml

First of all, before you add, delete or re-order the links, the primary concern you will have to do is making a customer_account.xml in your theme.

File Path:

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

Step#2: Control the Custom Links

Add Custom Links

To add different Custom Links, all you need 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. Recognize the custom Link label and path

Re-order links

To modify the order of the links, you want to move the element from its actual place and put it back. And requesting Magento 2 to put it after or before the link that you want together.

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

In this case, I will do an example to move the 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 perform it simple and easy to follow below is an example to show you the process to exclude all the links from the navigation one at a time.

Syntax to remove:

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

Here is the list of common block names uses:

- 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