6

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

daveordead
  • 81
  • 1
  • 1
  • 6

3 Answers3

6

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

Community
  • 1
  • 1
Zymotik
  • 6,412
  • 3
  • 39
  • 48
  • I've tried to sell our users on this but they are demanding sub-menu's for mobile. Their current desktop web site has it and they simple won't allow us to remove menu's from navigation. I've tried smartmenus but it has loads of problems with AngularJS and doesn't seem to work if you build the menu dynamically with directives. http://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html – Ryan Langton Nov 12 '15 at 23:11
  • I ended up creating a directive and have posted the link and answer here. – Ryan Langton Nov 23 '15 at 14:17
  • 8
    I just love it when people decide what has a place on the web and what has not... – vonwolf Feb 17 '17 at 14:23
3

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>
acolve
  • 109
  • 1
  • 3
0

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>
Ryan Langton
  • 6,294
  • 15
  • 53
  • 103