How to create a nested catalog menu in the top panel

An example of the implementation is available on the demo marketplace - https://marketplace.web-automation.ru/

How to implement such a menu: 

1. In CommonStyle, add a link to the CSS file with the content(/js/catmenu/catmenu.css):

.cat-menu {
    display: none;
    width: 200px;
}

.cat-menu-dropdown.show .cat-menu {
    display: block;
    position: absolute;
    z-index: 2;
}

    .cat-menu-dropdown.show .cat-menu > ul {
        margin-bottom: 0;
    }

.cat-menu-group {
    width: 200px;
    page-break-inside: avoid;
}

.cat-menu-additionalContent {
    width: 200px;
}

.cat-menu-groups {
    column-count: 3;
    column-gap: 10px;
}

.cat-menu-item-content {
    display: none;
    position: absolute;
    left: 200px;
    z-index: 99;
    top: 0px;
}

.cat-menu-item.show .cat-menu-item-content {
    display: block;
}

.cat-menu-item-label > a:hover {
    text-decoration: none;
}

.cat-menu-item.show .cat-menu-item-label {
    z-index: 100;
}

.cat-menu-img {
    max-width: 160px;
    max-height: 160px;
}
@media (max-width: 768px) {
    .cat-menu-item-content {
        position: static;
    }

    .cat-menu-groups {
        column-count: 1;
    }
}

2. In the CommonScripts setting, add the script (/js/catmenu/catmenu.js):

as.catMenu = {
    init: function () {
        $('.cat-menu-cont').removeClass('hide');
        $(document).on('click', '.cat-menu-dropdown-toggle', function () {
            let $dropdown = $('.cat-menu-dropdown');
            let $menuItems = $('.cat-menu-item');
            $dropdown.toggleClass('show');
            $menuItems.removeClass('show');
        });

        $(document).on('click', function (e) {
            let $dropdown = $('.cat-menu-dropdown');
            let $menuItems = $('.cat-menu-item');
            if (!$dropdown.has(e.target).length) {
                $dropdown.removeClass('show');
                $menuItems.removeClass('show');
            }
        });

        $(document).on('click', '.cat-menu-item-label', function () {
            let $menuItems = $('.cat-menu-item');
            let $item = $(this).closest('.cat-menu-item');
            $menuItems.not($item).removeClass('show');
            $item.toggleClass('show');
        });
    }
}

$(function () {
    as.catMenu.init();
});

3. Adding the markup via the HTML block in getLayout SELECT 1 to the parameter TopNavbarText

declare @catalogMenu2 nvarchar(max) =''
@catalogMenuTitle nvarchar(max) = ''

exec [dbo].[as_block]
		@code ='catalogMenu2',
		@itemID =0,
		@parameters = default,
		@res = @catalogMenu2  OUTPUT

select @catalogMenu2 TopNavbarText

4. We implement the HTML block (via the SQL block function): https://pastebin.com/iD0ivmcQ

A pure markup option without an HTML block: 

