Animated React menus, tabs and navigation

Context menu

Right click the card for a menu where every icon animates. Copy link rolls to Link copied, Move to slides out a submenu, and Delete asks twice.

Navigation, right click, Motion

Install

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

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

Usage

import { ContextMenu } from "@/components/context-menu";
import { CopyIcon } from "@/icons/copy";
import { DeleteIcon } from "@/icons/delete";

export default function FileRow({ file }) {
  return (
    <ContextMenu
      label={`${file.name}, right click for actions`}
      items={[
        { id: "copy", label: "Duplicate", icon: CopyIcon, shortcut: "⌘D", onSelect: () => duplicate(file) },
        { separator: true },
        {
          id: "delete",
          label: "Delete",
          icon: DeleteIcon,
          danger: true,
          confirm: "Click again to delete",
          feedback: "Moved to trash",
          onSelect: () => remove(file),
        },
      ]}
    >
      <FileCard file={file} />
    </ContextMenu>
  );
}

Props

Prop	Type	Default	Description
items	ContextMenuItem[]	file actions	Rows: { id, label, icon?, shortcut?, items?, danger?, confirm?, done?, feedback?, onSelect? } or { separator: true }
children	ReactNode	a file card	The area that opens the menu
label	string	"File, right click for actions"	Accessible name for the area
className	string		Placement

More navigation

Profile menu: A workspace profile menu where every icon has its own micro interaction as you hover its row.
Pill tabs: Tabs whose white pill slides like a rubber band, stretching and thinning, then settling, with a motion blur that follows its speed.
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.
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.

All animated react menus, tabs and navigation