Animated React menus, tabs and navigation

Action menu

A dropdown where every action answers back: the highlight slides between items, copy draws a check, download bounces and washes a light gray fill across, links nudge their arrow.

Navigation, press, then hover, Motion + GSAP

Install

npm i @gsap/react clsx gsap motion tailwind-merge && curl -o components/action-menu.tsx https://motion-brew.com/r/action-menu.tsx

One self contained file for React and Tailwind CSS: action-menu.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { ActionMenu } from "@/components/action-menu";

export default function Page() {
  return (
    <ActionMenu
      label="Export"
      items={[
        { kind: "copy", label: "Copy as Markdown", copyText: markdown },
        { kind: "download", label: "Download PDF", onSelect: () => exportPdf() },
        { kind: "separator" },
        { kind: "link", label: "Open in editor", href: "/editor" },
      ]}
    />
  );
}

Download items wait for a returned promise before drawing the check, so the fill covers the real work.

Props

Prop	Type	Default	Description
label	ReactNode	"Brand assets"	Trigger button label
items	ActionMenuItem[]	brand-asset menu	copy, download, link or separator entries
defaultOpen	boolean	false	Start open
confirmFor	number	1400	How long the check shows, ms

More navigation

Blur accordion: Panels spring open and smear with a vertical motion blur that follows their speed, while the plus folds into a minus and the answer rises into focus.
Tab bar: A white, fully rounded mobile bottom navigation in three styles: a gliding soft gray pill, icons with labels and a dot, or a raised action button.
Account menu: A profile pill that morphs into an account card: a status picker that recolours the avatar's dot, quick tiles that lift, a workspace switcher whose check flies, a filling storage meter and a log out that asks twice.
Liquid tabs: Icon tabs where the chosen tab is a white bump grown out of the panel.

All animated react menus, tabs and navigation