I want to make sub categories in navigation bar to display in organized blocks. How can i achieve it through coding.

Like the one in http://rashmian.com/ http://alothemes.com/demo/supermarket/index.php/?___store=english_2

Where category having long sub categories are organized well.

In first link they have used megamenu extension. However if I want any free extension or want to achieve it by coding.


Create custom block:

class Categories extends \Magento\Framework\View\Element\Template

protected $_itemCollectionFactory;
protected $_request;
protected $_categoryFactory;

public function __construct(
    \Magento\Framework\View\Element\Template\Context $context,
    \Magento\Catalog\Model\ResourceModel\Category\CollectionFactory $categoriesCollection,
    \Magento\Catalog\Model\CategoryFactory  $categoryFactory,
    \Magento\Framework\App\Request\Http $request,
    array $data = []
) {
    $this->_itemCollectionFactory = $categoriesCollection;
    $this->_categoryFactory = $categoryFactory;
    $this->_request = $request;
    parent::__construct($context, $data);

public function getContent()
    return __("Shop By Categories");

public function getMainCategories()
    $categoryFactory = $this->_itemCollectionFactory->create()

    return $categoryFactory;

public function getSubCategoryList($category)
  $collection = $this->_categoryFactory->create()->getCollection()->addAttributeToSelect('*')
          ->addAttributeToFilter('is_active', 1)
          ->setOrder('position', 'ASC')
  return $collection;


Layout xml:

   <referenceContainer name="content">
        <block class="Ktpl\Shopbycategories\Block\Homepagecategories" name="categories_display" template="vendor_Shopbycategories:categories.phtml" />

Template categories.phtml :

      $catTitle = $block->getContent();
      $mainCats = $block->getMainCategories();
      $subcats = $block->getMainCategories();
 <h2><b><?php echo __($catTitle); ?></b></h2>
    <?php foreach ($mainCats as $category): ?>
        <?php if ($category->getLevel() == 2): ?>
        <div style="box-shadow: 5px 5px 5px 5px rgb(237,237,237); width: 270px;height: 225px;float:left; margin: 10px 20px">
            <div class="categories" style="margin: 10px 20px;">
                <div class="category-title">
                    <h3><b><?php echo __($category->getName()); ?></b></h3>
                <?php $subcount = 0; ?>
                <?php foreach ($subcats as $key => $subcategory):?>
                        <?php if ($category->getId() == $subcategory->getParentId()):?>
                                <div class="sub-categories">
                                    <a href="#">
                                        <?php echo __($subcategory->getName()); ?>  
                            <?php $subcount++; ?>
                        <?php endif;?>
                        <?php if ($subcount == '5'){break;} ?>
                <?php endforeach; ?>
                <div class="shop-by-all-categories">
                    <a href="<?php echo $block->getUrl('categories/index/view/id/' . $category->getId()) ?>">
                        <?php echo __("Shop All " . $category->getName()); ?>
      <?php endif; ?>
  <?php endforeach; ?>
  • plz tell the file structure where to create this . I'm new to magento – smarttechy Nov 4 '16 at 6:49
  • in your custom module, and set its block to any page you want to add – Ronak Chauhan Nov 4 '16 at 6:51
  • {{block class="Magento\Framework\View\Element\Template" name="categories_data" template="vendor_Shopbycategories::categories.phtmll"}} add this line to your Content->page – Ronak Chauhan Nov 4 '16 at 6:55
  • i have create a folder in app/code/Inchoo/Helloworld/view/frontend/layout where i have posted this code of layout <page xmlns:xsi="w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd" layout="1column"> <body> <referenceContainer name="content"> <block class="Ktpl\Shopbycategories\Block\Homepagecategories" name="categories_display" template="vendor_Shopbycategories:categories.phtml" /> </referenceContainer> </body> </page> in layout.xml – smarttechy Nov 4 '16 at 6:59
  • in app/code/Inchoo/Helloworld/Controller/Index this path created a file named index.php where pasted your first code . now where to place last code ?? – smarttechy Nov 4 '16 at 7:00

Structure :


and then set that line to admin->content->Your page


with my code you will get like this:

enter image description here

so just set block into your category

  • no .....i dont need this......i want sub categories on categoies hover in blocks in menu bar – smarttechy Nov 4 '16 at 8:16
  • for that you need to customize menu. – Ronak Chauhan Nov 4 '16 at 8:34

After lot of struggle what i did was pics up the css of the navigation bar which i want and apply that in my own style sheet file ie: styles-l.css

.navigation .level0.active > .level-top,.navigation .level0.has-active > .level-top{
    border-color: #ff5501;border-style: solid;
    border-width: 0 0 3px;color: #333;
    text-decoration: none;
    display: inline-block
.navigation .level0.parent:hover > .submenu{overflow: visible !important}

.navigation .level0 .submenu{
background: #fff;
border: 1px solid #ccc;
box-shadow: 0 5px 5px rgba(0,0,0,0.19);
font-weight: 400;min-width: 230px;
padding: 15px 0;
display: none;
left: 0;
margin: 0 !important;
padding: 0;
position: absolute;
z-index: 1;
margin-top: 11px;
width: 800px;
.ui-menu-item {
    display: inline-block;
.navigation .level0 .submenu a {
    display: block;
    line-height: inherit;
    color: #575757;
    padding: 8px 20px;
.navigation .level0 .submenu > ul{margin-top: 11px}
.navigation .level0 .submenu > ul:before,.navigation .level0 .submenu > ul:after{
    content: '';display: block;overflow: hidden;position: absolute
.navigation .level0 .submenu > ul:before{
    color: #fff;left: 20px;top: -20px;border: 10px solid transparent;
    height: 0;width: 0;border-bottom-color: #fff;z-index: 4
.navigation .level0 .submenu > ul:after{
    border: 11px solid transparent;
    height: 0;width: 0;border-bottom-color: #ccc;color: #ccc;left: 19px;
    top: -22px;z-index: 3
.navigation .level0 .submenu a{
    display: block;line-height: inherit;
    color: #575757;padding: 8px 20px
.navigation .level0 .submenu a:hover,.navigation .level0 .submenu a.ui-state-focus{
    background: #e8e8e8;
    color: #333;text-decoration: none
.navigation .level0 .submenu .active > a{
    border-color: #ff5501;border-style: solid;
    border-width: 0 0 0 3px;color: #333

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.