Genstyl — Design System tool | Interacting with deeply nested UI elements via context menu
#DesignSystems #UIDesign #UIUX #FrontEnd #BuildInPublic #WebDesign #ComponentLibrary #DesignToCodebase
Join Genstyl's waitlist 👇🏻
https://genstyl.ovidiu.works/?utm_sou...
Managing a deeply nested structure of UI elements requires efficient interactions. Here’s what led me to rely on the classic context menu for this particular tricky UX problem.
While building the UI for Genstyl, I wanted to be able to interact with the elements in the layout by left-/right-clicking in order to select and view their properties. Clicking for selection, right-clicking to bring up a custom context menu and double-clicking for enabling edit mode. So far it’s a classic model.
When I started nesting structural nodes (boxes within boxes within columns within rows, etc.), some of those had a 100% overlap with their parents (spanning the entire available space). No surprise, that’s standard web page behaviour.
How do I select a parent node when the thing I click on is its child? I didn’t want to force the user to interact with them solely through the side panel tree structure. That felt too tedious and limiting!
Then the lightbulb moment! When you click an element in a web page, an event is fired—starting from the element you just clicked on—and is propagated through all its ancestors until it reaches the top-level element. That got me thinking: each parent can respond to that interaction by “requesting” context menu items to be added!
Each node is now responsible for its own set of context menu items (cleaner code and separation of concerns!).
Now that I had the menu items corresponding with the ancestor chain, I implemented highlighting (on hover) and selection (on click) for the ancestors. This allows me to quickly select the node I’m interested in and I also get a visual indication for it in the UI (outline and margins).
I also added a “Reveal in Side Panel” context menu item, which will expand all the ancestors in the tree and then scroll to that node to bring it in view!
The UI doesn’t feel limiting as before and during my quick layout design sessions it has proven to be a good solution for my tricky UX problem!
Do you have other ideas on how to solve this? Please comment and do let me know!