<div class="cat-menu-cont hide">
	<div class="cat-menu-dropdown position-relative d-inline-block">
    <a href="#" class="btn-sm mx-2 btn btn-light  d-inline-block cat-menu-dropdown-toggle"><i class="fas fa-bars"></i></a>
    <div class="cat-menu shadow-sm mt-1">
      <header class="p-2 bg-light font-weight-bold"><i class="fas fa-list"></i> Categories</header>
	  <ul class="list-unstyled position-relative">
        <li class="cat-menu-item border-bottom">
          <div class="cat-menu-item-label position-relative p-2 bg-white">
            <a href="#" class="text-dark"><i class="fas fa-mobile-alt"></i> Phone numbers</a>
          </div>
          <div class="cat-menu-item-content shadow-sm bg-white">
            <div class="d-flex flex-wrap flex-md-nowrap">
              <ul class="list-unstyled cat-menu-groups p-2">
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Categories 1</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Subcategory 1</a></li>
                    <li><a href="#" class="text-dark">Subcategory 2</a></li>
                    <li><a href="#" class="text-dark">Subcategory 3</a></li>
                    <li><a href="#" class="text-dark">Subcategory 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Category 2</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Subcategory 1</a></li>
                    <li><a href="#" class="text-dark">Subcategory 2</a></li>
                    <li><a href="#" class="text-dark">Subcategory 3</a></li>
                    <li><a href="#" class="text-dark">Subcategory 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Category 3</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Subcategory 1</a></li>
                    <li><a href="#" class="text-dark">Subcategory 2</a></li>
                    <li><a href="#" class="text-dark">Subcategory 3</a></li>
                    <li><a href="#" class="text-dark">Subcategory 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Category 4</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Subcategory 1</a></li>
                    <li><a href="#" class="text-dark">Subcategory 2</a></li>
                    <li><a href="#" class="text-dark">Subcategory 3</a></li>
                    <li><a href="#" class="text-dark">Subcategory 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Category 5</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Subcategory 1</a></li>
                    <li><a href="#" class="text-dark">Subcategory 2</a></li>
                    <li><a href="#" class="text-dark">Subcategory 3</a></li>
                    <li><a href="#" class="text-dark">Subcategory 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Category 1</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Subcategory 1</a></li>
                    <li><a href="#" class="text-dark">Subcategory 2</a></li>
                    <li><a href="#" class="text-dark">Subcategory 3</a></li>
                    <li><a href="#" class="text-dark">Subcategory 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Category 2</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Subcategory 1</a></li>
                    <li><a href="#" class="text-dark">Subcategory 2</a></li>
                    <li><a href="#" class="text-dark">Subcategory 3</a></li>
                    <li><a href="#" class="text-dark">Subcategory 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Category 3</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Subcategory 1</a></li>
                    <li><a href="#" class="text-dark">Subcategory 2</a></li>
                    <li><a href="#" class="text-dark">Subcategory 3</a></li>
                    <li><a href="#" class="text-dark">Subcategory 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Category 4</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Subcategory 1</a></li>
                    <li><a href="#" class="text-dark">Subcategory 2</a></li>
                    <li><a href="#" class="text-dark">Subcategory 3</a></li>
                    <li><a href="#" class="text-dark">Subcategory 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Category 5</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Subcategory 1</a></li>
                    <li><a href="#" class="text-dark">Subcategory 2</a></li>
                    <li><a href="#" class="text-dark">Subcategory 3</a></li>
                    <li><a href="#" class="text-dark">Subcategory 4</a></li>
                  </ul>
                </li>
              </ul>
              <div class="cat-menu-additionalContent d-flex flex-wrap align-content-start">
                <div class="p-2 m-1 text-center border flex-grow-1">STUFF</div>
                <div class="p-2 m-1 text-center border flex-grow-1">STUFF</div>
                <div class="p-2 m-1 text-center border flex-grow-1">STUFF</div>
                <div class="p-2 m-1 text-center border flex-grow-1">STUFF</div>
                <div class="p-2 m-1 text-center border flex-grow-1">STUFF</div>
                <div class="p-2 m-1 text-center border flex-grow-1">STUFF</div>
              </div>
            </div>
          </div>
        </li>
        <li class="cat-menu-item">
          <div class="cat-menu-item-label position-relative p-2 bg-white">
            <a href="#" class="text-dark"><i class="fas fa-carrot"></i> Vegetables</a>
          </div>
          <div class="cat-menu-item-content shadow-sm bg-white">
            <div class="d-flex flex-wrap flex-md-nowrap">
              <ul class="list-unstyled cat-menu-groups p-2">
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Category 6</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Subcategory 1</a></li>
                    <li><a href="#" class="text-dark">Subcategory 2</a></li>
                    <li><a href="#" class="text-dark">Subcategory 3</a></li>
                    <li><a href="#" class="text-dark">Subcategory 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Category 7</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Subcategory 1</a></li>
                    <li><a href="#" class="text-dark">Subcategory 2</a></li>
                    <li><a href="#" class="text-dark">Subcategory 3</a></li>
                    <li><a href="#" class="text-dark">Subcategory 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Category 8</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Subcategory 1</a></li>
                    <li><a href="#" class="text-dark">Subcategory 2</a></li>
                    <li><a href="#" class="text-dark">Subcategory 3</a></li>
                    <li><a href="#" class="text-dark">Subcategory 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Category 9</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Subcategory 1</a></li>
                    <li><a href="#" class="text-dark">Subcategory 2</a></li>
                    <li><a href="#" class="text-dark">Subcategory 3</a></li>
                    <li><a href="#" class="text-dark">Subcategory 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Category 10</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Subcategory 1</a></li>
                    <li><a href="#" class="text-dark">Subcategory 2</a></li>
                    <li><a href="#" class="text-dark">Subcategory 3</a></li>
                    <li><a href="#" class="text-dark">Subcategory 4</a></li>
                  </ul>
                </li>
              </ul>
              <div class="cat-menu-additionalContent d-flex flex-wrap align-content-start">
                <div class="p-2 m-1 text-center border flex-grow-1">STUFF</div>
                <div class="p-2 m-1 text-center border flex-grow-1">STUFF</div>
                <div class="p-2 m-1 text-center border flex-grow-1">STUFF</div>
                <div class="p-2 m-1 text-center border flex-grow-1">STUFF</div>
                <div class="p-2 m-1 text-center border flex-grow-1">STUFF</div>
                <div class="p-2 m-1 text-center border flex-grow-1">STUFF</div>
              </div>
            </div>
          </div>
        </li>
      </ul>


    </div>
  </div>
</div>

Falcon Space is a functional web development platform on a narrow stack MS SQL/Bootstrap. Falcon Space Gettting started
{sp-shortDemostandLinks}