Dropdown

Displays a menu to the user, offering a series of actions or functions that can be executed by clicking buttons.

Preview
Code

Installation

npm
yarn
pnpm
bun

npm i @melio-ui/dropdown

If @melio-ui/react is already installed globally, you can skip this step.

Import

Individual
Global

import { 
  DropdownRoot,
  DropdownTrigger,
  DropdownPortal,
  DropdownContent,
  DropdownArrow,
  DropdownItem,
} from '@melio-ui/dropdown';

DropdownRoot: All parts of the dropdown are included.
DropdownTrigger: Used to activate or open the Dropdown component.
DropdownPortal: Portal the overlay and content portion into the body.
DropdownContent: Includes the content that will be displayed in the open menu box.
DropdownArrow: An optional arrow element for the dropdown, to be rendered within DropdownContent for visual association.
DropdownItem: It represents a single item in a dropdown menu and can be customized with labels, icons, and actions.

Another way to import

'use client';

import { Dropdown } from '@melio-ui/dropdown';

<Dropdown.Root>
  <Dropdown.Trigger asChild>
    <button type="button">Dropdown</button>
  </Dropdown.Trigger>
  <Dropdown.Portal>
    <Dropdown.Content>
      <Dropdown.Item>DropdownItem - 1</Dropdown.Item>
      <Dropdown.Item>DropdownItem - 2</Dropdown.Item>
      <Dropdown.Item>DropdownItem - 3</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown.Portal>
</Dropdown.Root>;

'use client' must be used when rendering on the server side.

API Reference

DropdownRoot

All parts of the dropdown are included.

Prop	Type	Default	Description
open	`boolean`	-	Sets whether the dropdown menu is open or closed.
defaultOpen	`boolean`	-	When first rendered, the dropdown menu is in an opened state. Use when there is no need to control the opened state.
onOpenChange	`(open: boolean) => void`	-	This is an event handler that is triggered when the open state of the dropdown menu changes.

DropdownTrigger

Used to activate or open the Dropdown component.

Prop	Type	Default	Description
asChild	`boolean`	-	Changes the default rendering element passed as a child, merging its props and behavior.

Data attribute	Values
[data-state]	"open" \| "closed"

DropdownPortal

Portal the overlay and content portion into the body.

Prop	Type	Default	Description
container	`HTMLElement \| (() => HTMLElement)`	document.body	Specifies the container element to which the content should be portaled.

DropdownContent

Includes the content that will be displayed in the open menu box.

Prop	Type	Default	Description
side	`"top" \| "right" \| "bottom" \| "left"`	"top"	The ideal side of the trigger to render on when it's open.
sideOffset	`number`	0	The pixel distance from the trigger.
align	`"start" \| "center" \| "end"`	"center"	The desired alignment with the trigger, which may adjust if collisions happen.
alignOffset	`number`	0	A pixel offset from the "start" or "end" alignment choices.
destroyOnClose	`boolean`	true	Used to ensure that the DOM is removed when closed.
forceMount	`boolean`	-	Used to ensure that a component is always rendered in the DOM, regardless of its visibility or whether it's conditionally displayed.
closeOnEsc	`boolean`	true	Determines whether or not to close when the ESC key is pressed.
closeOnBlur	`boolean`	true	Determines whether to close on blur.
closeOnItemClick	`boolean`	true	Determines whether the menu item will close when clicked.

Data attribute	Values
[data-state]	"open" \| "closed"
[data-side]	"top" \| "right" \| "bottom" \| "left"
[data-align]	"start" \| "center" \| "end"

DropdownArrow

An optional arrow element for the dropdown, to be rendered within DropdownContent for visual association.

Prop	Type	Default	Description
asChild	`boolean`	-	Changes the default rendering element passed as a child, merging its props and behavior.
width	`number`	10	The arrow's width measured in pixels.
height	`number`	5	The arrow's height measured in pixels.

DropdownItem

It represents a single item in a dropdown menu and can be customized with labels, icons, and actions.

Prop	Type	Default	Description
disabled	`boolean`	-	Determines whether the menu item is inactive.

Data attribute	Values
[data-disabled]	Visible when disabled

Examples

<DropdownRoot>
  <DropdownTrigger asChild>
    <button
      type="button"
      style={{
        border: '1px solid #475569',
        borderRadius: 5,
        padding: 10,
      }}
    >
      Dropdown
    </button>
  </DropdownTrigger>
  <DropdownPortal>
    <DropdownContent side="right" align="start">
      <DropdownItem>DropdownItem - 1</DropdownItem>
      <DropdownItem>DropdownItem - 2</DropdownItem>
      <DropdownItem>DropdownItem - 3</DropdownItem>
    </DropdownContent>
  </DropdownPortal>
</DropdownRoot>

Display arrow

<DropdownRoot>
  <DropdownTrigger asChild>
    <button
      type="button"
      style={{
        border: '1px solid #475569',
        borderRadius: 5,
        padding: 10,
      }}
    >
      Dropdown
    </button>
  </DropdownTrigger>
  <DropdownPortal>
    <DropdownContent>
      <DropdownItem>DropdownItem - 1</DropdownItem>
      <DropdownItem>DropdownItem - 2</DropdownItem>
      <DropdownItem>DropdownItem - 3</DropdownItem>
      <DropdownArrow />
    </DropdownContent>
  </DropdownPortal>
</DropdownRoot>

<DropdownRoot>
  <DropdownTrigger asChild>
    <button
      type="button"
      style={{
        border: '1px solid #475569',
        borderRadius: 5,
        padding: 10,
      }}
    >
      Dropdown
    </button>
  </DropdownTrigger>
  <DropdownPortal>
    <DropdownContent>
      <div style={{ padding: '0.625rem 0.3125rem' }}>
        <div style={{ paddingLeft: '0.3125rem', paddingBottom: '0.5rem' }}>Title 1</div>
        <DropdownItem>DropdownItem - 1</DropdownItem>
        <DropdownItem>DropdownItem - 2</DropdownItem>
        <DropdownItem>DropdownItem - 3</DropdownItem>
      </div>
      <div style={{ padding: '0.625rem 0.3125rem' }}>
        <div style={{ paddingLeft: '0.3125rem', paddingBottom: '0.5rem' }}>Title 2</div>
        <DropdownItem>DropdownItem - 4</DropdownItem>
        <DropdownItem>DropdownItem - 5</DropdownItem>
        <DropdownItem>DropdownItem - 6</DropdownItem>
      </div>
    </DropdownContent>
  </DropdownPortal>
</DropdownRoot>

Drawer

NumberInput