How to show all categories under the static text in frontend Menu in MAgento2

Question

How to display all categories under the static text in frontend Menu in Magento2

Example: We have 3 categories created in admin and displaying like below in frontend

Menu 1 Menu 2 Menu 3

We need to display like below

CATEGORIES

• Menu 1
• Menu 2
• Menu 3

Answer 1

You can create your own custom version of Magento_Theme/templates/html/topmenu.phtml in your own theme under app/design/frontend/<Vendor_Name>/<Theme_Name>/Magento_Theme/templates/html/topmenu.phtml. From there you can add a <div class='navigation'>Categories</div> above the <ul> that contains the contents of $_menuHtml.

Note: If you are extending the Luma theme you will need to add some css to get rid of the display: none on nav-sections-item-content > * which has display: none.

Answer 2

app/code/VendoreName/ModuleName/Helper

Data.php

<?php

namespace VendoreName\ModuleName\Helper;

use \Magento\Framework\App\Helper\AbstractHelper;

class Data extends AbstractHelper
{
    protected $_storeManager;
    protected $categoryCollection;

    public function __construct(
        ..............................................................
        \Magento\Store\Model\StoreManagerInterface $storeManager,
        \Magento\Catalog\Model\ResourceModel\Category\CollectionFactory $categoryCollection,
        ..............................................................
    ) {
        ..............................................................
        $this->_storeManager = $storeManager;
        $this->categoryCollection = $categoryCollection;
        ..............................................................
    }

    ..............................................................
    ..............................................................


    public function getCurrentStoreId()
    {
        return $this->_storeManager->getStore()->getId();
    }

    public function getCategoryList()
    {
        $collection = $this->categoryCollection->create();
        $collection->addAttributeToSelect('*');
        $collection->setStore($this->_storeManager->getStore($this->getCurrentStoreId()));
        $collection->addAttributeToFilter('is_active', '1');
        $collection->addAttributeToFilter('include_in_menu', '1');
        $collection->setOrder('name');
        return $collection;
    }
}

app/code/VendoreName/ModuleName/view/frontend/templates

custom.phtml

<?php
$moduleNameHelper = $this->helper(\VendoreName\ModuleName\Helper\Data::class);
$categories = $moduleNameHelper->getCategoryList();
?>
<?php if ($categories->count()): ?>
    <div>
        <div >
            <ul class="category_section">
                <?php foreach ($categories as $categoriesKey => $categoriesVal): ?>
                        <?php if ($categoriesVal->getLevel() != 1): ?>
                        <li>
                            <a  href="<?= $block->escapeUrl($categoriesVal->getUrl()) ?>">
                                <span class="t2 "><?= $block->escapeHtml($categoriesVal->getName()) ?></span>
                            </a>
                        </li>
                        <?php endif; ?>
                <?php endforeach; ?>
            </ul>
        </div>
    </div>
<?php endif; ?>

Add below block to your layout where you want to show

<block class="Magento\Framework\View\Element\Template"  name="custom.category.list" template="VendoreName_ModuleName::custom.phtml" />

Add below line into your static block in admin panel

{{block class="Magento\Framework\View\Element\Template" template="VendoreName_ModuleName::custom.phtml"}}