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"}}