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 = Ariakit.useStoreState(menu, "mounted");

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

Stay tuned

Join 1,000+ subscribers and receive monthly tips & updates on new Ariakit content.

No spam. Unsubscribe anytime. Read latest issue