Navigation Component - open/close sections programmatically

I'm building a web app with a sidebar containing a vertical navigation component with two levels.
I want to be able to expand the menus programmatically, either via Properties or Methods on the navigation component.

I can run the following in the Chrome devtools console to expand the menu items:
document.querySelectorAll('button[id*="navigation1"]').forEach(el => el.click());
So I tried using a preloaded javascript function + a JS Script, but I couldn't get it to work. And even if I could get it to work, this isn't a good solution. Here's a sample app to demonstrate: Navigation Menu open sections by default.json (11.8 KB)

Assuming I'm not overlooking an existing way to do this, I'd like to suggest a new feature that add Properties or Methods to the Navigation component that allow us to programmatically open/close menu items.

Thanks for the feedback! Yes, this is a feature request in our backlog. I'll follow up if our team is able to ship a solution

2 Likes

I came to the forums hunting for this too. I would really love an option to default all the sections to stay open.

I want the structure of the parent -> child, but don't really ever want them to roll-up. I would even go as far to say, I would even like to be able to disable the roll-up entirely and remove the chevrons.

Thanks for these helpful details, @khill-fbmc

This feature request hasn't been prioritized on our roadmap yet, but I shared your specific feedback/use case with the team!

1 Like