Multi-level Dropdown List Plugin - jQuery Dropdown Submenu

File Size: 33.8 KB
Views Total: 1814
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Multi-level Dropdown List Plugin - jQuery Dropdown Submenu

Dropdown Submenu is a jQuery plugin that converts a <select> element with option groups into a multi-level dropdown list, which improves usability, SEO, and helps make the options more accessible.

More Features:

  • Responsive. Auto disables on mobile devices.
  • Supports icons and HTML content in options.
  • Allows you to add/update options.
  • Lots of customization options.

See Also:

How to use it:

1. Download and load the Dropdown Submenu plugin's files.

<link rel="stylesheet" href="/path/to/dropdown-submenu-dist.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dropdown-submenu.min.js"></script>

2. Just call the function dropdownSubmenu on your select element and the plugin will take care of the rest.

<select id="example">
  <option value="">Choose your OS:</option>
  <optgroup label="PC">
  <optgroup label="Mac">
  <option value="other">Other</option>

3. Add icons to the beginning of the options using the data-icon attribute.

<optgroup label="Mac" data-icon="mac.png">
<option value="yosemite" data-icon="mac.png">Yosemite</option>

4. The plugin also allows HTML content (URL encoded) in options.

<option value="high-sierra" data-html-option="High%20%3Cstrong%3ESierra%3C%2Fstrong%3E%20%28HTML%29">High Sierra</option>

5. All plugin options to customize the dropdown list.


  // disable the plugin when the screen size is smaller than this value

  // Watch programmatic changes
  watchDisabled: true,  
  watchSelectClasses: true,
  watchHidden: true,  
  watchChangeVal: false,
  // copy option's classes
  copyOptionClasses:   true,
  // default CSS classes
  wrapClass: "dropdown-submenu-wrapper", 
  tuneClass: "dropdown-submenu-skin", 
  customClass: "", 

6. API methods.

// refresh

// refresh the width

// destroy

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