Types
Dropdown
A basic dropdown has no special formatting of its own
Inline
A dropdown can be formatted to appear inline in other content
Selection
A dropdown can be formatted to allow selection of a menu choice.
Pointing
A dropdown can be formatted so that its menu is pointing
Simple
A simple dropdown can open without javascript
Variations
Fluid
A dropdown can take the full width of its parent
States
Active
An active dropdown menu has its menu open
Disabled
A disabled dropdown menu will not open or close
Initializing
Initializing a dropdown
Behavior
Show
A dropdown can show its menu
Hide
A dropdown can hide its menu
Toggle
A dropdown can toggle between menu visibility
Examples
Re-selecting values
A dropdown will automatically select on page load any menu item that includes the currently value of text or your dropdown's hidden input value. This is used to preserve a user's selection on page navigation and will automatically remove and default text placeholder formatting.
Button Group
A button group can be formatted to show additional content as a dropdown
Multiple Levels
A dropdown menu can also contain sub menus inside of it
My favorite animal breed isMenu
A menu element can contain a dropdown
Form
A dropdown can be formatted to allow selection inside a form
Let's go ahead and get you signed up.
Transitions
A dropdown can have different transitions.
Settings
Dropdown Settings
Dropdown settings modify the dropdown's behavior
| Setting | Default | Description |
|---|---|---|
| on | click | Event used to trigger dropdown (Hover, Click) |
| delay |
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.
activate
Most likely action will be determined by type of dropdown, for example a selection dropdown will automatically use updateForm
nothing
no action occurs
hide
Dropdown menu is hidden
activate
Dropdown menu is hidden, item activated and text is changed
function(){}
custom function is executed
|
Callbacks
Callback settings specify a function to occur after a specific behavior.
| Setting | Context | Description |
|---|---|---|
| onChange(value, text) | Dropdown | Is called after a dropdown item is selected. Receieves 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 |
selector : {
input : '> input[type="hidden"]',
item : '.menu > .item',
menu : '.menu',
text : '> .text'
}
|
|
| metadata |
metadata: {
text : 'text',
value : 'value'
}
|
|
| className |
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 |
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'
}
|
|