I am currently developing an application with a sidebar frame, and I've encountered a couple of challenges that I'm hoping you can help me with.
Interacting with Parent Menu Items: In my application, there's a parent menu item, "Project Overview", with several nested menu items. Unfortunately, I've been unable to attach any events to this main parent item. What I aim to achieve is a feature where clicking this parent menu item would load a container to provide some information. Is there a known method for implementing such functionality? or are parent items not supposed to have this functionality?
Best Practices for Sidebar Navigation : I'm considering two possible approaches for sidebar navigation. The first option is to have multiple standard containers and toggle their visibility based on the selected menu item. The second option involves using a Tabbed or Stepped container and updating the "key" based on the item selected in the sidebar. In your experience, which of these approaches aligns more closely with best practices? If there's an alternative method you'd recommend, I'm eager to hear about that as well.
Sorry for the late reply here. A great way to use sidebar navigation is actually when switching between apps. There's some documentation here on how to share data between apps for a multi-page app experience. Doing so can also help individual apps or views stay relatively lightweight which keeps with the app performance best practices.
If you want to navigate between containers in a single app then using a tabbed or stepped container is a great way to go! It depends a bit on how much of the UI should change when someone clicks a different option though. From the screenshots you posted it seems like it could go either way. An important thing to note though, is that tabbed containers don't necessarily need to have a header - so you can create a tabbed container and control the view without actually needing to see tabs:
At the moment parent menu items are not built to support events but I can file an internal request to support it and let you know here if it's picked up! If you'd care to, I'm curious to hear more about what would change when someone clicks a parent item.
Thank you for your response! I appreciate your detailed explanation regarding sidebar navigation and the use of tabbed containers to navigate between different views within a single application.
At the moment we are likely going to implement our sidebar navigation using the tabbed container method to display different information within the same application.
Additionally, the screenshots I posted are indicative of our current design where we use the navigation component to display different project statuses such as "Project Created", "Financing Steps", etc. Are there any other components within Retool that could facilitate this process more efficiently? We experimented with the breadcrumbs component, but it didn't quite meet our needs as it wasn't able to evenly space out the content as the navigation component does.
On the topic of parent menu items supporting events, I appreciate your offer to file an internal request. After discussing further with my team, it seems there was some miscommunication on my end regarding this requirement. As such, we'll hold off on this feature request for now.
Once again, thank you for your help and support. We look forward to utilizing these practices to enhance our application design within Retool.
Hmm... a steps component might be nice but it doesn't look like it supports expanding enough horizontally to allow for longer text:
If you're looking for more customizability you can also explore using a Custom Component. There are a number of libraries available for variations on a stepped progress bar available. Attached is an example of one that uses the Ant Design library, you may want to find your own example that best meets your needs! custom_step_progress.json
