Homecomponentsaction

DropdownMenu

Displays a menu to the user, triggered by a button.

Create a DropdownMenu that provides a list of actions to perform.

Open in Playroom

With icons

Use the startIcon and endIcon properties to add icons before or after the label respectively.

Open in Playroom

Colored icons

Use the iconColor property to set the color of the startIcon.

Open in Playroom

Large size

Use the size property to change the size of the items.

Open in Playroom

Secondary label

Use the secondaryLabel to add a secondary label below the main label.

Open in Playroom

Alignment

Use the align property to align the menu.

Open in Playroom

API

DropdownMenu

trigger

Required

An optional trigger that opens the menu.

ReactNode

children

Required

Array of DropdownMenuItems

ReactNode

size

Size of the menu items.

large

regular

align

Alignment of the menu.

end

start

data

An object with the data keys and values.

DataAttributeMap

DropdownMenuItem

label

Required

The primary label of the item.

ReactNode

onClick

Required

The action to perform for the item.

() => void

secondaryLabel

A secondary label.

ReactNode

startIcon

The icon to show before the label.

IconComponent

endIcon

The icon to show after the label.

IconComponent

iconColor

Color of the icon.

ConditionalStyle<Values<{ red5: CSSVarFunction; blue0: CSSVarFunction; blue4: CSSVarFunction; blue1: CSSVarFunction; blue2: CSSVarFunction; ... 131 more ...; transparent: string; }, { ...; }>>

size

Size of the menu item (passed from parent).

large

regular

data

An object with the data keys and values.

DataAttributeMap