jQuery Pretty Dropdowns

Pretty Dropdowns is a simple, lightweight jQuery plugin that converts <select> drop-down menus into "pretty" menus that you can skin using CSS.

Features:

• Two arrow styles and sizes to choose from (or add your own style)
• Easily add icons, thumbnails, and other custom HTML to the menu items
• Support for multiple-select lists (<select multiple>)
• Support for option groups (<optgroup>)
• Tooltips (title) carried over at <select>, <option>, and <optgroup> levels
• Full keyboard navigation (you can even go directly to a menu item by typing its text)
• Auto-linked to <label for> (menu will get focus when you click on the label)
• Accessible (it plays nicely with screen readers)
• Sensible (when you open the menu it does its best to keep the menu items within the viewport)

See a demo »

Getting Started

Step 1: Link the required files

<link rel="stylesheet" href="/css/prettydropdowns.css">
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="/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.

<script>
$(document).ready(function() {
  $('select').prettyDropdown();
});
</script>

You can also specify some options:

<script>
$(document).ready(function() {
  $('select').prettyDropdown({
    height: 30
  });
});
</script>

Options

Methods

Example:

<script>
$(document).ready(function() {
  $dropdown = $('select').prettyDropdown();
});
// When <select> state changes...
$dropdown.refresh();
</script>

Data Attributes

The data-prefix and data-suffix attributes can be added to the <option> and <optgroup> elements to insert custom HTML before and after each menu item or menu group label, respectively. You can make use of these attributes to add icons, thumbnails, badges, etc. to the menu items. A good example can be seen in the demo.

Keyboard Navigation

Accessibility

The following attributes are added to improve accessibility when using alternative input methods (e.g., keyboard, screen reader):

• role="listbox" and role="option" (to tell screen readers that it's a drop-down menu widget)
• aria-activedescendant (points to the currently selected menu item)
• aria-expanded (this is true when the menu is open and false when it's closed)
• aria-label (this is equivalent to the title attribute for screen readers)
• aria-labelledby (points to the <label> element that is linked to the <select> if it exists)
• tabindex="0" (to allow the widget to get focus when you hit the Tab key)

Please submit an issue if there are other ways to improve accessibility.

Known Issues

• After resizing the window, the drop-down menu near the bottom of the page sometimes doesn't open in reverse.
• The title value will be read twice in some screen reader clients (once for title, once for aria-label).

Installation

Choose from one of the following methods:

• git clone [email protected]:thdoan/pretty-dropdowns.git
• git clone https://github.com/thdoan/pretty-dropdowns.git
• bower install pretty-dropdowns
• npm install pretty-dropdowns
• Download ZIP