How to add custom tab in Customer Account Sidebar Magento 2
Tags
sidebar magento-2 customer account custom tab

Welcome to Kishan Savaliya's Magento 2 Blog.In this blog post, I will explain how to add custom account left sidebar tab in magento 2. This left sidebar tabs appear whenever user login with account. Magento redirects on customer account page whenever customer login with username and password, so there we can see multiple tabs with different pages. Now if you want to add any new custom link there then how to add new custom link I will show you here. So let's start.

I'm assuming you have your custom module with frontend route, if you don't know how to create simple module and how to create frontend route then this post can be useful to you.

  1. Create customer_account.xml Layout file.
  2. Create your action layout file.
  3. Create controller action file.
  4. Create template file.

Step : 1 - Create customer_account.xml Layout file.

First of all, you will need to create customer_account.xml file here in your custom module..

app/code/SK/CustomerAccountTab/view/frontend/layout/customer_account.xml

Content for this file is..

<?xml version="1.0"?>
<!--
/**
 *
 * @package   SK\CustomerAccountTab
 * @author    Kishan Savaliya <kishansavaliyakb@gmail.com>
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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-navigation-new-tab">
                <arguments>
                    <argument name="path" xsi:type="string">sk_route/front/index</argument>
                    <argument name="label" xsi:type="string">Custom tab (SK)</argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>

Here in above file, I defined my new custom tab for left sidebar.

Step : 2 - Create your action layout file.

Now in this step, we need to create our action layout file. So in above XML file we defined sk_route/front/index path in argument so we need to create our action layout file like sk_route_front_index.xml, so let's create action layout file here.

Here sk_route is my frontend router name, front is my Controller directory name and index is my action name.

app/code/SK/CustomerAccountTab/view/frontend/layout/sk_route_front_index.xml

Content for this file is..

<?xml version="1.0"?>
<!--
/**
 *
 * @package   SK\CustomerAccountTab
 * @author    Kishan Savaliya <kishansavaliyakb@gmail.com>
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="customer_account"/> 
    <body> 
        <referenceBlock name="page.main.title"> 
            <action method="setPageTitle"> 
                <argument translate="true" name="title" xsi:type="string">Custom Tab (SK)</argument> 
            </action> 
        </referenceBlock> 
        <referenceContainer name="content"> 
            <block class="Magento\Framework\View\Element\Template" name="custom_tab_sk" template="SK_CustomerAccountTab::tab_content.phtml" />
        </referenceContainer> 
    </body>
</page>

Step : 3 - Create controller action file.

Now, create your action's controller file here in your module..

app/code/SK/CustomerAccountTab/Controller/Front/Index.php

Content for this file is..

<?php
/**
 *
 * @package   SK\CustomerAccountTab
 * @author    Kishan Savaliya <kishansavaliyakb@gmail.com>
 */

namespace SK\CustomerAccountTab\Controller\Front;

class Index extends \Magento\Framework\App\Action\Action
{
    public function execute()
    {
        $this->_view->loadLayout(); 
        $this->_view->renderLayout();
    } 
}

Step : 4 - Create template file.

Now, in this last step we need to create one template file that we defined in Step 2 Action layout xml file. So let's create template file here..

app/code/SK/CustomerAccountTab/view/frontend/templates/tab_content.phtml

Content for this file is..

<?php echo "Custom Tab Content..!"; ?>

Now you need to run below command once..

php bin/magento setup:upgrade

Output :

Login with your storefront account and navigate to My account section.

How to add custom tab in Customer Account Sidebar Magento 2

Hope you may like this article and can understand this easily. You can add comments below in case if you have any questions regarding this article or if I missed anything here. I will check and get back to you with proper solution.

If you enjoyed this blog post, share it with friends!