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.
Examples available at brianrhea.github.io/droplist
- 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();
});
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
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'
});
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.
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?