DropDown

Menu opened from a trigger.

When to use

Use DropDown when you need menu opened from a trigger.

Import

TypeScript

import { DropDown } from '@gzodo/ui'

DropDown is a compound menu: Trigger, Content, and Item. The trigger can be any node, usually a Button or IconButton. Items call onClick when chosen and close the menu. Positioning, Escape, and outside click are handled inside the library.

Examples

Basic

The trigger is a button. Each item is a row with hover border and a muted label.

Icon trigger

Put an IconButton in the trigger for a compact overflow menu. Give the button a title.

Disabled trigger

isDisabled on the trigger blocks the menu from opening.

DropDown

Property

Description

Type

Default

children

Trigger and Content.

ReactNode

—

className

Class on the root.

string

—

DropDown.Trigger

Property

Description

Type

Default

children

The element that opens the menu.

ReactNode

—

isDisabled

Prevents the menu from opening.

boolean

—

DropDown.Item

Property

Description

Type

Default

children

Row label, optionally with an icon.

ReactNode

—

onClick

Called when the item is chosen.

() => void

—

Form

Tooltip