Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

dropdown

v0.86.0arrow_drop_down
v0.86.0
v0.85.0
v0.84.0
STATUS
Passing
DOWNLOADS
4,028
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
8 months ago
SIZE
88 KB
Animations are not yet supported
1 contributor
Use dropdown in your project ?
Copied
npm i @bit/semantic-org.semantic-ui-react.dropdown
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
toggle layout
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
chevron_left
chevron_right

Dropdown TODO

Animations are not yet supported

Ideally we’d reuse CSS animations baked into Semantic UI. This requires dynamic classNames on the dropdown and the menu as well as a dynamic style for the menu transition duration. This state based implementation should be generalized using ReactTransitionGroup hooks (or similar) and used for all components.

state = {
  dropdownAnimationClasses: '',
  menuAnimationClasses: 'hidden',
}

open = () => {
  if (this.state.isOpen) return
  // animation prep
  this.setState({
    isOpen: true,
    menuStyle: {
      animationDuration: '200ms',
      display: 'block !important',
    },
  })
  // animation start
  setTimeout(() => this.setState({
    dropdownAnimationClasses: 'active',
    menuAnimationClasses: 'visible animating slide down in',
  }), 0)
  // animation end
  setTimeout(() => this.setState({
    dropdownAnimationClasses: 'active visible',
    menuAnimationClasses: 'visible',
    menuStyle: {
      animationDuration: null,
    },
  }), 200)
}

