###@positionName###
###@_megaClass###
###@(hmenu.megaMenu.width)###
###@(hmenu.megaMenu.customWidth)###
###@(hmenu.megaMenu.grid.items[0].width_lg || hmenu.megaMenu.grid.items[0].width || hmenu.megaMenu.grid.items[0].width_sm || hmenu.megaMenu.grid.items[0].width_xs ? '1' : '0')###
@effects.openTag
<nav class="@classNames" @(_attrs)>
    @if(responsive.responsive !== "none") {
        @include("hmenu/offcanvasMenu/overlay")
        @include("responsive")
        <div class="navbar-collapse collapse @if (responsive.type === 'offcanvas' || responsive.type === 'offcanvas-shifted'){width}">
    }

        @hmenu.effects.openTag
        <div class="@(hmenu.classNames) @(hmenu.editorClass) clearfix">
            <div class="@containerInner">
                @if (showHeader) {
                    @include("header")
                }
                @hmenu.menu.effects.openTag
                <ul class="@(hmenu.menu.classNames) @(hmenu.menu.editorClass) nav @hmenu.menu.type @hmenu.menu.align">
                    @hmenu.menu.item.effects.openTag
                    <li class="@(hmenu.menu.item.classNames) @(hmenu.menu.item.editorClass) bd-toplevel-item">
                        <a href="#" class="active">Item 1</a>
                        <div class="@hmenu.subMenu.Menu.name-@hmenu.subMenu.Menu.id-popup">
                            @hmenu.subMenu.Menu.effects.openTag

                            @if (levels === 'megamenu') {
                                <div class="@(hmenu.subMenu.Menu.classNames) @(hmenu.subMenu.Menu.editorClass) bd-mega-grid @(hmenu.megaMenu.grid.classNames) @(hmenu.megaMenu.grid.editorClass)">
                                    <div class="container-fluid">
                                        <div class="separated-grid row">
                                            @hmenu.subMenu.Menu.item.effects.openTag
                                            <div class="@(hmenu.subMenu.Menu.item.classNames) @(hmenu.subMenu.Menu.item.editorClass) bd-mega-item @(hmenu.megaMenu.categoryItem.classNames) @(hmenu.megaMenu.categoryItem.editorClass) @(hmenu.megaMenu.grid.items[0]._itemClass)">
                                                <div class="@(hmenu.megaMenu.grid.items[0].classNames) @(hmenu.megaMenu.grid.items[0].editorClass)">
                                                    <a class="" href="#">SubItem 1</a>
                                                    <div class="@hmenu.subMenu.Menu.name-@hmenu.subMenu.Menu.id-popup bd-megamenu-popup">
                                                        <ul class="@(hmenu.subMenu.Menu.classNames) @(hmenu.subMenu.Menu.editorClass)">
                                                            <li class="@(hmenu.subMenu.Menu.item.classNames) @(hmenu.subMenu.Menu.item.editorClass) bd-mega-item @(hmenu.megaMenu.subCategoryItem.classNames) @(hmenu.megaMenu.subCategoryItem.editorClass)">
                                                                <a class="" href="#">SubSubItem1</a>
                                                            </li>
                                                            <li class="@(hmenu.subMenu.Menu.item.classNames) @(hmenu.subMenu.Menu.item.editorClass) bd-mega-item @(hmenu.megaMenu.subCategoryItem.classNames) @(hmenu.megaMenu.subCategoryItem.editorClass)">
                                                                <a class="" href="#">SubSubItem2</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            @hmenu.subMenu.Menu.item.effects.closeTag

                                            @hmenu.subMenu.Menu.item.effects.openTag
                                            <div class="@(hmenu.subMenu.Menu.item.classNames) @(hmenu.subMenu.Menu.item.editorClass) bd-mega-item @(hmenu.megaMenu.categoryItem.classNames) @(hmenu.megaMenu.categoryItem.editorClass) @(hmenu.megaMenu.grid.items[0]._itemClass)">
                                                <div class="@(hmenu.megaMenu.grid.items[0].classNames) @(hmenu.megaMenu.grid.items[0].editorClass) bd-grid-item">
                                                    <a class="" href="#">SubItem 2</a>
                                                </div>
                                            </div>
                                            @hmenu.subMenu.Menu.item.effects.closeTag
                                        </div>
                                    </div>
                                </div>
                            } else {
                                <ul class="@(hmenu.subMenu.Menu.classNames) @(hmenu.subMenu.Menu.editorClass)">
                                    @hmenu.subMenu.Menu.item.effects.openTag
                                    <li class="@(hmenu.subMenu.Menu.item.classNames) @(hmenu.subMenu.Menu.item.editorClass)">
                                        <a class="" href="#">SubItem 1</a>
                                    </li>
                                    @hmenu.subMenu.Menu.item.effects.closeTag

                                    @hmenu.subMenu.Menu.item.effects.openTag
                                    <li class="@(hmenu.subMenu.Menu.item.classNames) @(hmenu.subMenu.Menu.item.editorClass)">
                                        <a class="" href="#">SubItem 2</a>
                                    </li>
                                    @hmenu.subMenu.Menu.item.effects.closeTag
                                </ul>
                            }

                            @hmenu.subMenu.Menu.effects.closeTag
                        </div>
                    </li>
                    @hmenu.menu.item.effects.closeTag

                    @hmenu.menu.item.effects.openTag
                    <li class="bd-toplevel-item @(hmenu.menu.item.classNames) @(hmenu.menu.item.editorClass)">
                        <a href="#">Item 2</a>
                    </li>
                    @hmenu.menu.item.effects.closeTag

                    @hmenu.menu.item.effects.openTag
                    <li class="bd-toplevel-item @(hmenu.menu.item.classNames) @(hmenu.menu.item.editorClass)">
                        <a href="#">Item 3</a>
                    </li>
                    @hmenu.menu.item.effects.closeTag
                </ul>
                @hmenu.menu.effects.closeTag
                @if (showFooter) {
                    @include("footer")
                }
            </div>
        </div>
        @hmenu.effects.closeTag

        @include("hmenu/offcanvasMenu/closeIcon")

    @if(responsive.responsive !== "none") {
        </div>
    }
</nav>
@effects.closeTag