Menu Component

Today I want to share a quick update on the Menu component we’re currently rebuilding at Roopairs. It’s a great opportunity to enhance functionality, improve the visual design, and streamline how it’s organized in both Figma and code.

We’re still in the middle of the process, so what you see here is just a sneak peek. Thought it’d be nice to give you a behind-the-scenes look as we go.

The Menu component supports multi-level structures and includes various item types — default, selectable, toggle, draggable, etc. Each of these plays a role in different use cases. One of our main goals is to build a flexible infrastructure that makes it easy to configure and customize depending on the context.

Just like components such as Select List, Prompt, or Dialog, the Menu is represented by a drawer on mobile. It reuses the same components and structure as the desktop version, with one key difference: on mobile, the drawer includes a title, which is inherited from the menu trigger label.