Ctrl + K

DropDown

Free

Drop down menu component with smooth animations and customizable options.

PreviewCode

Other Varaints

With props
stagger = 0.025

Message

With props
smartDirection = true

Message

With props
layered = true

Message

Installation

CLI
Manual
Run the following command
npx animatex-pro add dropdown

Props

PropDefaultDescription
classNameNoneStyle the button with tailwind styles
stagger0Controls the delay between each option's animation.
layeredfalseEnables layered hover effect on options.
smartDirectionfalseAutomatically adjusts the dropdown direction based on available space.
options[]Array of options to be displayed in the dropdown.
onChange() => {}Callback function that gets called when an option is selected.
defaultOption{text: '', value: ''}Sets the default option displayed when no option is selected.
menuStyle{}Custom styles for the dropdown menu.
optionStyle{}Custom styles for each dropdown option.
layerStyle{}Custom styles for the layered hover effect.