Menu accordion system - 3 levels

Community resources Getting started
1

Hi, I am looking for advise. How would one create a nested menu system from the CMS. The menu will have a category, subcategories and items. Im looking for any add-on tools or nested collection magic to help solve this one. I can tackle the accordion part, its the data structure to create the example in the image below.

Thanks in advance!

image
image720×1496 83.1 KB

2

In truth, it’s not ideal, but it can be done with creative CMSing and custom code.
Here’s one approach I’ve used;

  • Category collection, describes category
    • Has a numeric pos column if you need to control sort order
  • Item collection, describes items
    • Has a numeric pos column if you need to control sort order
    • Generally this is where all of the content is
  • Sub-category collection, describes sub-cats
    • Has a numeric pos column if you need to control sort order
  • Xref collection, describes the hierarchy
    • Single ref to Category
    • Single ref to Subcategory
    • Single ref to Item

Drop a collection list, bind it to Xref. In the collection list item, you’re going to pull all of your data through the single-refs;

  • Category name and slug
  • Subcategory name and slug
  • Item name and link
  • Anything else you need

Sort on Category sort key, then Subcategory sort key, then Item sort key.

Your collection list then has all of the data you need to construct your nav. Actually constructing it from there is all custom code, duplicating elements to create your cats, subcats, etc. The slugs are used to distinguish the grouping breaks, safer than relying on the names

I often pull that data directly into JSON if possible and then aggregate it into an array, makes it super easy to navigate. Or, you SA5 Data if you want to use a more Webflow-friendly object notation;

Your accordion interactions work great if they’re class-based, but you’ll need to re-initialize IX2 after your nav build script runs.

3

Hi Michael, thanks for the explanation. I will try recreate this when I get a little time. I am currently investigating the powerful tools from Finsweet’s new Attributes tools. It has the ability to nest as many collections as you need to build a tool without the current Webflow limitations.