Dropdown cascase

Ideas
1

Hi, I would like to be able to have a dropdown menu with cascade so I can have multiple submenus. Also, menu-items should be from dropdown-item class. Is this possible? http://v4-alpha.getbootstrap.com/components/dropdowns/

Thank you.

2

BSS isn't on Boostrap4 yet that's coming soon once Boostrap have released BS4

Guess the only way for you to do what you want now is ton use the custom code component and manually code what you want.

3

So here's the thing, the Bootstrap Devs (getbootstrap.com) decided to remove support for multi-tier dropdown menus in v3.

I speculate that it's related to the whole mobile first approach.

If your willing to edit the Bootstrap.js file you can try http://www.jeffmould.com/2014/01/09/responsive-multi-level-bootstrap-menu/.

However, the following may work for you from stackoverflow.com

http://stackoverflow.com/questions/23430283/bootstrap-3-multi-tier-navigation-menu-support-for-mobiles-and-up

The fiddle for it http://jsfiddle.net/mfirdaus/chJC4/

Saj

4

Do this :)

https://www.gaslampmedia.com/multilevel-dropdown-menus-bootstrap-3-x/

/**
  * NAME: Bootstrap 3 Triple Nested Sub-Menus
  * This script will active Triple level multi drop-down menus in Bootstrap 3.*
  */
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
    // Avoid following the href location when clicking
    event.preventDefault(); 
    // Avoid having the menu to close when clicking
    event.stopPropagation(); 
    // Re-add .open to parent sub-menu item
    $(this).parent().addClass('open');
    $(this).parent().find("ul").parent().find("li.dropdown").addClass('open');
});

You just have to add that snippet of JS code into one of your custom js files or create a new js file specifically for it.

You will need to position the submenu because apparently Bootstraps' designated class "dropdown-menu-right" doesn't actually position the submenu to the right, so add a class to the submenu ul.

.dropdown-menu.submenu{
   left:100%;
}

You will have to create your submenus using the custom code option because the Bootstrap app won't let you drag and drop a List into any of the Menu Items.

I was able to make this work on a new project using just this js snippet and custom coded the whole nav and copy pasted the dropdown code into the "First Item"

  1. Created new project
  2. dragged navbar to body
  3. dragged dropdown after Third Item in layout panel
  4. right clicked nav in Overview panel selected convert to HTML
  5. opened custom component copy/pasted the dropdown-menu ul code and pasted into the href code of the First Item
  6. added the span caret
  7. In the Design panel right clicked JavaScript selected create new .js
  8. opened js code, copy/pasted in js code
  9. turned on Preview and dropdown works, had to add CSS for submenu to align correctly

Hope that helps :)

Saj