DropdownMenu
Allows user to select between multiple actions.
version
4.1.2
install
yarn add @welcome-ui/dropdown-menu
usage
import { DropdownMenu, useDropdownMenuState } from '@welcome-ui/dropdown-menu'
About #
Menu from Reakit with a really nice theme 👀
Usage #
function() {const menu = useDropdownMenuState({gutter: 10})const handleClick = e => {console.log(`Clicked on ${e.target.innerText}`)menu.hide()}return (<><DropdownMenu.Trigger {...menu} as={Button}>Dropdown Menu</DropdownMenu.Trigger><DropdownMenu {...menu} aria-label="Example"><DropdownMenu.Item {...menu} onClick={handleClick}></DropdownMenu.Item><DropdownMenu.Item {...menu} onClick={handleClick} disabled></DropdownMenu.Item><DropdownMenu.Item {...menu} onClick={handleClick}></DropdownMenu.Item><DropdownMenu.Separator {...menu} /><DropdownMenu.Item {...menu} onClick={handleClick}>Github</DropdownMenu.Item></DropdownMenu></>)}
...or with more complexity
function() {const menu = useDropdownMenuState({ gutter: 10, placement: 'bottom-end' })const handleClick = e => {console.log(`Clicked on ${e.target.innerText}`)menu.hide()}return (<Box position="relative"><ButtonGroup variant="tertiary"><Button onClick={handleClick}><AddIcon /><span>First Action</span></Button><DropdownMenu.Trigger {...menu} as={Button}>{menu.visible ? <UpIcon /> : <DownIcon />}</DropdownMenu.Trigger></ButtonGroup><DropdownMenu {...menu} aria-label="Complexity"><DropdownMenu.Item {...menu} onClick={handleClick}><TrashIcon mr="sm" size="sm" /><Box>Second Action</Box></DropdownMenu.Item><DropdownMenu.Item {...menu} onClick={handleClick}><AttachmentIcon mr="sm" size="sm" /><Box>Third Action</Box></DropdownMenu.Item></DropdownMenu></Box>)}
Properties #
Name | Type(s) | Default | Required |
---|---|---|---|
innerProps | WuiProps add custom props from styled system on DropdownMenu inner | {} | |
visible | Boolean Whether it's visible or not. | false |
Packages #
Dependencies #
Peer dependencies #
Previous
BreadcrumbNext
Link