close = () => {
  if (!this.state.isOpen) return
  // animation prep
  this.setState({
    isOpen: false,
    menuStyle: {
      animationDuration: '200ms',
    },
  })
  // animation start
  setTimeout(() => this.setState({
    dropdownAnimationClasses: 'visible',
    menuAnimationClasses: 'visible animating slide down out',
  }), 0)
  // animation end
  setTimeout(() => this.setState({
    dropdownAnimationClasses: '',
    menuAnimationClasses: 'hidden',
    menuStyle: {
      display: null,
      animationDuration: null,
    },
  }), 200)
Properties
NameTypeDefault valueDescription
as
custom

An element type to render as (string or function).

additionLabel
element | string'Add '

Label prefixed to an option added by a user.

additionPosition
'top' | 'bottom''top'

Position of the Add: ... option in the dropdown list (‘top’ or ‘bottom’).

allowAdditions
custom

Allow user additions to the list of options (boolean). Requires the use of selection, options and search.

basic
bool

A Dropdown can reduce its complexity.

button
bool

Format the Dropdown to appear as a button.

children
custom

Primary content.

className
string

Additional classes.

clearable
bool

Using the clearable setting will let users remove their selection from a dropdown.

closeOnBlur
booltrue

Whether or not the menu should close when the dropdown is blurred.

closeOnChange
bool

Whether or not the menu should close when a value is selected from the dropdown. By default, multiple selection dropdowns will remain open on change, while single selection dropdowns will close on change.

compact
bool

A compact dropdown has no minimum width.

deburr
boolfalse

Whether or not the dropdown should strip diacritics in options and input search

defaultOpen
bool

Initial value of open.

defaultSearchQuery
string

Initial value of searchQuery.

defaultSelectedLabel
custom

Currently selected label in multi-select.

defaultUpward
bool

Initial value of upward.

defaultValue
number | string | bool | string | number | bool[]

Initial value or value array if multiple.

direction
'left' | 'right'

A dropdown menu can open to the left or to the right.

disabled
bool

A disabled dropdown menu or item does not allow user interaction.

error
bool

An errored dropdown can alert a user to a problem.

floating
bool

A dropdown menu can contain floated content.

fluid
bool

A dropdown can take the full width of its parent

header
node

A dropdown menu can contain a header.

icon
node | object'dropdown'

Shorthand for Icon.

inline
bool

A dropdown can be formatted to appear inline in other content.

item
bool

A dropdown can be formatted as a Menu item.

labeled
bool

A dropdown can be labeled.

lazyLoad
bool

A dropdown can defer rendering its options until it is open.

loading
bool

A dropdown can show that it is currently loading data.

minCharacters
number1

The minimum characters for a search to begin showing results.

multiple
bool

A selection dropdown can allow multiple selections.

noResultsMessage
node'No results found.'

Message to display when there are no results.

onAddItem
function

React’s original SyntheticEvent.

onBlur
function

React’s original SyntheticEvent.

onChange
function

React’s original SyntheticEvent.

onClick
function

React’s original SyntheticEvent.

onClose
function

React’s original SyntheticEvent.

onFocus
function

React’s original SyntheticEvent.

onLabelClick
function

React’s original SyntheticEvent.

onMouseDown
function

React’s original SyntheticEvent.

onOpen
function

React’s original SyntheticEvent.

onSearchChange
function

React’s original SyntheticEvent.

open
bool

Controls whether or not the dropdown menu is displayed.

openOnFocus
booltrue

Whether or not the menu should open when the dropdown is focused.

options
custom

Array of Dropdown.Item props e.g. { text: '', value: '' }

placeholder
string

Placeholder text.

pointing
bool | 'left' | 'right' | 'top' | 'top left' | 'top right' | 'bottom' | 'bottom left' | 'bottom right'

A dropdown can be formatted so that its menu is pointing.

renderLabel
function({ text }) => text

A currently active dropdown item.

scrolling
bool

A dropdown can have its menu scroll.

search
bool | function

A selection dropdown can allow a user to search through a large list of choices. Pass a function here to replace the default search.

searchInput
array | node | object'text'

A shorthand for a search input.

searchQuery
string

Current value of searchQuery. Creates a controlled component.

selectOnBlur
booltrue

Define whether the highlighted item should be selected on blur.

selectOnNavigation
booltrue

Whether or not to change the value when navigating the menu using arrow keys. Setting to false will require enter or left click to confirm a choice.

selectedLabel
custom

Currently selected label in multi-select.

selection
custom

A dropdown can be used to select between choices in a form.

simple
bool

A simple dropdown can open without Javascript.

tabIndex
number | string

A dropdown can receive focus.

text
string

The text displayed in the dropdown, usually for the active item.

trigger
custom

Custom element to trigger the menu to become visible. Takes place of 'text’.

value
bool | string | number | bool | string | number[]

Current value or value array if multiple. Creates a controlled component.

upward
bool

Controls whether the dropdown will open upward.

wrapSelection
booltrue

A dropdown will go to the last element when ArrowUp is pressed on the first, or go to the first when ArrowDown is pressed on the last( aka infinite selection )

as
custom

An element type to render as (string or function).

className
string

Additional classes.

as
custom

An element type to render as (string or function)

children
node

Primary content.

className
string

Additional classes.

content
custom

Shorthand for primary content.

icon
custom

Shorthand for Icon.

as
custom

An element type to render as (string or function).

active
bool

Style as the currently chosen item.

children
node

Primary content.

className
string

Additional classes.

content
custom

Shorthand for primary content.

description
custom

Additional text with less emphasis.

disabled
bool

A dropdown item can be disabled.

flag
custom

Shorthand for Flag.

icon
custom

Shorthand for Icon.

image
custom

Shorthand for Image.

label
custom

Shorthand for Label.

onClick
function

React’s original SyntheticEvent.

selected
bool

The item currently selected by keyboard shortcut. This is not the active item.

text
custom

Display text.

value
bool | number | string

Stored value.

as
custom

An element type to render as (string or function).

children
node

Primary content.

className
string

Additional classes.

content
custom

Shorthand for primary content.

direction
'left' | 'right'

A dropdown menu can open to the left or to the right.

open
bool

Whether or not the dropdown menu is displayed.

scrolling
bool

A dropdown menu can scroll.

as
custom

An element type to render as (string or function).

autoComplete
string'off'

An input can have the auto complete.

className
string

Additional classes.

tabIndex
number | string

An input can receive focus.

type
string'text'

The HTML input type.

value
number | string

Stored value.