AnimatedDropdown

Floating dropdown with hover or click activation.

Props

AnimatedDropdownProps

Prop	Type	Default	Description
openOn	'hover' | 'click'	'hover'	Activation mode
placement	Placement	'bottom-end'	Dropdown position
offset	number	8	Distance from trigger
alignEdge	boolean	false	Align to trigger edge
disabled	boolean	false	Disable dropdown
onOpenChange	(open: boolean) => void	-	Open state callback
children	ReactNode	Required	Trigger and content

Placement

type Placement = 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start' | 'right' | 'left'

Compound Components

AnimatedDropdownTrigger

Wraps the trigger element.

AnimatedDropdownContent

Contains dropdown content.

Context Hook

const { open, setOpen, placement } = useAnimatedDropdown()

Example

<AnimatedDropdown openOn="click" placement="bottom-end">
  <AnimatedDropdownTrigger>
    <Button>Menu</Button>
  </AnimatedDropdownTrigger>
  <AnimatedDropdownContent>
    <div className="p-2">
      <button>Option 1</button>
      <button>Option 2</button>
    </div>
  </AnimatedDropdownContent>
</AnimatedDropdown>

See also

• AnimatedDropdown (Conceptual)