Skip to content



Dropdown is a component that displays content, such as a form or message, when triggered by a clickable item. This clickable item, also known as the trigger, can be a Select, Button, Input, or any other component.

Component composition

Dropdown component consists of Dropdown.Trigger and Dropdown.Popper.



The component doesn't have any fixed sizes since they are defined by the content inside it.


If dropdown changes its state while user interacts with it, don’t change the dropdown size (width and height).


Margin between trigger and dropdown is always 4px.


Dropdown opens:

  • by clicking on the trigger;
  • by typing in the input.

Dropdown is hidden:

  • by clicking outside the dropdown;
  • by an action inside the dropdown (for example, by clicking the "Cancel" button);
  • by clicking Esc;
  • when input trigger loses focus.


By default, the Dropdown component drops down from the trigger. However, if there isn't enough space below, it will drop in the opposite direction using Popper.js.

All possible positions for Dropdown component based on Popper.js properties clockwise: top-start, top, top-end, right-start, right, right-end, bottom-end, bottom, bottom-start, left-end, left, left-start.


Dropdown component should maintain its position and not move when a user scrolls the page. For instance, if the dropdown opens upward, it should stay in that position even if the user scrolls the page.

Usage in UX/UI

  • Don’t use dropdown inside dropdown.
  • When dropdown is opened, the trigger should get the active state.

Released under the MIT License.

Released under the MIT License.