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
height
string | number
-
The height of the dropdown menu. If specified, dropdown will be scrollable
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
mobileWidth
string | number
150
The width of the dropdown menu on mobile, in px
setIsOpen
Dispatch<SetStateAction<boolean>>
-
-
shortThrow
boolean
false
If true, decreases the distance of the dropdown animation.
width
string | 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>

Scrollable
#

<Dropdown

  height={200}

  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: 'Text Label 5', onClick: () => null },

    { label: 'Text Label 6', onClick: () => null },

    { label: 'Text Label 7', onClick: () => null },

    { label: 'Text Label 8', onClick: () => null },

  ]}

  label="Scrollable"

/>

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