jQuery Pretty Dropdowns

Pretty Dropdowns is a simple, lightweight jQuery plugin that converts <select> drop-down menus into “pretty” menus that you can style using CSS. As an extra bonus, it does its best to keep the menu options within the viewport.

See a demo »

Getting Started

<link rel="stylesheet" href="//cdn.rawgit.com/thdoan/pretty-dropdowns/master/dist/css/prettydropdowns.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//cdn.rawgit.com/thdoan/pretty-dropdowns/master/dist/js/jquery.prettydropdowns.js"></script>

You have complete control over the look and feel of the drop-down menu by modifying prettydropdowns.css. It is recommended to load the JavaScript files at the bottom just before the closing </body> tag if possible.

Step 2: Call the .prettyDropdown() function

Make sure this comes after the two required JavaScript files from Step 1 are loaded.

$(document).ready(function() {

You can also specify some options:

$(document).ready(function() {
    height: 30


Name Type Default Description
customClass string arrow The class name to customize the drop-down menu style. The default arrow class displays a chevron-type arrow icon. Two additional helper classes are built in (add either or both to arrow): triangle converts the chevron into a solid triangle; small renders the arrow icon at half size.
height number 50 The drop-down menu height.
hoverIntent number 200 The wait period (in milliseconds) before collapsing the drop-down menu after you hover off of it. If you hover back onto the menu within the wait period, it will remain open.


Choose from one of the following methods: