In this post I am going to explain how to add custom tab in customer account in magento 2.

In Magento 2, customer will be redirected to their account dashboard after login or signup. Customer My Account section contains various tabs such as My Account, My Orders, My Wishlist etc. Sometimes we need to add new custom tab to enhance customer shopping experience or to display some information.

Follow the steps below to add custom tab in customer account section.

Create customer_account.xml

File Path: app/code/Ht/Mymodule/view/frontend/layout/customer_account.xml

<?xml version="1.0" encoding="UTF-8"?>

<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="custom-tab-link">
                <arguments>
                    <argument name="path" xsi:type="string">mymodule/customer/index</argument>
                    <argument name="label" xsi:type="string">Ht Custom Tab</argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>

Create mymodule_customer_index.xml

File Path: app/code/Ht/Mymodule/view/frontend/layout/mymodule_customer_index.xml

<?xml version="1.0" encoding="UTF-8"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/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">Ht Custom Tab</argument> 
            </action> 
        </referenceBlock> 
        <referenceContainer name="content"> 
            <block class="Magento\Framework\View\Element\Template" name="custom-tab" template="Ht_Mymodule::customer/account/customtab.phtml" />
        </referenceContainer> 
    </body> 
</page>

Create routes.xml

File Path: app/code/Ht/Mymodule/etc/frontend/routes.xml

<?xml version="1.0" ?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="standard">
        <route frontName="mymodule" id="mymodule">
            <module name="Ht_Mymodule"/>
        </route>
    </router>
</config>

Create Index.php

File Path: app/code/Ht/Mymodule/Controller/Customer/Index.php

<?php

namespace Ht\Mymodule\Controller\Customer;

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

Create customtab.phtml

Related Read:  How to get current CMS page id in Magento2

File Path: app/code/Ht/Mymodule/view/frontend/templates/customer/account/customtab.phtml

<?php 

// Add your tab content here.
echo "Ht custom tab content goes here";

Thats it. Enjoy Magento 2!!

Related Posts: