Twitter Bootstrap Multilevel Dropdown Menu

Question

Is it possible to have a multi level dropdown menu by using the elements of twitter bootstrap 2  The original version doesn t have this feature

User · Answer

I just added class  span2  to the  lt li gt  for the dropdown items and that worked

User · Answer

Since Bootstrap 3 removed the submenu part and we need to adapt ourselves the style  I think it s better to go with SmartMenu Bootstrap  https   vadikom github io smartmenus src demo bootstrap-navbar html   That would save us time on mobile responsive and style   This plugin also very promising

User · Answer

Twitter Bootstrap v3   To create a n-level dropdown menu  touch device friendly  in Twitter Bootstrap v3    jsfiddle-demo of n-level dropdown menu v3 0 0   v3 1 1   v3 3 0   CSS    dropdown-menu gt li    To prevent selection of text        position relative      -webkit-user-select  none     Chrome Safari                -moz-user-select  none     Firefox        -ms-user-select  none     IE10            Rules below not implemented in browsers yet        -o-user-select  none      user-select  none      cursor pointer     dropdown-menu  sub-menu        left  100       position  absolute      top  0      display none      margin-top  -1px      border-top-left-radius 0      border-bottom-left-radius 0      border-left-color  fff      box-shadow none     right-caret after  left-caret after     content         border-bottom  5px solid transparent      border-top  5px solid transparent      display  inline-block      height  0      vertical-align  middle      width  0      margin-left 5px     right-caret after     border-left  5px solid  ffaf46     left-caret after     border-right  5px solid  ffaf46      JQuery     function            dropdown-menu  gt  li  gt  a trigger   on  click  function e           var current   this  next            var grandparent   this  parent   parent            if   this  hasClass  left-caret      this  hasClass  right-caret                  this  toggleClass  right-caret left-caret            grandparent find   left-caret   not this  toggleClass  right-caret left-caret            grandparent find   sub-menu visible   not current  hide            current toggle            e stopPropagation                    dropdown-menu  gt  li  gt  a not  trigger    on  click  function            var root   this  closest   dropdown            root find   left-caret   toggleClass  right-caret left-caret            root find   sub-menu visible   hide                  HTML    lt div class  dropdown  style  position relative  gt       lt a href     class  btn btn-primary dropdown-toggle  data-toggle  dropdown  gt Click Here  lt span class  caret  gt  lt  span gt  lt  a gt       lt ul class  dropdown-menu  gt           lt li gt               lt a class  trigger right-caret  gt Level 1 lt  a gt               lt ul class  dropdown-menu sub-menu  gt                   lt li gt  lt a href     gt Level 2 lt  a gt  lt  li gt                   lt li gt                       lt a class  trigger right-caret  gt Level 2 lt  a gt                       lt ul class  dropdown-menu sub-menu  gt                           lt li gt  lt a href     gt Level 3 lt  a gt  lt  li gt                           lt li gt  lt a href     gt Level 3 lt  a gt  lt  li gt                           lt li gt                               lt a class  trigger right-caret  gt Level 3 lt  a gt                               lt ul class  dropdown-menu sub-menu  gt                                   lt li gt  lt a href     gt Level 4 lt  a gt  lt  li gt                                   lt li gt  lt a href     gt Level 4 lt  a gt  lt  li gt                                   lt li gt  lt a href     gt Level 4 lt  a gt  lt  li gt                               lt  ul gt                           lt  li gt                       lt  ul gt                   lt  li gt                   lt li gt  lt a href     gt Level 2 lt  a gt  lt  li gt               lt  ul gt           lt  li gt           lt li gt  lt a href     gt Level 1 lt  a gt  lt  li gt           lt li gt  lt a href     gt Level 1 lt  a gt  lt  li gt       lt  ul gt   lt  div gt

User · Answer

This example is from http   bootsnipp com snippets featured multi-level-dropdown-menu-bs3  Works for me in Bootstrap v3 1 1   HTML   lt div class  container  gt   lt div class  row  gt       lt h2 gt Multi level dropdown menu in Bootstrap 3 lt  h2 gt       lt hr gt       lt div class  dropdown  gt           lt a id  dLabel  role  button  data-toggle  dropdown  class  btn btn-primary  data-target     href   page html  gt              Dropdown  lt span class  caret  gt  lt  span gt           lt  a gt           lt ul class  dropdown-menu multi-level  role  menu  aria-labelledby  dropdownMenu  gt             lt li gt  lt a href     gt Some action lt  a gt  lt  li gt             lt li gt  lt a href     gt Some other action lt  a gt  lt  li gt             lt li class  divider  gt  lt  li gt             lt li class  dropdown-submenu  gt               lt a tabindex  -1  href     gt Hover me for more options lt  a gt               lt ul class  dropdown-menu  gt                 lt li gt  lt a tabindex  -1  href     gt Second level lt  a gt  lt  li gt                 lt li class  dropdown-submenu  gt                   lt a href     gt Even More   lt  a gt                   lt ul class  dropdown-menu  gt                       lt li gt  lt a href     gt 3rd level lt  a gt  lt  li gt                       lt li gt  lt a href     gt 3rd level lt  a gt  lt  li gt                   lt  ul gt                 lt  li gt                 lt li gt  lt a href     gt Second level lt  a gt  lt  li gt                 lt li gt  lt a href     gt Second level lt  a gt  lt  li gt               lt  ul gt             lt  li gt           lt  ul gt       lt  div gt   lt  div gt      CSS   dropdown-submenu   position  relative      dropdown-submenu gt  dropdown-menu   top  0  left  100   margin-top  -6px  margin-left  -1px  -webkit-border-radius  0 6px 6px 6px  -moz-border-radius  0 6px 6px  border-radius  0 6px 6px 6px      dropdown-submenu hover gt  dropdown-menu   display  block      dropdown-submenu gt a after   display  block  content       float  right  width  0  height  0  border-color  transparent  border-style  solid  border-width  5px 0 5px 5px  border-left-color   ccc  margin-top  5px  margin-right  -10px      dropdown-submenu hover gt a after   border-left-color   fff      dropdown-submenu pull-left   float  none      dropdown-submenu pull-left gt  dropdown-menu   left  -100   margin-left  10px  -webkit-border-radius  6px 0 6px 6px  -moz-border-radius  6px 0 6px 6px  border-radius  6px 0 6px 6px

User · Answer

I was able to fix the sub-menu s always pinning to the top of the parent menu from Andres s answer with the following addition    dropdown-menu li       position  relative      I also add an icon  icon-chevron-right  on items which contain menu sub-menus  and change the icon from black to white on hover  to compliment the text changing to white and look better with the selected blue background    Here is the full less css change  replace the above with this     dropdown-menu li       position  relative        class   icon-             float  right              amp  hover              Switch to white icons on hover          class   icon-                 background-image  url     img glyphicons-halflings-white png

User · Answer

Updated Answer    Updated answer which support the v2 1 1   bootstrap version stylesheet       But be careful because this solution has been removed from v3   Just wanted to point out that this solution is not needed anymore as the latest bootstrap now supports multi-level dropdowns by default  You can still use it if you re on older versions but for those who updated to the latest  v2 1 1 at the time of writing  it is not needed anymore  Here is a fiddle with the updated default multi-level dropdown straight from the documentation   http   jsfiddle net 2Smgv 2858     Original Answer  There have been some issues raised on submenu support over at github and they are usually closed by the bootstrap developers  such as this one  so i think it is left to the developers using the bootstrap to work something out  Here is a demo i put together showing you how you can hack together a working sub-menu    Relevant code  CSS   dropdown-menu  sub-menu       left  100       position  absolute      top  0      visibility  hidden      margin-top  -1px      dropdown-menu li hover  sub-menu       visibility  visible      display  block      navbar  sub-menu 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  sub-menu after       border-top  6px solid transparent      border-left  none      border-right  6px solid  fff      border-bottom  6px solid transparent      left  10px      top  11px      left  -6px      Created my own  sub-menu class to apply to the 2-level drop down menus  this way we can position them next to our menu items  Also modified the arrow to display it on the left of the submenu group   Demo

[css] Twitter Bootstrap Multilevel Dropdown Menu

Examples related to css

Examples related to twitter-bootstrap