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.
Top comments (2)
I really like the circular multi-level menu. Its very intuitive.
Thanks you ! I will put an online demo next week. I will be happy to get your feedback.