At first glance, this looks simple and like 1995, but so far I have not been able to implement it in Webflow including CMS categories, subcategories and corresponding support blog posts.
The first problems are already encountered when integrating a dropdown into another dropdown.
Does anyone have experience with such multi-level CMS dropdowns?
In addition, after clicking on a support post, the sidebar should not close but, as with Microsoft, remain open and the corresponding page in the sidebar should be recognizable as the current one.
Webflow doesn’t have this kind of hierarchical nav as a native component so you’d need to construct it yourself. I’d break it into 3 parts;
The nav hierarchy itself. That’s pretty simple- just DIVs, text, links, collection lists.
The detect-and-select current. Determines the current page and highlights the current item. You might be able to achieve that with webflow’s built in- w--current style mechanic which is already built into webflow.js.
The expand/collapse capability.
That 3rd part is likely to be the most awkward piece so I’d save it for last, and avoid it if it’s not really necessary. If you do need it, here are some tips;
Consider using GSAP, not interactions, because it will give you more controlled targeting and because you need to be able to trigger the expand/collapse from code as well on page load. But interactions should be possible if you arrange and sibling-target the elements correctly.
Design the nav so that everything is collapsed at page load. Then determine the current item, walk up the tree and expand only the parents of that item.
Don’t use the Webflow dropdown element here
Dropdowns have a different mechanic. When open, they are designed to overlay the page, which means they have an auto-close mechanic. Click anywhere on the page, all dropdowns close. This would be very difficult behavior to fight in your use case.
This would be fun to build, if you have a little budget and need someone else to build it, hit me up.
