A list of actions in a dropdown, enhanced with keyboard navigation. Built on Base UI's Menu.
Installation
Install the packages
Add the shadcn/ui component
Animate it
The CLI finds your shadcn/ui components through components.json, swaps their primitive imports for Animate UI's and removes the CSS animation classes Motion replaces.
Usage
Import the primitive from Animate UI instead of Base UI. Everything else stays the same.
import { Menu } from '@animate-ui/react/primitives/base-ui/menu';
export function AccountMenu() {
return (
<Menu.Root>
<Menu.Trigger>Account</Menu.Trigger>
<Menu.Portal>
<Menu.Positioner sideOffset={4}>
<Menu.Popup>
<Menu.Item>Profile</Menu.Item>
<Menu.Item>Billing</Menu.Item>
<Menu.Separator />
<Menu.Item>Log out</Menu.Item>
</Menu.Popup>
</Menu.Positioner>
</Menu.Portal>
</Menu.Root>
);
}Using the @base-ui/react umbrella import instead? The barrel mirrors it: import { Menu } from '@animate-ui/react/primitives/base-ui'.
shadcn/ui's Dropdown Menu is built on it.
Check animation
Checkbox and radio items show their check in a CheckboxItemIndicator or a RadioItemIndicator: it draws itself when the item is checked, and erases itself when it's unchecked (a radio item's while the new one draws). With animation="pop", it pops in from half its size and shrinks back out instead, and a radio item's check glides to the newly checked item:
import { Menu } from '@animate-ui/react/primitives/base-ui/menu';
export function ViewMenu() {
return (
<Menu.Root>
<Menu.Trigger>View</Menu.Trigger>
<Menu.Portal>
<Menu.Positioner sideOffset={4}>
<Menu.Popup>
<Menu.CheckboxItem defaultChecked>
<Menu.CheckboxItemIndicator animation="pop">
<CheckIcon />
</Menu.CheckboxItemIndicator>
Status bar
</Menu.CheckboxItem>
<Menu.Separator />
<Menu.RadioGroup defaultValue="bottom">
<Menu.RadioItem value="top">
<Menu.RadioItemIndicator animation="pop">
<CheckIcon />
</Menu.RadioItemIndicator>
Top
</Menu.RadioItem>
<Menu.RadioItem value="bottom">
<Menu.RadioItemIndicator animation="pop">
<CheckIcon />
</Menu.RadioItemIndicator>
Bottom
</Menu.RadioItem>
</Menu.RadioGroup>
</Menu.Popup>
</Menu.Positioner>
</Menu.Portal>
</Menu.Root>
);
}The same demo with checkAnimation="pop" (its Controls switch it back to draw):
To pop every check of your app at once (checkboxes, menus, selects, comboboxes), set checkAnimation="pop" on an AnimateUIProvider instead.
Animation
The motion of Animate UI v1's Base UI Menu:
- Popup fades and scales in from 0.9, from the trigger (
--transform-origin, set inline so it works without styles), in 220ms ({ duration: 0.22, ease: [0.215, 0.61, 0.355, 1] }, a soft ease-out), and closes the same way. Submenu popups grow from the side of their trigger the same way. - Base UI keeps the popup mounted after it closes, and Animate UI unmounts it once the exit has played (
onOpenChangeCompletefires then). - The highlight: one surface glides behind the highlighted item on a spring (stiffness 500, damping 40), following the pointer and the arrow keys alike, and into submenus. Moving to another item, it carries on from where it is, at its speed: however fast the pointer or the arrow keys go, there's one highlight on screen. It only fades in (200ms, on CSS's
ease) when it appears from nothing, and its color changes the same way when the item's highlighted background differs from the previous one's. It glides on the compositor (a Web Animation oftransform), so a busy main thread, a submenu opening for instance, doesn't stall it. Into a submenu or back out of it, each menu clips its own part, as in v1: the previous surface glides along with the new one, the same box on screen, so the two make one highlight crossing from one menu into the other; the entering part fades in as it glides. When the pointer leaves the menu, it stays on the last item. It wears the item's own highlighted background (focus:bg-accent,data-highlighted:bg-accent…), read from your styles: the item's background is cleared while it's highlighted (or still has the focus, or its submenu is open), and afocus:background is read again once the item has the focus; its text colors stay. - CheckboxItemIndicator and RadioItemIndicator draw themselves like a Checkbox's check (their stroke and opacity in 0.3s on Motion's easeOut, at once: there's no box to fill first) when the item is checked, and erase themselves in 0.3s when it's unchecked (Animate UI keeps them mounted for that). Checking another radio item erases the old check while the new one draws itself. Only checking and unchecking animate: opening the menu shows its checks at rest, and closing it leaves them as they are.
- With
animation="pop"on an indicator (orcheckAnimation="pop"on anAnimateUIProvider), checks pop instead: in from half their size out of a 2px blur (a spring, stiffness 500, damping 24), and back into their blur in 0.15s. A radio item's check doesn't pop from one item to another: it glides from the item it leaves to the newly checked one, on the highlight's spring (stiffness 500, damping 40), like a select's. The demo's Controls switch between the two. - With
closeOnClickon an item, choosing it closes the menu: when its check changes (a checkbox item's, or another radio item's than the checked one), the menu holds still first (250ms while a check draws itself, 150ms while it pops or glides), so the change is seen. Escape and outside clicks don't wait. - When the menu closes with focus inside, focus goes back to the trigger at once instead of after the exit, and the leaving popup ignores the pointer.
- With
keepMountedon the Portal, the closed popup stays in the DOM and Base UI hides it after the exit. - Open from the start (
defaultOpen), the menu plays its entrance on page load, like v1. - Under reduced motion, nothing scales or glides: the menu and the checks only fade, and the menu doesn't hold; the highlight jumps from item to item and only fades in when it appears.
API Reference
Every part takes exactly the props of Base UI's Menu. Animate UI adds the animation props below. The Popup's render prop is used by the animation.
Root, SubmenuRoot, Trigger, Portal, Positioner, Group, GroupLabel, RadioGroup, Separator, Arrow, Backdrop, Viewport
Base UI props only. They are not animated.
Item, LinkItem, CheckboxItem, RadioItem, SubmenuTrigger
Base UI props only. They take part in the highlight; it needs nothing more.
Popup
Base UI props, plus:
| Prop | Type | Default |
|---|---|---|
transition? | Transition | { duration: 0.22, ease: [0.215, 0.61, 0.355, 1] } |
exitTransition? | Transition | transition |
CheckboxItemIndicator, RadioItemIndicator
Base UI props, plus:
| Prop | Type | Default |
|---|---|---|
animation? | 'draw' | 'pop' | the closest AnimateUIProvider's checkAnimation, else 'draw' |
transition? | Transition | draw: 0.3s on Motion's easeOut both ways (a Checkbox's, without its delay); pop: a spring (stiffness 500, damping 24) in, 0.15s out, and the highlight's spring (stiffness 500, damping 40) for the glide |