Falcon UI

dropdown

Dropdown component along with DropdownLabel, DropdownMenu and DropdownMenuItem can be used for creating toggleable dropdowns in declarative way.

xxxxxxxxxx
 
import { Dropdown, DropdownLabel, DropdownMenu, DropdownMenuItem } from '@deity/falcon-ui';

 
<Box css={{ height: 150 }}>
  <Value initial="acending">
    {({ value, set }) => (
      <Dropdown onChange={set}>
        <DropdownLabel>Sort by: {value}</DropdownLabel>
        <DropdownMenu>
          <DropdownMenuItem value="ascending">Ascending</DropdownMenuItem>
          <DropdownMenuItem value="descending">Descending</DropdownMenuItem>
        </DropdownMenu>
      </Dropdown>
    )}
  </Value>
</Box>

Dropdown specific props

Property	Type	Required	Default	Description
onChange	(menuItemValue: any) => void	-		handler that fires on `DropdownMenuItem` click, accepts `DropdownMenuItem` `value` prop as an argument

DropdownMenuItem specific props

Property	Type	Required	Default	Description
value	any	-		`value` prop gets passed to parent `Dropdown` `onChange` event on `DropdownMenuItem` click

Dropdown,DropdownLabel, DropdownMenu and DropdownMenuItem components all accept all of the responsive, theme-based style props.