Set of drop-downs based on CMS collection, with top-level navs to CMS pages - possible?

I have two CMS collections at play here. One we’ll call “categories” generically (we don’t use that name, since it’s reserved for ECommerce, but I’ll use it here). The other is called “subcategories.” We have page templates for the categories. I believe we’ll also need to create page templates for the subcategories, which will essentially be filtered versions of the category pages.

What I want in our navbar is a set of dropdowns, each of which correspond to one of the categories. I want the dropdown links for each of those dropdowns to be links to the subcategory pages relevant the category. I also want the top level of each dropdown to not just be a bit of text describing the dropdown items, but also a link itself to the category CMS page (i.e. the unfiltered version).

How can this be accomplished? I’ve been able to create a dropdown whose items link to the pages of a CMS collection, but I’m not sure how to kind of inception this into a SET of dropdowns ultimately based on a hierarchical set of CMS collections.

Just to illustrate, let’s say my “categories” were “fruits” and “vegetables.” My “subcategories” might be “citrus, melon” and “tuber, cruciferous” respectively. I’d want a set of drop-downs whose top-level items link to the unfiltered “fruits” and “vegetables” pages, and whose dropdown links link to the filtered versions of those pages based on their subcategories.

Thanks!

Hi David - If I understand correctly it may be achieved as follows:

  1. Add a div block within the nav.
  2. Create your top level category link eg. /fruits and place inside the div.
  3. Drag in the subcategories Collection List into the div (below the category link).
  4. Presuming the subcategories are referencing the categories in the collection list, use a filter eg. ‘Collection List reference equals Fruits’. This will remove all subcategories that are not Fruits.
  5. Create links from the subcategories Collection List to the page templates.

Excellent, thank you.

Is it possible to go a step further and use a collection list for the top-level items, as well? Or is that kind of nesting not going to be allowed?

I guess using specifically the method you presented wouldn’t work because it requires a category-specific filter for each set of subcategories…I’m really wondering whether you can completely templatize things here…i.e. you have a collection list responsible for the top-level navs, and then the drop-downs are filtered to “the subcategories that apply to this specific category.”

That list bit of logic, “the subcategories that apply to this specific category,” I believe could be achieved using some property placed on each subcategory that references its parent category.

But is this possible?

Turns out this IS possible - I was able to do it. I created a “parent category” attribute for my subcategory, and then filtered the subcategory links displayed for any given category by "does the parent category equal the current top-nested category. References worked out nicely that way.

The problem - you can’t have a symbol with a nested collection…so it seems I cannot make this into a symbol, which I definitely want to do so I can perpetuate this nav across all pages.

Any fix to this?

Not as present - You can vote for the wishlist item ‘Saving Nested Collections as Symbols’. Alternatively, you may have to experiment further with references, multi references and filters to achieve this effect - or manually add the top level categories for the timebeing.

I want to update here, in case this is useful to anyone else. I would think it would be, given how common subcategorized dropdown navigations are.

I ended up employing the Jquery script by fin sweet discussed on many threads around here, for getting around various nested collection list limitations: CMS Nest - Nest Webflow CMS Collection lists without limitations

The long and short of the solution is that you can create a symbol out of a navbar, and that nav bar will have an “extra” collection list adjacent to its top-level nav container - i.e. not a nested collection list. That’s your collection list of subcategories which the Jquery script yanks to pull into the nav. So it will show up and look funky in your webflow designer view, but it won’t show up when you actually publish.

This workaround basically means there is “not” a nested collection list in the nav symbol…it becomes a nested collection list once the script pulls in the subcategories list. Follow the instructions from that link very specifically, and you can get your subcategorized dropdowns.