Dropdown is a combination of OverlayTrigger, Button, and Menu components.

Note
This component uses Portals internally, which requires React 16
Note
This component uses ZLevel context internally, which requires React 16

Usage

Props

NameTypeRequiredDefaultDescription
afterHide
((e?: Event) => void)
false
afterShow
(() => void)
false
beforeHide
BeforeCallback
false
since

10.19.0

beforeShow
BeforeCallback
false
since

10.19.0

block
boolean
false
since

10.19.0

className
string
false
since

10.19.0

disabled
boolean
false
since

10.19.0

error
boolean
false
since

10.19.0

footer
ReactNode
false

Content to render in a footer.

since

10.19.0

hasTabbableElements
boolean
false

Whether to act as modal dialog. Should be used when Dropdown has tabbable elements (e.g. buttons in footer).

default

'false'

since

11.5.0

i18nScope
string
false

The i18n key to use for the dropdowns's configurable strings. Defaults to using the core library's default strings.

since

10.19.0

icon
ReactNode
false
remarks

string icons have been deprecated, please pass a component from @procore/core-icons

since

10.19.0

label
string
false

The button text.

since

10.19.0

loading
boolean
false
since

10.19.0

placementfalse

The placement of the overlay.

default

'bottom-left'

since

10.19.0

restoreFocusOnHide
boolean
false

If focus should return to the button after selection.

ally

Dropdowns hold no value and take an action. Focus is expected to be moved from a Dropdown to something else, to continue the user flow . If all actions are inert and does not move focus, set this to true. If some actions are inert consider using restoreFocus on Dropdown.Item. Closing Dropdown via Escape always restores focus.

default

false

since

11.13.0

sizefalse

The button size

default

'md'

since

10.19.0

trigger
TriggerVariant | TriggerVariant[]
false
since

10.19.0

type
"button" | "submit" | "reset"
false
since

10.19.0

variantfalse
default

'secondary'

since

10.19.0

onSearch
Function
false

Adds a search bar to the dropdown.

since

10.19.0

onSelect
Function
false
Callback for selecting an item from the menu { '({ event: ReactEvent, item: Menu.Item.props.item, group: bool }) => void' }
item will be the item prop supplied to the{' '} Item component
since

10.19.0

Dropdown expects Dropdown.Item as children.

Anchors

Footers

Dropdown will render the Dropdown.Footer element for you. It has a footer prop slot to manage this.

Searching

Passing an onSearch to the dropdown renders a typeahead search.

Translating the Search placeholder

You can customize the Search placeholder by providing translations to I18nProvider and configuring the Dropdown's i18nScope prop

See the I18n documentation for more on Core's approach to translations

Advanced

OverlayTrigger

Since Dropdown uses OverlayTrigger under the hood, the visibility callbacks are also available

Provides state and handlers of dropdown component. Allows you to split up the view while still having access to the internals of dropdown.