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

Community · Accepted Answer · 2017-05-23 12:34:06Z

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

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered Dec 9, 2014 at 16:14

Zymotik

7,5374 gold badges45 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ryan Langton Over a year ago

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. vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html

Ryan Langton Over a year ago

I ended up creating a directive and have posted the link and answer here.

vonwolf Over a year ago

I just love it when people decide what has a place on the web and what has not...

acolve · Accepted Answer · 2014-09-04 16:31:24Z

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>

answered Sep 4, 2014 at 16:31

acolve

1191 silver badge3 bronze badges

Comments

Ryan Langton · Accepted Answer · 2016-07-27 14:53:35Z

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>

edited Jul 27, 2016 at 14:53

answered Nov 23, 2015 at 0:39

Ryan Langton

6,18016 gold badges56 silver badges105 bronze badges

2 Comments

Paul Gorbas Over a year ago

plnkr links to an empty plunker. Code as written does not work by itself.

Ryan Langton Over a year ago

not sure why the link stopped working.. I corrected it and as you can see in the plnk, it does work

Collectives™ on Stack Overflow

Angular UI multi-level Dropdown Toggle

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related