Initialising

Options

Options can be set with JavaScript;

$('select').dropdown({
	multi: true,
	toggleText: 'Select items'
});

Or via the dropdown data attribute;

<select multiple data-dropdown='{ "multi": true, "toggleText": "Select items" }'>
	<option>Option 1</option>
	<option>Option 2</option>
	<option data-dropdown='{ "divider": "top" }'>Option 3</option>
</select>

Options

Option Default
speed 300

Animation speed in ms. Set to 0 to disable animation.

easing easeInOutCirc

Easing method to use.

All built-in jQuery methods are supported, as well as those provided with jQuery Transit.

margin 20

Amount of space in px between the edge of the dropdown menu and browser window.

collision true

Enable collision detection.

If enabled, the dropdown menu will reposition based on the available visible space.

autoResize 200

The number of ms to set the auto resize/reposition timer interval to.

Set 0 to disable automatic resizing

scrollSelected true

Scroll to first selected item when the dropdown or a menu is opened.

keyboard true

Enable keyboard navigation.

nested true

Whether or not to enable multi-level nesting.

If disabled, all items will be displayed in a single menu.

selectParents false

Whether or not to add menu parents as selectable items.

If disabled and nested is also disabled, parent items will be displayed as text labels.

multi false

Whether or not to enable multiple item selection.

If populating a dropdown from a select element, set to null to auto-detect based on the multiple attribute.

minSelect 0

Minimum number of selectable items.

maxSelect 0

Maximum number of selectable items.

selectLinks false

Whether or not to make links selectable.

followLinks true

Whether or not to follow link URLs.

closeText Close

Text/title used for the close button.

autoClose true

Whether or not to close automatically when the dropdown loses focus.

autoCloseMax true

Whether or not to close the dropdown when the maximum number of selectable items has been reached.

autoCloseLink false

Whether or not to close the dropdown when a link is clicked.

closeReset true

Whether or not to reset the dropdown when it is closed.

When resetting, all menus are reverted back to their original positions.

toggleText Please select

Default text used for the toggle button.

autoToggle true

Whether or not to update the toggle button text with the selected item(s) text.

autoToggleLink false

Whether or not to update the toggle button text when a link is selected.

Requires autoToggle to be enabled.

autoToggleHTML false

Replace the toggle text with HTML contents of selected item(s) HTML contents.

Requires autoToggle to be enabled.

titleText Please select

Default title text. Set to null to match the default toggle text.

autoTitle true

Whether or not to update the title text with the menu title.

In nested menus, the menu title is determined from the current parent item.