Animated Dropdown

A composable, fully accessible dropdown menu built on Base UI with a spring-driven shared hover highlight and origin-aware scale/fade animations. No hardcoded items — compose your own content.

Features

Composable API — AnimatedDropdown / Trigger / Content / Item / Separator, shadcn-style.
Spring hover highlight — shared layoutId glides between items as you move the mouse.
Per-instance isolation — useId() scopes the layout group so multiple dropdowns on the same page never conflict.
Origin-aware animation — popup scales in from the trigger position using Base UI's --transform-origin.
Icon-agnostic — pass any ReactNode as the icon prop.
Danger variant — red-tinted destructive items.
Controlled or uncontrolled — use open/onOpenChange or defaultOpen as needed.
Full accessibility — keyboard nav, typeahead, focus trap, and portal via Base UI.
Reduced-motion safe — instant transitions when the OS prefers reduced motion.

Playground

Try different side and align positions.

Controls

Side

Align

Installation

npx shadcn@latest add @sona-ui/animated-dropdown

Usage


"use client";
 
import { Bell, CreditCard, LogOut, Settings, User } from "lucide-react";
import {
  AnimatedDropdown,
  AnimatedDropdownContent,
  AnimatedDropdownItem,
  AnimatedDropdownSeparator,
  AnimatedDropdownTrigger,
  AnimatedDropdownTriggerIndicator,
} from "@/components/ui/animated-dropdown/animated-dropdown";
 
export default function AnimatedDropdownDemo() {
  return (
    <AnimatedDropdown>
      <AnimatedDropdownTrigger>
        My Account
        <AnimatedDropdownTriggerIndicator />
      </AnimatedDropdownTrigger>
      <AnimatedDropdownContent>
        <AnimatedDropdownItem icon={<User />}>Profile</AnimatedDropdownItem>
        <AnimatedDropdownItem icon={<CreditCard />}>
          Billing
        </AnimatedDropdownItem>
        <AnimatedDropdownItem icon={<Bell />}>
          Notifications
        </AnimatedDropdownItem>
        <AnimatedDropdownItem icon={<Settings />}>
          Settings
        </AnimatedDropdownItem>
        <AnimatedDropdownSeparator />
        <AnimatedDropdownItem icon={<LogOut />} variant="danger">
          Log out
        </AnimatedDropdownItem>
      </AnimatedDropdownContent>
    </AnimatedDropdown>
  );
}

Examples

Danger variant

Use variant="danger" on destructive items — they get a red tint and are visually separated.

Controlled open state

Pass open and onOpenChange to fully control the dropdown from external state.

Dropdown is: closed

Code Examples

Basic usage

my-dropdown.tsx

import {
AnimatedDropdown,
AnimatedDropdownContent,
AnimatedDropdownItem,
AnimatedDropdownSeparator,
AnimatedDropdownTrigger,
AnimatedDropdownTriggerIndicator,
} from "@/components/ui/animated-dropdown";
import { LogOut, Settings, User } from "lucide-react";
 
export function MyDropdown() {
return (
  <AnimatedDropdown>
    <AnimatedDropdownTrigger>
      Account
      <AnimatedDropdownTriggerIndicator />
    </AnimatedDropdownTrigger>
    <AnimatedDropdownContent>
      <AnimatedDropdownItem icon={<User />}>Profile</AnimatedDropdownItem>
      <AnimatedDropdownItem icon={<Settings />}>Settings</AnimatedDropdownItem>
      <AnimatedDropdownSeparator />
      <AnimatedDropdownItem icon={<LogOut />} variant="danger">
        Log out
      </AnimatedDropdownItem>
    </AnimatedDropdownContent>
  </AnimatedDropdown>
);
}

Controlled state

controlled-dropdown.tsx

const [open, setOpen] = useState(false);
 
<AnimatedDropdown open={open} onOpenChange={setOpen}>
<AnimatedDropdownTrigger>Menu</AnimatedDropdownTrigger>
<AnimatedDropdownContent>
  <AnimatedDropdownItem onClick={() => setOpen(false)}>
    Close on click
  </AnimatedDropdownItem>
</AnimatedDropdownContent>
</AnimatedDropdown>

Side and alignment

positioned-dropdown.tsx

// Opens to the right, aligned to the start of the trigger
<AnimatedDropdownContent side="right" align="start" sideOffset={8}>
...
</AnimatedDropdownContent>

Props

Property	Type	Default	Description
`children`	`ReactNode`	`required`
`open`	`boolean`	`—`	Controlled open state.
`defaultOpen`	`boolean`	`false`	Initial open state for uncontrolled usage.
`onOpenChange`	`(open: boolean) => void`	`—`	Callback when open state changes.
`disabled`	`boolean`	`false`	Whether the menu ignores user interaction.
`modal`	`boolean`	`true`	Whether the open menu limits interaction to the menu.