NAVBAR

Ideas
1

how to put 2nd level menu in navbar?

  • 1stlevel -2ndlevel
  • 1stlevel -2ndlevel -3rdlevel
2

They are called dropdowns, you need to add them to the menu, they are on the Components list.

3

The app will not allow you to add a dropdown within a dropdown. You will need to use Custom Code for that.

HTML

<nav class="navbar navbar-light navbar-expand-md">
    <div class="container-fluid">
        < a href="#" class="navbar-brand">Brand< /a>
        < button data-toggle="collapse" data-target="#navcol-1" class="navbar-toggler">
            < span class="sr-only">Toggle navigation< /span>
            < span class="navbar-toggler-icon">< /span>
        < /button>
        <div class="collapse navbar-collapse" id="navcol-1">
            <ul class="nav navbar-nav">
                <li role="presentation" class="nav-item">< a href="#" class="nav-link active">First Item< /a></li>
                <li role="presentation" class="nav-item">< a href="#" class="nav-link">Second Item< /a></li>
                <li role="presentation" class="nav-item">< a href="#" class="nav-link">Third Item< /a></li>
                <li class="dropdown">
                    < a class="dropdown-toggle nav-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#">Dropdown< /a>
                    <ul class="dropdown-menu" role="menu">
                        <li role="presentation" class="nav-item">< a class="nav-link" href="#">First Item< /a></li>
                        <li class="dropdown submenu">
                            < a class="submenu-link nav-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#">Dropdown< /a>
                            <ul class="dropdown-menu" role="menu">
                                <li role="presentation" class="nav-item">< a class="nav-link" href="#">First Item< /a></li>
                                <li role="presentation" class="nav-item">< a class="nav-link" href="#">Second Item< /a></li>
                                <li role="presentation" class="nav-item">< a class="nav-link" href="#">Third Item< /a></li>
                                <li class="dropdown submenu">
                                    < a class="submenu-link nav-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#">Dropdown< /a>
                                    <ul class="dropdown-menu" role="menu">
                                        <li role="presentation" class="nav-item">< a class="nav-link" href="#">First Item< /a></li>
                                        <li role="presentation" class="nav-item">< a class="nav-link" href="#">Second Item< /a></li>
                                        <li role="presentation" class="nav-item">< a class="nav-link" href="#">Third Item< /a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li role="presentation" class="nav-item">< a class="nav-link" href="#">Second Item< /a></li>
                        <li role="presentation" class="nav-item">< a class="nav-link" href="#">Third Item< /a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

CSS

.navbar-nav .nav-link {
  padding-right:.5rem;
  padding-left:.5rem;
}

.submenu {
  position:relative;
}

.submenu .dropdown-menu {
  top:0;
  left:100%;
  margin-top:-1px;
}

JS Code

$(function(){
    function toggleSubMenu(submenu){
    submenu.next(".dropdown-menu").toggleClass("show");
    (submenu.next(".dropdown-menu").hasClass("show")) ? submenu.attr("aria-expanded",true) : submenu.attr("aria-expanded",false);
    }
  $(".submenu-link").on("click", function(e){
    e.preventDefault();
    e.stopPropagation();
    toggleSubMenu($(this));
  });
});

Things to keep in mind.

First the HTML code above I added in spaces in the tags of [a,span,button] in the hopes the forum doesn't munch it. Whomever is going to use it will need to remove those spaces. Secondly, the additional dropdowns do not collapse when you click away. Just going to have to live with that. I tried for awhile on figuring a way to make it work. No go. You have to click that dropdown again to get that level to collapse.

Saj