Skip to content

Dropdown

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

Props
#

name
type
default
align
"left" | "right"
left
buttonProps
any
-
chevron
boolean
true
direction
"down" | "up"
down
inner
boolean
false
isOpen
boolean
-
items
DropdownItem[]
[]
keepMenuOnTop
boolean
false
label
ReactNode
-
menuLabelAlign
"flex-start" | "flex-end" | "center"
-
setIsOpen
Dispatch<SetStateAction<boolean>>
-
shortThrow
boolean
false
size
"small" | "medium"
medium

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"
/>
</>

Inner Dropdown
#

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

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={<PlusSmallSVG />}
shadowless
size="small"
tone="accent"
>
Item1
</Button>,
<Button
key="item2"
prefix={<PlusSmallSVG />}
shadowless
size="small"
tone="red"
>
Item2
</Button>,
]}
label="Custom"
/>
Edit on GitHub