@@if (typeof pages !== 'undefined' && pages.length) {
    @effects.openTag
    <nav class="@classNames" data-responsive-menu="@(responsive.responsive !== 'none')" data-responsive-levels="@responsive.responsiveLevels">
        @if(responsive.responsive !== 'none') {
            @include("responsive")
            <div class="navbar-collapse collapse">
        }
            @hmenu.effects.openTag
            <div class="@hmenu.classNames clearfix">
                <div class="@containerInner">
                    @hmenu.menu.effects.openTag
                    <ul class="@hmenu.menu.classNames nav @hmenu.menu.type @hmenu.menu.align">
                        @@{
                            var pageParents = page.parents ? page.parents : [];
                            var filterItems = function (items) {
                                return items.filter(function (i) {
                                    return i.showInHMenu;
                                });
                            };

                            var inParents = function (id) {
                                return pageParents.some(function (i) {
                                    return i.id === id;
                                });
                            };
                        }
                        @@function renderHMenuLevels(items) {
                            @@{ var items = filterItems(items); }
                            @@if (items.length) {
                                <div class="@hmenu.subMenu.Menu.classNames-popup">
                                    <ul class="@hmenu.subMenu.Menu.classNames">
                                    @@for (var i = 0; i < items.length; i++) {
                                        @@{
                                            var item = items[i];
                                            var isActive = inParents(item.id) || page.id === item.id;
                                            var itemHref = item.customUrl || (pathToRoot + item.filePath);
                                        }
                                        <li class="@hmenu.subMenu.Menu.item.classNames">
                                            <a @@if (isActive) { class="active" } title="@@(item.titleInBrowser)" href="@@(itemHref)" @@if (item.target) { target="@@(item.target)" }>@@(item.caption)</a>
                                            @@if (item.children) {
                                                @@(renderHMenuLevels(item.children))
                                            }
                                        </li>
                                    }
                                    </ul>
                                </div>
                            }
                        }
                        @@{ var items = filterItems(pages); }
                        @@for (var i = 0; i < items.length; i++) {
                            @@{
                                var item = items[i];
                                var isActive = inParents(item.id) || page.id === item.id;
                                var itemHref = item.customUrl || (pathToRoot + item.filePath);
                            }
                            <li class="@hmenu.menu.item.classNames">
                                <a @@if (isActive) { class="active" } title="@@(item.titleInBrowser)" href="@@(itemHref)" @@if (item.target) { target="@@(item.target)" }>@@(item.caption)</a>
                                @@if (item.children) {
                                    @@(renderHMenuLevels(item.children))
                                }
                            </li>
                        }
                    </ul>
                    @hmenu.menu.effects.closeTag
                </div>
            </div>
            @hmenu.effects.closeTag
        @if(responsive.responsive !== 'none') {
            </div>
        }
    </nav>
    @effects.closeTag
}