Skip to content

Dropdown

Attaches a button menu to an element
import { Dropdown } from '@ensdomains/thorin'
<Dropdown
align="left"
items={[
{
label: 'Dashboard',
onClick: () => null,
color: 'text',
icon: <DotGridSVG />,
},
{
label: 'Disconnect',
onClick: () => null,
color: 'red',
icon: <ExitSVG />,
},
]}
label="Account"
/>

Props
#

name
type
default
description
align
"left" | "right"
left
The alignment of the dropdown relative to the button
buttonProps
any
-
The props passed to the button for the dropdown
chevron
boolean
true
A chevron in the button
children
ReactNode
-
An optional custom dropdown button
direction
"down" | "up"
down
The direction that the dropdown menu will open from
isOpen
boolean
-
If defined, dropdown is controlled externally
items
DropdownItem[]
[]
An array of objects conforming to the DropdownItem interface.
keepMenuOnTop
boolean
false
If true, the dropdown will stay above the button when open
label
ReactNode
-
The label of the dropdown button
menuLabelAlign
"flex-start" | "flex-end" | "center"
-
The alignment of the menu button labels
setIsOpen
Dispatch<SetStateAction<boolean>>
-
-
shortThrow
boolean
false
If true, decreases the distance of the dropdown animation.
width
number
150
The width of the dropdown menu, in px

Dropdown Item Props
#

name
type
default
description
color
"blue" | "green" | "indigo" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "grey" | "accent" | "accentSecondary" | "accentSecondaryHover" | "accentTertiary" | "accentText" | "accentGradient" | "background" | "backgroundHide" | "backgroundSecondary" | "backgroundTertiary" | "border" | "borderSecondary" | "borderTertiary" | "foreground" | "foregroundSecondary" | "foregroundSecondaryHover" | "foregroundTertiary" | "groupBackground" | "groupBorder" | "gradients" | "text" | "textPlaceholder" | "textSecondary" | "textTertiary"
-
The color of the label.
disabled
boolean
-
The disabled attribute of button element.
label
string
-
The text label.
onClick
() => void
-
An event handler for click events.

Direction
#

<>
<div style={{ height: '300px' }} />
<Dropdown
direction="up"
items={[
{ label: 'Dashboard', onClick: () => null, color: 'text' },
{ label: 'Disconnect', onClick: () => null, color: 'red' },
]}
label="Account"
/>
</>

Align
#

<DeleteMe flexDirection="row" justifyContent="space-between">
<Dropdown
align="left"
items={[
{ label: 'Text Label 1', onClick: () => null },
{ label: 'Text Label 2', onClick: () => null },
{ label: 'Text Label 3', onClick: () => null },
{ label: 'Text Label 4', onClick: () => null },
]}
label="Left"
/>
<Dropdown
align="right"
items={[
{ label: 'Text Label 1', onClick: () => null },
{ label: 'Text Label 2', onClick: () => null },
{ label: 'Text Label 3', onClick: () => null },
{ label: 'Text Label 4', onClick: () => null },
]}
label="Right"
/>
</DeleteMe>

Short Throw
#

<DeleteMe flexDirection="row" justifyContent="space-between">
<Dropdown
align="left"
items={[
{ label: 'Text Label 1', onClick: () => null },
{ label: 'Text Label 2', onClick: () => null },
{ label: 'Text Label 3', onClick: () => null },
{ label: 'Text Label 4', onClick: () => null },
]}
label="Regular Throw"
/>
<Dropdown
align="right"
items={[
{ label: 'Text Label 1', onClick: () => null },
{ label: 'Text Label 2', onClick: () => null },
{ label: 'Text Label 3', onClick: () => null },
{ label: 'Text Label 4', onClick: () => null },
]}
label="Short Throw"
shortThrow
/>
</DeleteMe>

Custom button
#

<Dropdown
items={[
{ label: 'English', onClick: () => null, color: 'text' },
{ label: '简体中文', onClick: () => null, color: 'text' },
{ label: 'Français', onClick: () => null, color: 'text' },
{ label: 'Español', onClick: () => null, color: 'text' },
]}
label="Language"
>
<button>Custom button</button>
</Dropdown>

Custom menu button
#

<Dropdown
items={[
<Button
key="item1"
prefix={<PlusSVG />}
shadowless
size="small"
tone="accent"
>
Item1
</Button>,
<Button key="item2" prefix={<PlusSVG />} shadowless size="small" tone="red">
Item2
</Button>,
]}
label="Custom"
/>
Edit on GitHub