A dropdown allows a user to select a value from a series of options




A dropdown can be formatted so that its menu is pointing

Bottom pointing dropdown menus have sub-menus open upwards


A dropdown menu can appear to be floating below an element.



A simple dropdown can open without javascript




An active dropdown has its menu open

An active state will only automatically open a ui simple dropdown. To activate a normal dropdown use $('.ui.dropdown').dropdown('show');


A disabled dropdown menu will not open or close

A disabled state will prevent all dropdowns from allowing the menu to open.



Changing Transitions

A dropdown can specify a different transitions.

$('.dropdown') .dropdown({ // you can use any ui transition transition: 'drop' }) ;

Category Selection

Using a multi-level menu with allowCategorySelection: true will allow items with sub-menus to be selected.

$('.category.example .ui.dropdown') .dropdown({ allowCategorySelection: true }) ;

Combo Dropdowns

A button can be formatted with a dropdown.

Using the combo action will change the preceding element to the selected value.

$('.combo.dropdown') .dropdown({ action: 'combo' }) ;


Initializing Existing HTML

Initializing a dropdown with pre-existing html allows for greater performance than initializing a dropdown directly on a select element.

Any select element initialized as dropdown will also be hidden until javascript can create html, this is to avoid the flash of unstyled content, and the change in element height adjusting page flow.
$('.ui.dropdown') .dropdown() ;

Converting Form Elements

For convenience, select elements can automatically be converted to selection dropdown. A select options with blank string values will be converted to prompt text.

$('#select') .dropdown() ;

Hybrid Form Initialization

As a third option, you can include a wrapper around your select so that it will appear correctly on page load, but will then populate the hidden menu when javascript fires. In this case, the select element does not receive the ui dropdown class.

$('#hybrid select') .dropdown({ on: 'hover' }) ;

Searching Dropdowns

Using a search selection dropdown will allow you users to search more easily through large lists. This can also be converted directly from a form select element.

$('#search-select') .dropdown() ;

Specifying Select Action

Dropdowns have multiple built-in actions that can occur on item selection, you can specify a built by passing in a value to settings.action that is either a built in action, or a custom function that performs an action.

Action Description
activate (Default) Selects current item, adjusts dropdown value and changes dropdown text
select Selects current item from menu but does not change dropdown text
combo Same as activate, but updates previous elements text instead of self
hide Hides the dropdown menu but does nothing
nothing Does nothing

To specify a different built in action, simply specify the name.

$('.dropdown') .dropdown({ action: 'combo' }) ;

To trigger only your custom action and no default action, specify your own function for settings.action.

$('.dropdown') .dropdown({ action: function(text, value) { // nothing built in occurs }) }) ;

If you want to have both a built in action occur, and your own custom action use onChange in combination with action

$('.dropdown') .dropdown({ action: 'hide', onChange: function(value, text, $selectedItem) { // custom action } }) ;


All the following behaviors can be called using the syntax:

$('.your.element') .dropdown('behavior name', argumentOne, argumentTwo) ;
Behavior Description
toggle Toggles current visibility of dropdown
show Shows dropdown
hide Hides dropdown
clear Clears
hide others Hides all other dropdowns that is not current dropdown
restore defaults Restores dropdown text and value to its value on page load
restore default text Restores dropdown text to its value on page load
restore default value Restores dropdown value to its value on page load
save defaults Saves current text and value as new defaults (for use with restore)
set selected(value) Sets selected state to a given value
set text(text) Sets dropdown text to a value
set value(value) Sets dropdown input to value (does not update display state)
get text Returns current dropdown text
get value Returns current dropdown input value
get item(value) Returns DOM element that matches a given input value
bind touch events Adds touch events to element
mouse events Adds mouse events to element
bind intent Binds a click to document to determine if you click away from a dropdown
unbind intent Unbinds document intent click
determine intent Returns whether event occurred inside dropdown
determine select action(text, value) Triggers preset item selection action based on settings passing text/value
set active Sets dropdown to active state
set visible Sets dropdown to visible state
remove active rRemoves dropdown active state
remove visible Removes dropdown visible state
is selection Returns whether dropdown is a selection dropdown
is animated Returns whether dropdown is animated
is visible Returns whether dropdown is visible
is hidden Returns whether dropdown is hidden



Setting Default Description
action auto Sets a default action to occur. (See usage guide)
activate (default)
Updates dropdown text with selected value, sets element state to active, updates any hidden fields if available
activates menu and updates input fields, but does not change current text
changes text of previous sibling element
no action occurs
Dropdown menu is hidden
function(text, value){}
custom function is executed with values specified in callback
on click Event used to trigger dropdown (Hover, Click, Custom Event)
allowCategorySelection false Whether menu items with sub-menus (categories) should be selectable
forceSelection true Whether search selection will force currently selected choice when element is blurred.
sortSelect false Whether to sort values when creating a dropdown automatically from a select element.
allowTab true Whether to allow a tabindex to be created for this element
fullTextSearch false Whether search selections should look for string match anywhere in string
preserveHTML true Whether html included in dropdown values should be preserved. (Allows icons to show up in selected value)
delay: { show : 200, hide : 300, touch : 50 },
Time in milliseconds to debounce show or hide behavior when on: hover is used, or when touch is used.
transition auto (slide down / slide up) Named transition to use when animating menu in and out. Defaults to slide down or slide up depending on dropdown direction. Fade and slide down are available without including ui transitions
duration 250 Duration of animation events


Context Description
onChange(value, text, $choice) Dropdown Is called after a dropdown item is selected. receives the name and value of selection and the active menu element
onNoResults(searchValue) Dropdown Is called after a dropdown is searched with no matching values
onShow Dropdown Is called after a dropdown is shown.
onHide Dropdown Is called after a dropdown is hidden.

Module Settings

DOM Settings
DOM settings specify how this module should interface with the DOM

Default Description
namespace dropdown Event namespace. Makes sure module teardown does not effect other events attached to an element.
selector : { dropdown : '.ui.dropdown', text : '> .text:not(.icon)', input : '> input[type="hidden"], > select', search : '> .search, .menu > .search > input, .menu >', menu : '.menu', item : '.item' }
metadata: { defaultText : 'defaultText', defaultValue : 'defaultValue', text : 'text', value : 'value' }
className : { active : 'active', disabled : 'disabled', dropdown : 'ui dropdown', filtered : 'filtered', menu : 'menu', placeholder : 'default', search : 'search', selected : 'selected', selection : 'selection', visible : 'visible' }
name Dropdown Name used in debug logs
debug False Provides standard debug output to console
performance True Provides standard debug output to console
verbose True Provides ancillary debug output to console
error : { action : 'You called a dropdown action that was not defined', method : 'The method you called is not defined.', transition : 'The requested transition was not found' }

Dimmer Message
Dimmer sub-header