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
cancelLabel	string	Cancel	The label for the cancel button when showing an action sheet
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
indicatorColor	any	-	The colour of the indicator
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
responsive	boolean	true	If true, displays an action sheet when in mobile
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

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.
href	string	-	A link that opens on click.
icon	ReactNode	-	An icon that leads the label.
label	string	-	The text label.
onClick	() => void	-	An event handler for click events.
showIndicator	boolean \| Colors	-	A dot indicator.

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

Item with Indicator
#

<Dropdown
  align="left"
  items={[
    {
      label: 'None',
      onClick: () => null,
      color: 'text',
      icon: <DotGridSVG />,
    },
    {
      label: 'Default',
      onClick: () => null,
      color: 'text',
      icon: <CogSVG />,
      showIndicator: true,
    },
    {
      label: 'Custom',
      onClick: () => null,
      color: 'red',
      icon: <ExitSVG />,
      showIndicator: 'red',
    },
  ]}
  label="Account"
  width={200}
/>

Custom Indicator Colour
#

<Dropdown
  align="left"
  indicatorColor="red"
  items={[
    {
      label: 'None',
      onClick: () => null,
      color: 'text',
      icon: <DotGridSVG />,
    },
    {
      label: 'Default',
      onClick: () => null,
      color: 'text',
      icon: <CogSVG />,
      showIndicator: true,
    },
    {
      label: 'Custom',
      onClick: () => null,
      color: 'red',
      icon: <ExitSVG />,
      showIndicator: 'red',
    },
  ]}
  label="Account"
  width={200}
/>

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>

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

Items with icons
#

Items as link
#

Edit on GitHub