Ariakit
/

Components

Controlling the Menu state

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

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

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

Follow updates

Join 1,000+ subscribers and receive monthly updates with the latest improvements on Examples.

Read latest issue

No Spam. Unsubscribe at any time.