A dropdown is a hidden list of selections that a user can choose to have appear

Learn about Modules



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



A dropdown can be formatted so that its menu is pointing


A simple dropdown can open without javascript



Simple Dropdown (No Javascript)


An active dropdown has its menu open

An active state will only affect a simple dropdown. To activate a menu on a dropdown module use $('.ui.dropdown').dropdown('show');


A disabled dropdown menu will not open or close

A disabled state will only affect a simple dropdown. To disable a dropdown module use $('.ui.dropdown').dropdown('destroy');


Initializing a dropdown

$('.ui.dropdown') .dropdown() ;


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
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
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


Combo Button

A button can be formatted with a dropdown

Update Post


A dropdown can have different transitions.


Dropdown Settings
Dropdown settings modify the dropdown's behavior

Setting Default Description
on click Event used to trigger dropdown (Hover, Click)
delay: { show: 50, hide: 300 }
Time in milliseconds to debounce show or hide behavior when on: hover is used.
transition slide down Named transition to use when animating menu in and out. Fade and slide down are available without including ui transitions
duration 250 Duration of animation events
action auto Sets a default action to occur.
Most likely action will be determined by type of dropdown, for example a selection dropdown will automatically use updateForm
no action occurs
Dropdown menu is hidden
custom function is executed

Callbacks specify a function to occur after a specific behavior.

Setting Context Description
onChange(value, text) Dropdown Is called after a dropdown item is selected. receives the name and value of selection.
onShow Dropdown Is called after a dropdown is shown.
onHide Dropdown Is called after a dropdown is hidden.

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

Setting Default Description
namespace dropdown Event namespace. Makes sure module teardown does not effect other events attached to an element.
selector : { input : '> input[type="hidden"]', item : '.menu > .item', menu : '.menu', text : '> .text' }
metadata: { text : 'text', value : 'value' }
className : { active : 'active', disabled : 'disabled', placeholder : 'default', visible : 'visible' }

Debug Settings
Debug settings controls debug output to the console

Setting Default Description
name Dropdown Name used in debug logs
debug True 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' }