jQuery Plugin To Create Multi-level Bootstrap Dropdowns - Bootstrap Submenu

jQuery Plugin To Create Multi-level Bootstrap Dropdowns - Bootstrap Submenu

A jQuery plugin that extends the default Bootstrap dropdown component to create a multi-level dropdown with unlimited sub menus.


$ npm install bootstrap-submenu
# Bower
$ bower install bootstrap-submenu

How to use it:

1. Include the jQuery library and Bootstrap framework in your web page.

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

2. Include the jQuery Bootstrap Submenu plugin's JS and CSS in the web page.

<link rel="stylesheet" href="path/to/bootstrap-submenu.min.css">
<script src="path/to/bootstrap-submenu.min.js"></script>

3. Create a basic Bootstrap dropdown with multiple sub menus using nested Html listed.

<div class="dropdown">
  <button class="btn btn-default" type="button" data-toggle="dropdown">
    <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
  <li><a tabindex="0">Action</a></li>
  <li class="dropdown-submenu">
    <a tabindex="0" data-toggle="dropdown">Another action</a>
    <ul class="dropdown-menu">
      <li class="dropdown-header">Dropdown header</li>
      <li><a tabindex="0">Sub action</a></li>
      <li class="disabled"><a tabindex="0">Another sub action</a></li>
      <li><a tabindex="0">Something else here</a></li>
  <li><a tabindex="0">Something else here</a></li>
  <li class="divider"></li>
  <li><a tabindex="0">Separated link</a></li>

4. Enable the multi-level Bootstrap dropdown with one JS call.

$('.dropdown-submenu > a').submenupicker();

Change log:


  • v2.0.4


  • Update LICENSE file and dependencies

This awesome jQuery plugin is developed by vsn4ik. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 14.01.2018
  • Source