A dropdown allows a user to select a value from a series of options
A dropdown
A dropdown can be used to select between choices in a form
A selection dropdown can allow a user to search through a large list of choices.
A dropdown can be searchable
A dropdown can include a search prompt inside its menu
A dropdown can be formatted to appear inline in other content
Show me posts trendingA dropdown can be formatted so that its menu is pointing
A simple dropdown can open without javascript
A dropdown menu can contain a header
A dropdown menu can contain dividers to separate related content
A dropdown menu can contain an icon.
A dropdown menu can contain a description.
A dropdown menu can contain a label.
A dropdown menu can contain floated content.
A dropdown menu can contain an input
A dropdown menu can contain an image
Jenny Hess
Elliot Fu
Stevie Feliciano
Christian
Matt
Justen Kitsune
An errored dropddown can alert a user to a problem
An active dropdown has its menu open
A disabled dropdown menu will not open or close
A dropdown can have its menus open upward.
A compact dropdown has no minimum width
A dropdown can take the full width of its parent
A dropdown menu or sub-menu can specify the direction it should open
A dropdown can specify a different transitions.
A dropdown menu can also contain sub menus inside of it
My favorite animal breed isYou can reset a form field to its placeholder value
You can restore a dropdown to its value set on page load
Using a multi-level menu with allowCategorySelection: true will allow items with sub-menus to be selected.
This example uses a preset text value to preserve the menu item on page navigation
Current action:A button group can be formatted to show additional content as a dropdown
A menu element can contain a dropdown
A dropdown can be formatted to allow selection inside a form
Let's go ahead and get you signed up.
Dropdowns support different default actions that can occur when an item is selected. For example, you can set your dropdown not to change its text, or select a value from its menu.
Initializing a dropdown with pre-existing html allows for greater performance than initializing a dropdown directly on a select element.
You can specify different values for selected text, and selected form values by adding data-text or data-value to any item. This is useful if you include additional data, like icons, that you want to appear only inside the dropdown menu.
For convenience, select elements can automatically be converted to selection dropdown. A select options with blank string values will be converted to prompt text.
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.
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.
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.
To trigger only your custom action and no default action, specify your own function for settings.action.
If you want to have both a built in action occur, and your own custom action use onChange in combination with action
All the following behaviors can be called using the syntax:
| 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
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
|
| 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 |
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. |
| 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'
}
|
|
This translation is only % complete!
We need your help to make Semantic available to people who speak your language.
Our translation tools are easy to use and allow you to translate text without having to leave the site.
Semantic is available at semantic-ui.cn a mirror site hosted inside China. This should make browsing much faster for those visiting from mainland China.
