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.

Save

A simple dropdown can open without javascript

Adding state classes only affects simple dropdowns, to trigger states

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');

A dropdown can specify a different transitions.

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

Toggle

A menu element can contain a dropdown

A button can be formatted with a dropdown.

You can change the default action that occurs on selection to different presets built into ui dropdown.

For example, using the combo preset will change the preceding element to the selected value.

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

Save

If each option in your dropdown links out to another page, you might just want to make your menu hide without changing any value.

$('.link.example .dropdown') .dropdown({ action: 'hide' }) ;

Initializing a dropdown with pre-existing html allows for the greatest performance, and most formatting flexibilty

A ui dropdown select element will 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() ;

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() ;

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' }) ;

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() ;

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

Setting	Default	Description
type	false	Type of dropdown (Either
on	click	Event used to trigger dropdown (Hover, Click, Custom Event)
allowTab	true	Whether to allow a `tabindex` to be created for this element
fullTextSearch	true	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	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	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. activate (default) Updates dropdown text with selected value, sets element state to active, updates any hidden fields if available select activates menu and updates input fields, but does not change current text combo changes text of previous sibling element nothing no action occurs hide Dropdown menu is hidden function(text, value){} custom function is executed with values specified in callback

	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
onShow	Dropdown	Is called after a dropdown is shown.
onHide	Dropdown	Is called after a dropdown is hidden.

	Default	Description
namespace	dropdown	Event namespace. Makes sure module teardown does not effect other events attached to an element.
selector	selector : { dropdown : '.ui.dropdown', text : '> .text:not(.icon)', input : '> input[type="hidden"], > select', search : '> .search, .menu > .search > input, .menu > input.search', menu : '.menu', item : '.item' }
metadata	metadata: { defaultText : 'defaultText', defaultValue : 'defaultValue', text : 'text', value : 'value' }
className	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	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' }

Types

Pointing

Floating

Simple

Content

Variations

States

Simple Dropdown States

Active

Disabled

Changing Transitions

Menu

Using Different Dropdown Actions

Combo Dropdowns

Link Dropdowns

Initializing

Simple

Converting form elements

Hybrid Option

Searching Dropdowns

Behavior

Dropdown

Behavior

Callbacks

Module Settings

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

Types

Dropdown

Selection

Search Selection

In-Menu Searchable

Inline

Pointing

Floating

Simple

Content

Header

Divider

Label

Input

Image

Variations

Compact

Fluid

States

Error

Simple Dropdown States

Active

Disabled

Changing Transitions

Multiple Levels

Preserving User Selections

Button Group

Menu

Form

Using Different Dropdown Actions

Combo Dropdowns

Link Dropdowns

Initializing

Simple

Converting form elements

Hybrid Option

Searching Dropdowns

Behavior

Dropdown

Behavior

Callbacks

Module Settings

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

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