WUI logo

DropdownMenu

Allows user to select between multiple actions.

version

4.3.3

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}>
Twitter
</DropdownMenu.Item>
<DropdownMenu.Item {...menu} onClick={handleClick} disabled>
Facebook
</DropdownMenu.Item>
<DropdownMenu.Item {...menu} onClick={handleClick}>
Instagram
</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>
)
}

Arrow #

Use DropdownMenu.Arrow to add an arrow to the dropdown menu

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.Arrow {...menu} />
<DropdownMenu.Item {...menu} onClick={handleClick}>
Twitter
</DropdownMenu.Item>
<DropdownMenu.Item {...menu} onClick={handleClick} disabled>
Facebook
</DropdownMenu.Item>
<DropdownMenu.Item {...menu} onClick={handleClick}>
Instagram
</DropdownMenu.Item>
<DropdownMenu.Separator {...menu} />
<DropdownMenu.Item {...menu} onClick={handleClick}>
Github
</DropdownMenu.Item>
</DropdownMenu>
</>
)
}

Properties #

NameType(s)DefaultRequired
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

Breadcrumb

Next

Link