Dropdown Sub Menus / Menu

[kevsmt]

Is a Menu like nav buttons ever be created for bootstrap? To elaborate more, i would like to see bootstrap to include Menu like navigation w/ support for multi-level sub menus.

[mdo]

Multiple levels of dropdowns are not coming to Bootstrap. If you need the multiple levels, you should probably try another implementation of that content. It's not a great paradigm to begin with and piling on other levels never works well for users.

[kevsmt]

What i mean about Multi-Level Sub Menus are, like same things in your Menubar like: File, Edit, View, Search, Help, etc.
which you will hover/click to drop menu items, and the menuitems will have submenus to it..

Why is it not a great paradigm?

[ghost]

Sub-menus / nested menus in the navigation bar is on of the first demands I hear from webdevelopers (and there customers).
I know what you mean when you say its not beeing a great paradigm in the first place, but because it is such an old paradigm in rich-clients the demand for it is omnipresent.

So please reconsider re-opening this issue.
I think this should be available at least optional.
Lastly there are more complex mulit-layerd apps that hardly can do without it.

[bendo01]

please reconsider re-opening this issue.

[envex]

Instead of asking someone else to make a fix, why don't you fork it and create your own solution.

[bendo01]

i will try :) , but after a little search i found that santiquiss ( https://github.com/santiquiss/bootstrap ) already create it, i will test his solution first :)

[opensas]

It would indeed be a very useful addition, at least as a plugin or something... Has anybody got a demo on santiquis work???

[chrisjacob]

+1 for nested menu's as an optional feature/add-on.

[chrisjacob]

To clarify... It would be nice to have "bootstrap-dropdown.js" support infinite sub-dropdowns that fly out to the "right" of the item clicked on (changes fly out direction to "left" if bumps into browser chrome).

In the mean time I can manage with using a sidebar menu that implements nested Collapse tree's (bootstrap-collapse.js) with a "stacked tabs" menu for the final depth (ie. clicking on this item takes you to a page, and not any deeper in the hierarchy). Thanks for adding Collapse to v2.0.0 :-)

[tekmosis]

Also going to +1 this idea even after markdotto's response to the issue.

[GianpaMX]

Dropdown submenu could be done with:

.nav li.dropdown ul.dropdown-menu li:HOVER ul {
display:block;
position:absolute;
left:100%;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.nav li.dropdown ul.dropdown-menu ul {
display: none;
float:right;
position: relative;
top: auto;
margin-top: -30px;
}

at the end of bootstrap.css

Adding "dropdown-menu" class to ul menu items

[darthdeus]

big thanks to juansimp for a working solution! but still +1 for reopen, at least as an optional plugin or something

[tzikis]

juansimp or darthdeus, could you be more elaborate on the html needed for the nested dropdown menus to work?

thanks in advance

[darthdeus]

@tzikis the html is the same as if you're doing a simple dropdown, just add one more level

[Keynotelabs]

Here is some sample code:

 <ul class="nav">
  <li class="active"><a href="#">Regular link</a></li>
  <li class="dropdown" id="menu1">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
      Dropdown
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li>
        <a href="#">Separated link</a>
        <ul class="dropdown-menu">
          <li><a href="#">Sub Menu</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

[stevebooks]

@juansimp how would modify this for a button drop-down?

[darthdeus]

You don't need to modify anything, just put in one more level of nested menu with the provided CSS, and it will show up as dropdown. The markup stays the same.

[stevebooks]

The included CSS has things built around the .nav class. This does not apply when doing a button drop down. For example, the button drop-down sub menu html should look like this:

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"/>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li>
      <a href="#">Separated link</a>
      <ul class="dropdown-menu">
        <li><a href="#">Sub Menu</a></li>
      </ul>
    </li>
  </ul>
</div>

I have modified the CSS to try to account for this. Here are my changes:

.btn-group ul.dropdown-menu li:HOVER ul {
  display:block; 
  position:absolute; 
  left:100%;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.btn-group ul.dropdown-menu ul {
  display: none;
  float:right;
  position: relative;
  top: auto;
  margin-top: -30px;
}

However, this still is not working right

[garrettlancaster]

+1. I have yet to see a decent OS or sufficiently complex app without it.

I am all ears with regards to better paradigms that maintain an intuitive hierarchy and minimize space, but right now this IS the default paradigm.

[stevebooks]

Okay, I got it working with the button drop-down. Here is the modified CSS:

.btn-group ul.dropdown-menu li:HOVER ul.dropdown-menu {
  display:block; 
  position:absolute; 
  left:100%;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.btn-group ul.dropdown-menu li ul.dropdown-menu {
  display: none;
  float:right;
  position: relative;
  top: auto;
  margin-top: -30px;
}

[sergey-stukov]

@stevebooks Thank you save my time! with working example.
+1 to reopen issue.

[cherifya]

+1 to reopen issue. And thanks @juansimp for the hack.

[michael-simons]

To get the little triangle right in @juansimp solution add the following

.nav li.dropdown ul.dropdown-menu .dropdown-menu::before {
    content: '';
    display: inline-block;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent; 
    border-right:7px solid #CCC;
    border-right-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 9px;
    left: -14px;
}

.nav li.dropdown ul.dropdown-menu .dropdown-menu::after {
    content: '';
    display: inline-block;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent; 
    border-right:6px solid white;
    position: absolute;
    top: 10px;
    left: -12px;
}

[j-hernandez]

Thanks to @juansimp, @stevebooks, @darthdeus, and @Keynotelabs - I just needed a single subdrop to fly out right from both button groups and nav lists and the examples you provided got me going quickly. Certainly understand not wanting to maintain it as part of the toolkit, could get hairy pretty quickly.

[bjensen]

+1 to reopen

[shockteam]

+1 to reopen

[darthdeus]

+1 to reopen

[opensas]

+1 here too

[amin007]

this my code Multi-Level Sub Menus use bootstrap 2.0.1

http://peribadi.amin007.org/js/cth_bootstrap/nav-sendiri.php

any comment? but only 1 level ...

[alexander-ae]

+1 to reopen

[amin007]

i found in - http://jsfprimefacesblog.blogspot.com/2012/05/bootstrap-multilevel-dropdown-menu.html
http://jsfiddle.net/4nMkh/4/

javascrip
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
jQuery('.submenu').hover(function () {
jQuery(this).children('ul').removeClass('submenu-hide').addClass('submenu-show');
}, function () {
jQuery(this).children('ul').removeClass('.submenu-show').addClass('submenu-hide');
}).find("a:first").append(" » ");

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

css

.submenu-show
{
border-radius: 3px;
display: block;
left: 100%;
margin-top: -25px !important;
moz-border-radius: 3px;
position: absolute;
webkit-border-radius: 3px;
}
.submenu-hide
{
display: none !important;
float: right;
position: relative;
top: auto;
}
.navbar .submenu-show:before
{
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .submenu-show:after
{
border-bottom: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-top: 6px solid transparent;
left: 10px;
left: -6px;
top: 11px;

}​

html

Project name

• Go To
  • Level 1
    • Level 1.1
      • Level 1.1.1
      • Level 1.1.2
      • Level 1.1.3
      • Level 1.1.4
    • Level 1.2
      • Level 1.2.1
      • Level 1.2.2
    • Level 1.3
    • Level 1.4
    • Level 1.5
  • Other

​

[grandfatha]

Not including this highly demanded feature will lead to it being poorly implemented over and over again, thus hurting the user experience in the long run. Just because it is not right for Twitter does not mean it is universally wrong.

[pmendelski]

I simply pasted this in css file and multilevel submenus seem to work correctly (checked only on Chrome 18.0.1025.151). I am not a css ninja, and this probably can be an example of "poor implementation" but I needed a fast fix.

.nav li.dropdown ul.dropdown-menu li:HOVER ul.dropdown-menu li:HOVER.dropdown > ul.dropdown-menu,
.nav li.dropdown ul.dropdown-menu li:HOVER ul.dropdown-menu {
    display:block;
    position:absolute;
    left:100%;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.nav li.dropdown ul.dropdown-menu li:HOVER ul.dropdown-menu li.dropdown > ul.dropdown-menu, 
.nav li.dropdown ul.dropdown-menu ul.dropdown-menu {
    display: none;
    float:right;
    position: relative;
    top: auto;
    margin-top: -30px;
}

.nav li.dropdown ul.dropdown-menu .dropdown-menu::before {
    content: '';
    display: inline-block;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent; 
    border-right:7px solid #CCC;
    border-right-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 9px;
    left: -14px;
}

.nav li.dropdown ul.dropdown-menu .dropdown-menu::after {
    content: '';
    display: inline-block;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent; 
    border-right:6px solid white;
    position: absolute;
    top: 10px;
    left: -12px;
}

[vaughany]

+1 too. :)

[ghost]

+1 to reopen

[agriberk]

+1 to reopen

[mdo]

It's already in 2.1.0-wip :).

[ellisonbg]

+1 to reopen

[allesklar]

Hi markdotto,

Glad to know it's been implemented. Any guidance on how to use it?

[ckizer]

Has this been implemented in the latest bootstrap and how do I use it?

[vaughany]

@ckizer I belive this will be in 2.1 which is available on the 'wip' branch (work in progress) which is due to go live (production ready) on Monday 20th August: http://blog.getbootstrap.com/2012/08/13/help-test-bootstrap-2-1/

[MGaetan89]

For those of you asking how to use it, have a look here and scroll to the Sub menus on dropdowns section ;)

[cantabria]

I implemented a javascript version of submenu; it seams to me compliant with standard bootstrap menu behavior.
If you are interest, you can find an explanation here

[interscaperob-duplicate]

If you want your submenu to open to the left instead of the right (for example, if you have a .pull-right dropdown) then add this to dropdowns.less:

// Left-opening Sub menus
// ---------------------------
.dropdown-submenu-left {
  position: relative;
}
.dropdown-submenu-left > .dropdown-menu {
  top: 0;
  left: -100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 6px 0px 6px 6px;
     -moz-border-radius: 6px 0px 6px 6px;
          border-radius: 6px 0px 6px 6px;
}
.dropdown-submenu-left:hover > .dropdown-menu {
  display: block;
}

.dropdown-submenu-left > a:before {
  display: block;
  content: "  ";
  float: left;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 5px 5px 0px;
  border-right-color: darken(@dropdownBackground, 20%);
  margin-top: 5px;
  margin-left: -10px;
}
.dropdown-submenu-left:hover > a:after {
  border-right-color: @dropdownLinkColorHover;
}

Hope that helps someone. Maybe it could get added to 2.1.2?

[hitangjun]

+1! pls reopen and get added into 2.1.2

[opensas]

+1, add it to next version

On Sat, Sep 22, 2012 at 5:52 AM, John notifications@github.com wrote:

+1! pls reopen and get added into 2.1.2

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/424#issuecomment-8786812.

[KimTranjan]

+1. Native implementation is always good. :)

[thugsb]

-1. No.

@markdotto you had it right when you originally claimed this is not good for users. Please do NOT add any more layers beyond the one submenu!

@ everyone else: Multiple layers of dropdown menus are not good for users. If you're using Bootstrap, you're building websites for Users, not for clients, or for designers, or for anyone else. If a client wants it, let them know that they are asking for something considered to be BAD PRACTICE, and refuse to do it for them. If a designer wants it, tell them to become a real designer and start thinking about the Users, not their vain concept of prettiness. We, the developers of the web, are the final line of defence against giving the user a bad experience. Do your job! (but make sure you're having fun while you do it)

[ckizer]

stu, it's already been implemented. 90% of the time it's a bad user experience. But some of the web applications we use for charting and such require these features. It's not always a poor user experience. But I agree with you in general. I often find myself using them when I'm building a rapid prototype application for internal use, and need to mimic a desktop application.

It's a personal choice, but they are useful for my projects and have been in v2.1

–––––––––––––––––––
Cheers,

Court Kizer
kizer@me.com
“We are the universe experiencing itself”

On Oct 1, 2012, at 1:59 PM, Stu Basden notifications@github.com wrote:

-1. No.

@markdotto you had it right when you originally claimed this is not good for users. Please do NOT add any more layers beyond the one submenu!

@ everyone else: Multiple layers of dropdown menus are not good for users. If you're using Bootstrap, you're building websites for Users, not for clients, or for designers, or for anyone else. If a client wants it, let them know that they are asking for something considered to be BAD PRACTICE, and refuse to do it for them. If a designer wants it, tell them to become a real designer and start thinking about the Users, not their vain concept of prettiness. We, the developers of the web, are the final line of defence against giving the user a bad experience. Do your job! (but make sure you're having fun while you do it)

—
Reply to this email directly or view it on GitHub.

[grandfatha]

thugsb: But if your users actually ask for it, you are out of luck with that dogma. Users will benefit if it is done properly with hoverIntents, but if it is left to the developers it will be implemented over and over again everytime in a shitty way.

[bluej100]

Markdotto has removed submenus in version 3.0.

bf3c5e0

[grandfatha]

That is bad news unfortunately. I wanted to use these submenus for selecting nodes of a tree.

Just out of interest: How do you guys solve the problem of selecting 1 to n entries of a taxonomy across the different devices? Back in the day you had a Tree widget with checkboxes, but in our post-pc/mobile world, this is no longer working.

If even these submenus arent good enough, how do you solve it?

[interscaperob-duplicate]

There is an aria-haspopup attribute that works on the root node of the item that will be a submenu, but I have no idea if the bootstrap team has looked into implementing it. I was planning on testing it with BS3 to see if it worked.

Sent from my Windows Phone

---

From: grandfathamailto:notifications@github.com
Sent: ý8/ý23/ý2013 1:11 AM
To: twbs/bootstrapmailto:bootstrap@noreply.github.com
Cc: Robert McLawsmailto:robert@interscapeusa.com
Subject: Re: [bootstrap] Dropdown Sub Menus / Menu (#424)

That is bad news unfortunately. Just out of interest: How do you guys solve the problem of selecting 1 to n entries of a taxonomy beyond the different devices. Back in the day you had a Tree widget with checkboxes, but in our post-pc/mobile world, this is no longer working.

If even these submenus arent good enough, how do you solve it?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/424#issuecomment-23143758.

[bluej100]

rob, @mdo clarified for me today that accessibility is not his primary concern here.

mdo/ama#31

[interscaperob-duplicate]

Well, @mdo is not always right, and plenty of apps need submenus. Feel free to release a plugin to help, and I'll contribute.

Sent from my Windows Phone

---

From: Braden Andersonmailto:notifications@github.com
Sent: ý8/ý23/ý2013 2:10 AM
To: twbs/bootstrapmailto:bootstrap@noreply.github.com
Cc: Robert McLawsmailto:robert@interscapeusa.com
Subject: Re: [bootstrap] Dropdown Sub Menus / Menu (#424)

rob, @mdohttps://github.com/mdo clarified for me today that accessibility is not his primary concern here.

mdo/ama#31mdo/ama#31

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/424#issuecomment-23145174.

[bluej100]

FYI, grandfatha, you may be interested in https://github.com/silviomoreto/bootstrap-select . It doesn't allow arbitrary nesting, but it does make it easy to use dropdowns for selection, and you could at least categorize things with headings.