AnimatedDropdown

Purpose

AnimatedDropdown provides a floating dropdown menu with:

• Hover or click activation
• Automatic positioning with Floating UI
• Keyboard navigation (Escape to close)
• Smooth animations

When to use

Use AnimatedDropdown for:

• User menus and profile dropdowns
• Action menus
• Nested navigation
• Context-sensitive options

Basic usage

import AnimatedDropdown from '@/shared/ui/components/animated-dropdown/AnimatedDropdown'
import AnimatedDropdownTrigger from '@/shared/ui/components/animated-dropdown/AnimatedDropdownTrigger'
import AnimatedDropdownContent from '@/shared/ui/components/animated-dropdown/AnimatedDropdownContent'

export function UserMenu() {
  return (
    <AnimatedDropdown openOn="click" placement="bottom-end">
      <AnimatedDropdownTrigger>
        <button className="flex items-center gap-2">
          <Avatar />
          <span>John Doe</span>
        </button>
      </AnimatedDropdownTrigger>
      <AnimatedDropdownContent>
        <div className="p-2 space-y-1">
          <button className="w-full text-left px-3 py-2 hover:bg-muted rounded">
            Profile
          </button>
          <button className="w-full text-left px-3 py-2 hover:bg-muted rounded">
            Settings
          </button>
          <button className="w-full text-left px-3 py-2 hover:bg-muted rounded text-destructive">
            Sign out
          </button>
        </div>
      </AnimatedDropdownContent>
    </AnimatedDropdown>
  )
}

Hover activation

<AnimatedDropdown openOn="hover" placement="bottom-start">
  <AnimatedDropdownTrigger>
    <button>Hover me</button>
  </AnimatedDropdownTrigger>
  <AnimatedDropdownContent>
    <div className="p-4">Dropdown content</div>
  </AnimatedDropdownContent>
</AnimatedDropdown>

Props

AnimatedDropdown

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 options

• bottom-start, bottom-end
• top-start, top-end
• left, right

Compound components

• AnimatedDropdownTrigger — Wraps the trigger element
• AnimatedDropdownContent — Contains dropdown content

Context hook

import { useAnimatedDropdown } from '@/shared/ui/components/animated-dropdown/AnimatedDropdown'

function CustomContent() {
  const { open, setOpen, placement } = useAnimatedDropdown()
  // Custom logic
}

Notes

• Built on Floating UI for reliable positioning
• Uses safe polygon for hover mode (prevents accidental close)
• Escape key closes the dropdown
• Click outside closes in click mode