DEV Community

Daniel Neveux
Daniel Neveux

Posted on

Wizar devlog 03: WIP on a circular multi level menu

This week, I have refactored a complex UI component. It is a circular menu with multiple levels. It will be extensively used in Wizar for contextual menu.

It is part of my cross platform UI library: Sproutch which runs on web and React Native with the same code base (thanks to ReactXP

Here are some features of the component:

  • infinite level
  • the children always spread where space are available (so no child out of screen)
  • nodes open on long press
  • user does not lift its finger to open the next node. All navigation is on sliding
  • you can revert to a previous node by sliding on it (it will close the old branch and reopen a new branch)
  • user selects the final leaf by releasing the touch on it.
  • you can use it with a mouse (just click to open/close/select)
  • you have access to the complete path, hovered node, and other informations while the user navigates (still WIP)

This is a gif of the result. It is not ideal because I can't show the touch dummy with my app. But I hope you get the idea.

React and React Native circular menu from Sproutch UI library

Top comments (2)

Collapse
 
bryanmorganoverbey profile image
Bryan Morgan Overbey

I really like the circular multi-level menu. Its very intuitive.

Collapse
 
dagatsoin profile image
Daniel Neveux

Thanks you ! I will put an online demo next week. I will be happy to get your feedback.