How to Add Logout Tab to Customer Account in Magento 2?

How to Add Logout Tab to Customer Account

In this article, I am going to explain how to add Logout Tab to customer account. Most of the users search for the Logout / Sign Out link in the customer account dashboard. We can add Logout / Sign Out to the customer account.

You may also be interested in:

  1. How to Display Products by Custom Attribute in Magento 2?

Let’s start

You need to add customer_account.xml file under /app/design/frontend/<Vendor>/<theme>/Magento_Customer/layout/

In my case it is :

/app/design/frontend/Aryan/Tutorial/Magento_Customer/layout/

Aryan => Vendor

Tutorial => Theme

Content for customer_account.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="customer_account_navigation">
            <block class="Magento\Framework\View\Element\Html\Link\Current" name="customer.account.logout">
               <arguments>
                   <argument name="label" xsi:type="string" translate="true">Logout</argument>
                   <argument name="path" xsi:type="string">customer/account/logout</argument>
               </arguments>
           </block>
       </referenceBlock>
   </body>
</page>

Once done with file addition in your theme, do cache flush:

$ php bin/magento c:f

Output :

Customer Account Logout
Logout Link

How to Add Custom Link to Customer Dashboard?

If you want to add a custom link/tab to the customer dashboard, you can easily do it. Let’s see how to add a custom link.

For example, I want to add the Customer Demo tab which will redirect to the URL customer-demo.

Edit customer_account.xml in your theme.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="customer_account_navigation">
            <block class="Magento\Framework\View\Element\Html\Link\Current" name="customer.demo" before="customer.account.logout">
               <arguments>
                   <argument name="label" xsi:type="string" translate="true">Customer Demo</argument>
                   <argument name="path" xsi:type="string">customer-demo</argument>
               </arguments>
           </block>
       </referenceBlock>
   </body>
</page>

Clear Cache

$ php bin/magento c:f

Output:

Custom tab to customer dashboard
Custom tab to customer dashboard

How to remove Tab from Customer Account?

Removing the existing tab from the customer account dashboard is very simple. We just need to remove that block in our customer_account.xml

<referenceBlock name="name of the block" remove="true" />

For example, let remove the Customer Demo tab which we added above.

<referenceBlock name="customer.demo" remove="true" />

Now, Clear the cache to see the change.


Hope this article helped you to understand how to add links to the customer account dashboard. If you have any queries, you can ask me directly over email at aryansrivastavadesssigner@gmail.com or contact me here.

If you want a live session, do direct ping me on LinkedIn I will arrange an online session on weekends.

If you like this article, you can buy me a cup of coffee Buy me a Coffee.

About Aryan Srivastava

I’m a Passionate Magento 2 Frontend Developer. I have 2.5+ years of experience in Frontend. I cherish taking up complex problems and turning them into the best layout in the easiest and proper way. I love to work on Magento 2 e-Commerce Solutions.

View all posts by Aryan Srivastava →

Leave a Reply

Your email address will not be published. Required fields are marked *