Droplist Plugin for jQuery

Droplist is a tiny (2k minified) plugin that converts a breadcrumb trail or folder tree (or any <ul> for that matter) in to a dynamic dropdown menu, but only when you've run out of horizontal space.

Demo

Examples available at brianrhea.github.io/droplist

How to Use

• Download and include the javascript source in your document: /path/to/jquery.droplist.min.js
• As well as the css: /path/to/jquery.droplist.min.css
• Droplist uses Underscore.js, so if you're not already using it, be sure to include it as well. //cdnjs.cloudflare.com/ajax/libs/underscore-contrib/0.1.4/underscore-contrib.min.js
• Add droplist as a class to any <ul> in the document
• Specify a width for the <ul class="droplist"> in your own css source, i.e.:

.droplist {
  width: 200px;
}

• Call .droplist()

$(document).ready(function(){
  $('.droplist').droplist();
});

Options

overflow

Where should Droplist enforce the defined width and create the dropdown?

default: 'left'
options: 'left', 'right'

ellipsis

What should Droplist show after the last visible <li>? Set to false to hide the ellipsis.

default: '…'
options: 'string', false

dropicon

If you're using the Font Awesome icon library, Droplist allows you to pass in a font-awesome class that will be used for the dropdown icon. If you aren't using FA, don't worry, Droplist defaults to false and will use a caret. If you are, and want to use a particular icon, just pass the icon class and Droplist will take care of the rest.

default: false
options: 'fa-toggle-down', 'fa-toggle-right', 'fa-plus-square', etc

Example

The following code tells Droplist to overflow on the right, hide the ellipsis, and use Font Awesome's fa-toggle-right icon as the dropdown.

$('.droplist').droplist({
  overflow: 'right',
  ellipsis: false,
  dropicon: 'fa-toggle-right'
});

Acknowledgements

Big ups to the very talented Brett Wagner for the inspiration and UI design. We both hope this plugin makes your day a little easier.

License

All code licensed under the MIT License. In other words you are basically free to do whatever you want. Please don't remove my name from the source code, but who does that anyway?