Dropdown - Keep React

The Dropdown Component is a versatile user interface element that provides users with a menu of selectable options. With a wide range of customization options, including labels, icons, search bars, checkboxes, and more, the Dropdown Component enhances user interaction by offering intuitive and flexible selection functionalities.

Table of Contents#

Default Dropdown#

The Default Dropdown represents a list of items as dropdown items with <DropdownItem> components.

Dropdown With Icon#

The Dropdown with Icon component allows you to include icons within dropdown items.

Customize Dropdown#

Customize the dropdown according to your preferences.

Trigger Variant#

Dropdown has three variants of trigger. Such as "click", "hover", and "focus".

API Reference#

Here is a list of the props that you can pass to the dropdown component:

PropertyDescriptionTypeDefault
placementDefines the placement of the dropdown.
top
top-start
top-end
bottom
bottom-start
bottom-end
left
left-start
left-end
right
right-start
right-end
bottom-start
showArrowEnables or disables the floating arrow within the dropdown.booleanfalse
triggerTrigger mode for displaying the dropdown.
hover
click
focus
click
Edit this pageDrawer