Dropdown Sub Menus / Menu #424

Closed
kevsmt opened this Issue Oct 14, 2011 · 59 comments

Comments

Projects
None yet
@kevsmt

kevsmt commented Oct 14, 2011

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

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Oct 15, 2011

Member

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.

Member

mdo commented Oct 15, 2011

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.

@mdo mdo closed this Oct 15, 2011

@kevsmt

This comment has been minimized.

Show comment
Hide comment
@kevsmt

kevsmt Oct 16, 2011

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?

kevsmt commented Oct 16, 2011

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

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Nov 9, 2011

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.

ghost commented Nov 9, 2011

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

This comment has been minimized.

Show comment
Hide comment
@bendo01

bendo01 Nov 26, 2011

please reconsider re-opening this issue.

bendo01 commented Nov 26, 2011

please reconsider re-opening this issue.

@envex

This comment has been minimized.

Show comment
Hide comment
@envex

envex Nov 26, 2011

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

envex commented Nov 26, 2011

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

@bendo01

This comment has been minimized.

Show comment
Hide comment
@bendo01

bendo01 Nov 26, 2011

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 :)

bendo01 commented Nov 26, 2011

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

This comment has been minimized.

Show comment
Hide comment
@opensas

opensas Jan 3, 2012

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

opensas commented Jan 3, 2012

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

@chrisjacob

This comment has been minimized.

Show comment
Hide comment
@chrisjacob

chrisjacob Feb 2, 2012

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

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

@chrisjacob

This comment has been minimized.

Show comment
Hide comment
@chrisjacob

chrisjacob Feb 2, 2012

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 :-)

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

This comment has been minimized.

Show comment
Hide comment
@tekmosis

tekmosis Feb 7, 2012

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

tekmosis commented Feb 7, 2012

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

@GianpaMX

This comment has been minimized.

Show comment
Hide comment
@GianpaMX

GianpaMX Feb 10, 2012

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

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

This comment has been minimized.

Show comment
Hide comment
@darthdeus

darthdeus Feb 16, 2012

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

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

@tzikis

This comment has been minimized.

Show comment
Hide comment
@tzikis

tzikis Feb 18, 2012

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

thanks in advance

tzikis commented Feb 18, 2012

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

thanks in advance

@darthdeus

This comment has been minimized.

Show comment
Hide comment
@darthdeus

darthdeus Feb 20, 2012

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

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

@Keynotelabs

This comment has been minimized.

Show comment
Hide comment
@Keynotelabs

Keynotelabs Feb 28, 2012

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>

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

This comment has been minimized.

Show comment
Hide comment
@stevebooks

stevebooks Feb 28, 2012

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

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

@darthdeus

This comment has been minimized.

Show comment
Hide comment
@darthdeus

darthdeus Feb 28, 2012

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.

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

This comment has been minimized.

Show comment
Hide comment
@stevebooks

stevebooks Feb 28, 2012

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

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

This comment has been minimized.

Show comment
Hide comment
@garrettlancaster

garrettlancaster Feb 28, 2012

+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.

+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

This comment has been minimized.

Show comment
Hide comment
@stevebooks

stevebooks Feb 28, 2012

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;
}

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

This comment has been minimized.

Show comment
Hide comment
@sergey-stukov

sergey-stukov Apr 3, 2012

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

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

@cherifya

This comment has been minimized.

Show comment
Hide comment
@cherifya

cherifya Apr 15, 2012

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

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

@michael-simons

This comment has been minimized.

Show comment
Hide comment
@michael-simons

michael-simons Apr 17, 2012

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;
}

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

This comment has been minimized.

Show comment
Hide comment
@j-hernandez

j-hernandez Apr 17, 2012

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.

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

This comment has been minimized.

Show comment
Hide comment
@bjensen

bjensen May 28, 2012

+1 to reopen

bjensen commented May 28, 2012

+1 to reopen

@shockteam

This comment has been minimized.

Show comment
Hide comment
@shockteam

shockteam Jun 14, 2012

+1 to reopen

+1 to reopen

@darthdeus

This comment has been minimized.

Show comment
Hide comment
@darthdeus

darthdeus Jun 15, 2012

+1 to reopen

+1 to reopen

@opensas

This comment has been minimized.

Show comment
Hide comment
@opensas

opensas Jun 15, 2012

+1 here too

opensas commented Jun 15, 2012

+1 here too

@amin007

This comment has been minimized.

Show comment
Hide comment
@amin007

amin007 Jun 19, 2012

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 ...

amin007 commented Jun 19, 2012

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 ...

@shockteam

This comment has been minimized.

Show comment
Hide comment
@shockteam

shockteam Jun 19, 2012

sweet! Thanks, man -- that's exactly what I want! The only two suggestions:

  1. would be nice to support more than one level
  2. display the arrow not on hover but by default, so users can see which
    menu items are expandable.

Thanks,
Dima.

On 6/19/12 6:21 AM, "amin007"
<reply+i-1908032-37aa6aa23e95d8a2a3e3c17d764b090a5f1fe74a-391154@reply.gith
ub.com> wrote:

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 ...


Reply to this email directly or view it on GitHub:
#424 (comment)

sweet! Thanks, man -- that's exactly what I want! The only two suggestions:

  1. would be nice to support more than one level
  2. display the arrow not on hover but by default, so users can see which
    menu items are expandable.

Thanks,
Dima.

On 6/19/12 6:21 AM, "amin007"
<reply+i-1908032-37aa6aa23e95d8a2a3e3c17d764b090a5f1fe74a-391154@reply.gith
ub.com> wrote:

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 ...


Reply to this email directly or view it on GitHub:
#424 (comment)

@amin007

This comment has been minimized.

Show comment
Hide comment
@anishpateluk

This comment has been minimized.

Show comment
Hide comment
@anishpateluk

anishpateluk Jun 22, 2012

+1 to reopen

+1 to reopen

@alexander-ae

This comment has been minimized.

Show comment
Hide comment
@alexander-ae

alexander-ae Jun 22, 2012

+1 to reopen

+1 to reopen

@amin007

This comment has been minimized.

Show comment
Hide comment
@amin007

amin007 Jun 26, 2012

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

amin007 commented Jun 26, 2012

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

@grandfatha

This comment has been minimized.

Show comment
Hide comment
@grandfatha

grandfatha Jun 26, 2012

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.

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

This comment has been minimized.

Show comment
Hide comment
@pmendelski

pmendelski Jun 30, 2012

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;
}

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

This comment has been minimized.

Show comment
Hide comment
@vaughany

vaughany Jul 25, 2012

+1 too. :)

+1 too. :)

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Jul 31, 2012

+1 to reopen

ghost commented Jul 31, 2012

+1 to reopen

@agriberk

This comment has been minimized.

Show comment
Hide comment
@agriberk

agriberk Aug 9, 2012

+1 to reopen

agriberk commented Aug 9, 2012

+1 to reopen

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Aug 9, 2012

Member

It's already in 2.1.0-wip :).

Member

mdo commented Aug 9, 2012

It's already in 2.1.0-wip :).

@ellisonbg

This comment has been minimized.

Show comment
Hide comment
@ellisonbg

ellisonbg Aug 12, 2012

+1 to reopen

+1 to reopen

@allesklar

This comment has been minimized.

Show comment
Hide comment
@allesklar

allesklar Aug 15, 2012

Hi markdotto,

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

Hi markdotto,

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

@ckizer

This comment has been minimized.

Show comment
Hide comment
@ckizer

ckizer Aug 16, 2012

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

ckizer commented Aug 16, 2012

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

@vaughany

This comment has been minimized.

Show comment
Hide comment
@vaughany

vaughany Aug 16, 2012

@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/

@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

This comment has been minimized.

Show comment
Hide comment
@MGaetan89

MGaetan89 Aug 16, 2012

Contributor

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

Contributor

MGaetan89 commented Aug 16, 2012

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

@cantabria

This comment has been minimized.

Show comment
Hide comment
@cantabria

cantabria Aug 18, 2012

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

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

This comment has been minimized.

Show comment
Hide comment
@interscaperob-duplicate

interscaperob-duplicate Sep 14, 2012

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?

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

This comment has been minimized.

Show comment
Hide comment
@hitangjun

hitangjun Sep 22, 2012

+1! pls reopen and get added into 2.1.2

+1! pls reopen and get added into 2.1.2

@opensas

This comment has been minimized.

Show comment
Hide comment
@opensas

opensas Sep 22, 2012

+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/twitter/bootstrap/issues/424#issuecomment-8786812.

opensas commented Sep 22, 2012

+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/twitter/bootstrap/issues/424#issuecomment-8786812.

@KimTranjan

This comment has been minimized.

Show comment
Hide comment
@KimTranjan

KimTranjan Sep 27, 2012

+1. Native implementation is always good. :)

+1. Native implementation is always good. :)

@thugsb

This comment has been minimized.

Show comment
Hide comment
@thugsb

thugsb Oct 1, 2012

-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)

thugsb commented Oct 1, 2012

-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

This comment has been minimized.

Show comment
Hide comment
@ckizer

ckizer Oct 1, 2012

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.

ckizer commented Oct 1, 2012

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

This comment has been minimized.

Show comment
Hide comment
@grandfatha

grandfatha Oct 2, 2012

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.

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.

@twittem twittem referenced this issue in wp-bootstrap/wp-bootstrap-navwalker Nov 23, 2012

Closed

Added support for multi-level dropdowns #1

@bluej100

This comment has been minimized.

Show comment
Hide comment
@bluej100

bluej100 Aug 22, 2013

Markdotto has removed submenus in version 3.0.

bf3c5e0

Markdotto has removed submenus in version 3.0.

bf3c5e0

@grandfatha

This comment has been minimized.

Show comment
Hide comment
@grandfatha

grandfatha Aug 23, 2013

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?

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

This comment has been minimized.

Show comment
Hide comment
@interscaperob-duplicate

interscaperob-duplicate Aug 23, 2013

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/twbs/bootstrap/issues/424#issuecomment-23143758.

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/twbs/bootstrap/issues/424#issuecomment-23143758.

@bluej100

This comment has been minimized.

Show comment
Hide comment
@bluej100

bluej100 Aug 23, 2013

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

mdo/ama#31

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

mdo/ama#31

@interscaperob-duplicate

This comment has been minimized.

Show comment
Hide comment
@interscaperob-duplicate

interscaperob-duplicate Aug 23, 2013

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/twbs/bootstrap/issues/424#issuecomment-23145174.

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/twbs/bootstrap/issues/424#issuecomment-23145174.

@bluej100

This comment has been minimized.

Show comment
Hide comment
@bluej100

bluej100 Aug 23, 2013

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.

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.

@twbs twbs locked and limited conversation to collaborators Jun 9, 2014

DocX pushed a commit to DocX/bootstrap that referenced this issue Sep 16, 2014

Merge pull request #424 from thomas-mcdonald/dummy
Add a dummy Rails app for testing against
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.