Angular UI multi-level Dropdown Toggle

Question

I'm trying to use the Angular UI Dropdown Toggle to create a multi-level / nested drop down.

When I click on the first level of the dropdown it simply closes up altogether and does not reveal the second tier.

I've attached a very basic plunkr to demonstrate a bare bones version of what I'm trying to achieve.

http://plnkr.co/edit/c0GbKQoYWICXwd3JRWGV?p=info

Any help, greatly appreciated.

Thanks

Answer 1

Sub-menu has been removed from Boostrap 3 as it is deemed irrelevant for mobile.

"Submenus just don't have much of a place on the web right now, especially the mobile web. They will be removed with 3.0" - https://github.com/twbs/bootstrap/pull/6342

An example that uses Bootstrap 3.0.0 (final): http://bootply.com/86684

Code from StackOverflow post: Bootstrap 3 dropdown sub menu missing

Answer 2

You can use the class "dropdown-submenu" to achieve this.

<div class="btn-group dropdown">
  <button class="dropdown-toggle">Toggle</button>
  <ul class="dropdown-menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li class="dropdown-submenu">
      Sub List
      <ul class="dropdown-menu">
        <li>Submenu Item 1</li>
        <li>Submenu Item 2</li>
      </ul>
    </li>
  </ul>
</div>

Answer 3

You can use the ng-bootstrap-submenu module to get the sub-menu you're looking for.

https://www.npmjs.com/package/ng-bootstrap-submenu

Here is a plnkr demonstrating it's usage.

<nav class="navbar navbar-default">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <a class="navbar-brand">ng-bootstrap-submenu</a>
    </div>

    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <bootstrap-submenu ng-repeat="item in menuItems" menu-item="item">
        </bootstrap-submenu>
      </ul>
    </div>
</nav>