I have a navigation system I am building out that I would like some help on the best way to go about this.
I have a mega menu that 3 out of 4 drop downs are quite simple, however the 4th dropdown is quite complex as our services are grouped by business group, industry and product to make it easier for a vast client base to source information.
Originally I had put all of my menu items into a CMS, however I quickly found out about the 20 collections per page limit that this format exceeded. I have now built this out using components, nested within components, and tabs nested within tabs nested within dropdowns however this making it incredibly slow to manage and work with whenever I need to make changes, not to mention being a complex solution to show others in my team how to work with this once we go live.
I am wondering if there are any best practices I could be following when building out complex mega menus? Is there another method of achieving this that I have not considered?
Due to privacy reasons, I cannot share a link, however these sites are almost exactly what I am trying to achieve in terms of looks, nesting and complexity.
I am only really looking into native options at this point as my team does not have a developer and I think this is a bit too complex to create with any code for my team.
Native solutions will be limited but if you’re OK with static content, one of the things I do to improve admin in Webflow is leverage content components on style guide pages.
Component - Nav
Nav
Dropdown - Mega
Tabs
Tab 1
Component - Nav | Products by Industry
Tab 2
Component - Nav | Products by Solution
Tab 3
Component - Nav | Products by Technology
Then on a different, drafted page like /admin/nav I’d drop those same components;
Component - Nav | Products by Industry
Component - Nav | Products by Solution
Component - Nav | Products by Technology
This is because doing admin work on anything inside of Webflow’s nav element is difficult- especially when it comes to complex mega menus in mobile breakpoints. This approach makes it much easier to manage the content and responsiveness of those menus.
However, in your case it sounds like you already have that data in the CMS to drive those product pages, which means that ideally that would be directly serving the mega menu as well.
The approach I’d use there is probably to put a Finsweet CMS filter inside mega menu, so that you only need 2 collection lists- one for the categories, and one for the product pages.
I do have a dedicated navigation style page that I am using to work on this, a lot of it is broken down into smaller components, but I might try break it down even further.
I had started to think about using finsweet filters as a way to achieve this rather than using tabs, but we go live in a couple of weeks, so I may park that idea for the moment to explore at a later date.
I just wanted to see if there was something I was maybe missing, but it looks like I am on the right track for what I need to achieve.