Animated Dropdown

Use Animated Dropdown when an action list needs keyboard-accessible menu behavior with a small, origin-aware entrance. Compose its trigger, content, items, and optional separators to match your product's actions.

Preview

Reduce motion:Off

Tune:Off

Inspect

Installation

Base UI Motion

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

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>
);
}

Examples

Destructive action

Use the danger variant for an action that needs a destructive visual treatment. Add a separator when the destructive action belongs in its own group.

Controlled state

Use controlled open state when another part of the interface needs to control the menu.

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>

Positioning

Use the side, alignment, and offset options to position the popup relative to its trigger.

positioned-dropdown.tsx

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

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>
  );
}

API

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.

Accessibility

The component uses Base UI menu semantics. It supports keyboard navigation, typeahead, focus management, and a modal menu by default. Keep item labels clear, and disable an item only when its action cannot be performed.

Use a non-modal menu only when people must continue interacting with surrounding content while it is open.

Styling

Use the component class name options on the trigger, content, items, or separator to adapt the component to its context. The popup positions and scales from Base UI's transform origin, and reduced-motion preferences remove the entrance transition.

Contact

Found a bug or need help using this component? Open an issue on GitHub.

License & Usage

Sona UI is available under the MIT license. You may use, modify, and distribute this component in personal and commercial projects.

Sona UI