Dropdown

free

Dropdown keeps actions and option lists available from a compact trigger.

import Avatar from '@/components/ui/avatar';
import Dropdown from '@/components/ui/dropdown';
import Switcher from '@/components/ui/switcher';
import {

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Dropdown

pnpm dlx nateui@latest add Dropdown

yarn dlx nateui@latest add Dropdown

Examples

Basic

import Dropdown from '@/components/ui/dropdown';

export default function BasicDemo() {
  return (

Custom Toggle

import { PiArchiveFill, PiCopyFill, PiPencilSimpleFill } from 'react-icons/pi'
import Button from '@/components/ui/button';
import Dropdown from '@/components/ui/dropdown';

Trigger

import { PiArchiveFill, PiCopyFill, PiPencilSimpleFill } from 'react-icons/pi'
import Dropdown from '@/components/ui/dropdown';

export default function TriggerDemo() {

Submenu

import {
    PiArchiveFill,
    PiEnvelopeSimpleFill,
    PiFolderOpenFill,

Placement

import { PiArchiveFill, PiCopyFill, PiPencilSimpleFill } from 'react-icons/pi'
import Dropdown from '@/components/ui/dropdown';

const DropdownItems = () => (

Active Item

import { PiSortAscendingFill, PiSortDescendingFill, PiTextAaFill } from 'react-icons/pi'
import Dropdown from '@/components/ui/dropdown';

export default function ActiveItemDemo() {

Disabled

import { PiArchiveFill, PiCopyFill, PiPencilSimpleFill } from 'react-icons/pi'
import Dropdown from '@/components/ui/dropdown';

export default function DisabledDemo() {

Item Variants

import { ReactNode } from 'react';
import {
    PiBuildingFill,
    PiCreditCardFill,

import { PiCopyFill, PiPencilSimpleFill, PiTrashFill } from 'react-icons/pi'
import Dropdown from '@/components/ui/dropdown';

export default function ContextMenuDemo() {

Link

import { PiArrowRightFill } from 'react-icons/pi'
import Dropdown from '@/components/ui/dropdown';

export default function LinkDemo() {

API

Dropdown is a compound component: the root trigger, Dropdown.Item, Dropdown.Menu for submenus, and Dropdown.ContextMenu for right-click menus.

Prop	Description	Type	Default
`activeKey`	Matches a `Dropdown.Item`'s `eventKey` to mark it active.	`string`	-
`disabled`	Prevents the dropdown from opening.	`boolean`	-
`menuClass`	Class names applied to the menu surface.	`string`	-
`onOpen`	Called when the open state changes.	`DropdownOpenChangeHandler`	-
`onSelect`	Called when a `Dropdown.Item` inside is selected.	`DropdownSelectHandler`	-
`placement`	Side and alignment the menu opens from, relative to the trigger.	`DropdownPlacement`	`'bottom-start'`
`renderTitle`	Custom trigger content, replacing the default toggle.	`ReactNode`	-
`title`	Label rendered in the default toggle.	`string \| ReactNode`	-
`toggleClassName`	Class names applied to the trigger element.	`string`	-
`trigger`	How the menu opens: on click, hover, or right-click.	`'click' \| 'hover' \| 'rightClick'`	`'click'`
`...nativeProps`	Native props applied to the trigger element.	`ComponentProps<'div'>`	-

Prop	Description	Type	Default
`active`	Marks the item as active, independent of `activeKey` matching.	`boolean`	-
`asElement`	Element or component the item renders as.	`ElementType`	`'li'`
`closeOnClick`	Closes the dropdown after this item is selected.	`boolean`	`true`
`disabled`	Prevents interaction with this item.	`boolean`	-
`eventKey`	Value passed to `onSelect` and matched against `activeKey`.	`string`	-
`onClick`	Called when the item is clicked.	`(e: SyntheticEvent) => void`	-
`onFocus`	Called when the item receives focus.	`(e: SyntheticEvent) => void`	-
`onSelect`	Called with the item's `eventKey` when selected.	`DropdownSelectHandler`	-
`variant`	Visual role of the item.	`DropdownItemVariant`	`'default'`
`...nativeProps`	Native props applied to the rendered element.	`ComponentProps<'li'>`	-

Renders a nested submenu. Used as a child of Dropdown or another Dropdown.Menu.

Prop	Description	Type	Default
`eventKey`	Value matched against the parent's `activeKey` to highlight this submenu.	`string`	-
`menuClass`	Class names applied to the submenu surface.	`string`	-
`onOpen`	Called when the submenu's open state changes.	`DropdownOpenChangeHandler`	-
`placement`	Side the submenu opens from, relative to its parent item.	`DropdownPlacement`	`'right-start'`
`renderTitle`	Custom content replacing the default submenu trigger row.	`ReactNode`	-
`title`	Label rendered as the submenu's trigger row.	`string \| ReactNode`	-

Renders its areaContent inside a region that opens the menu on right-click, instead of a click-to-open toggle.

Prop	Description	Type	Default
`activeKey`	Matches a `Dropdown.Item`'s `eventKey` to mark it active.	`string`	-
`areaClass`	Class names applied to the right-click area.	`string`	-
`areaContent`	Content rendered inside the right-click area. Required.	`ReactNode`	-
`areaRef`	Ref forwarded to the right-click area element.	`Ref<HTMLDivElement>`	-
`children`	`Dropdown.Item` / `Dropdown.Menu` elements rendered as the menu content.	`ReactNode`	-
`disabled`	Prevents the menu from opening.	`boolean`	-
`menuClass`	Class names applied to the menu surface.	`string`	-
`onOpen`	Called when the open state changes — right-click (or `openAt`/`handleDropdownOpen`) to open, and Escape, outside click, or `handleDropdownClose` to close.	`DropdownOpenChangeHandler`	-
`placement`	Side and alignment the menu opens from, relative to the cursor.	`DropdownPlacement`	`'bottom-start'`
`ref`	Imperative handle for opening and closing the menu programmatically.	`Ref<DropdownContextMenuRef>`	-

Types

type DropdownPlacement =
  | 'top'
  | 'top-start'
  | 'top-end'
  | 'right'
  | 'right-start'
  | 'right-end'
  | 'bottom'
  | 'bottom-start'
  | 'bottom-end'
  | 'left'
  | 'left-start'
  | 'left-end';
type DropdownItemVariant = 'default' | 'header' | 'divider' | 'custom';
type DropdownOpenChangeHandler = (open: boolean) => void;
type DropdownSelectHandler = (eventKey: string, e: SyntheticEvent) => void;
type DropdownContextMenuRef = {
  openAt: (x: number, y: number) => void;
  handleDropdownOpen: () => void;
  handleDropdownClose: () => void;
};