Menu with Framer Motion

Abstracting Menu into a reusable dropdown menu component that uses Framer Motion⁠ to create smooth initial and exit animations.

Menu Animated Framer Motion Dropdowns Abstracted examples

Edit example

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
import type { MotionProps, Variants } from "framer-motion";
import { useState } from "react";
import { Menu, MenuItem } from "./menu.tsx";
import "./style.css";

const menu = {
  closed: {
    scale: 0,
    transition: {
      delay: 0.15,
    },
  },
  open: {
    scale: 1,
    transition: {
      type: "spring",
      duration: 0.4,
      delayChildren: 0.2,
      staggerChildren: 0.05,
    },
  },
} satisfies Variants;

const item = {
  variants: {
    closed: { x: -16, opacity: 0 },
    open: { x: 0, opacity: 1 },
  },
  transition: { opacity: { duration: 0.2 } },
} satisfies MotionProps;

export default function Example() {
  const [open, setOpen] = useState(false);
  return (
    <Menu
      label="Options"
      open={open}
      setOpen={setOpen}
      animate={open ? "open" : "closed"}
      initial="closed"
      exit="closed"
      variants={menu}
    >
      <MenuItem {...item}>Edit</MenuItem>
      <MenuItem {...item}>Share</MenuItem>
      <MenuItem {...item}>Delete</MenuItem>
      <MenuItem {...item}>Report</MenuItem>
    </Menu>
  );
}

import type { MotionProps, Variants } from "framer-motion";
import { useState } from "react";
import { Menu, MenuItem } from "./menu.tsx";
import "./style.css";

const menu = {
  closed: {
    scale: 0,
    transition: {
      delay: 0.15,
    },
  },
  open: {
    scale: 1,
    transition: {
      type: "spring",
      duration: 0.4,
      delayChildren: 0.2,
      staggerChildren: 0.05,
    },
  },
} satisfies Variants;

const item = {
  variants: {
    closed: { x: -16, opacity: 0 },
    open: { x: 0, opacity: 1 },
  },
  transition: { opacity: { duration: 0.2 } },
} satisfies MotionProps;

export default function Example() {
  const [open, setOpen] = useState(false);
  return (
    <Menu
      label="Options"
      open={open}
      setOpen={setOpen}
      animate={open ? "open" : "closed"}
      initial="closed"
      exit="closed"
      variants={menu}
    >
      <MenuItem {...item}>Edit</MenuItem>
      <MenuItem {...item}>Share</MenuItem>
      <MenuItem {...item}>Delete</MenuItem>
      <MenuItem {...item}>Report</MenuItem>
    </Menu>
  );
}

Components

MenuAccess a set of commands within a dropdown menu. This component is based on the WAI-ARIA Menu Pattern and the WAI-ARIA Menu Button Pattern.

View all components

The useMenuStore hook allows for the use of controlled props, such as open and setOpen, which can be used to manage the state of the menu from outside the component. These props are compatible with React state and can be easily passed via props.

In this example, we use this method to expose a simpler API:

function Menu({ open, setOpen }) {
  const menu = Ariakit.useMenuStore({ open, setOpen });
}
function Menu({ open, setOpen }) {
  const menu = Ariakit.useMenuStore({ open, setOpen });
}

You can learn more about controlled state on the Component stores guide.

AnimatePresence

We use the AnimatePresence⁠ component from Framer Motion to animate the Ariakit Menu component when it gets mounted and unmounted from the DOM.

<AnimatePresence>
  {mounted && (
    <Ariakit.Menu store={menu} render={<motion.div />}>
      {children}
    </Ariakit.Menu>
  )}
</AnimatePresence>
<AnimatePresence>
  {mounted && (
    <Ariakit.Menu store={menu} render={<motion.div />}>
      {children}
    </Ariakit.Menu>
  )}
</AnimatePresence>

To dynamically render the menu component, you can use the mounted state that can be retrieved from the store:

const menu = Ariakit.useMenuStore({ open, setOpen });
const mounted = menu.useState("mounted");
const menu = Ariakit.useMenuStore({ open, setOpen });
const mounted = menu.useState("mounted");

You can learn more about reading state from the store on the Component stores guide.

Related examples

Dialog with Framer MotionUsing Framer Motion to add initial and exit animations to a modal Dialog and its backdrop element.

Tooltip with Framer MotionAbstracting Tooltip into a reusable custom component that uses Framer Motion to create smooth initial and exit animations.

SubmenuRendering nested Menu components to create a dropdown menu with submenus that open when hovering over the parent menu item.

MenuItemCheckboxRendering a dropdown Menu using the MenuItemCheckbox component with the values and setValues props from MenuProvider to control the checked items.

Navigation MenubarUsing Menubar, Menu, and Portal to create an accessible, tabbable navigation menu widget with links and menu buttons that expand on hover and focus.

Command MenuCombining Dialog and Combobox to enable users to search a command list in a Raycast-style modal.

View all examples

Menu with Framer Motion

Components

Controlling the Menu state

AnimatePresence

Stay tuned