Need help with Nesting lists

Attributes
1

Hi!

I’m trying to build a robust documentation center.

There are thee CMS collections:

  • Categories
  • Subcategories
  • Articles

Articles can have multiple categories and subcategories. But for now only one category and one subcategory.

On each CMS collection page there would be a side menu with articles grouped by subcategories. These subcategories are relevant to one category. Please see the image attached.

Currently, I’m trying to build this on the Articles page.
I added the subcategory CMS collection, filtered it to the category that is selected in the Article. Then followed the steps to nest the articles inside the Subcategory collection.
But I can’t make the list of articles appear.

Please use the “Documentation” category, “Getting Started” category and article “Get Access to… (3 steps)”

I tried with v2 and v1 - couldn’t make them appear.

Staging website

Webflow link

Side question: In the documentation you say that I need to add a multi-reference cms collection. But in the cloneable it seems that you’ve just added a CMS collection (FAQs), not multi-referencing it.

So the only way to make it work is for users to add an article to the subcategory after creating an article to make it appear in the nested list?

Screenshot 2026-01-21 at 19.59.57
Screenshot 2026-01-21 at 19.59.57626×1952 75.7 KB

2

After a few hours of battling with this, I made it work.

But now I have two other questions:

  1. How can I filter, sort and apply limits to a Nested list?
  2. Is it possible to make the nested lists load faster? Currently, there is a bit of a flash happening

Evgeny

3

Hi @mishin.ei10

Great to see you got the nesting working

How’s the filter, sort, & limits?

One way to avoid showing the flash is to start off at a visibility:hidden then show the list once the list loads

4

Hi Jesse,

So the latest setup is that chatGPT provided a script to sort the nested collection based on a CMS field.
It works but sometimes it loads not fast enough.

I’m curious if you have any suggestions regarding sorting and filterting nested lists?

5

Hi @mishin.ei10

Looks like the reason it might be taking time is because of the setTimeouts in the runSoon function

// Wait a tiny bit for nesting to settle, then sort
  function runSoon() {
    requestAnimationFrame(() => {
      sortAll();
      setTimeout(sortAll, 80);
      setTimeout(sortAll, 200);
    });
  }

Maybe you could try polling using setInterval so the code runs once the NESTED_LIST_SELECTOR is available for instance

const startTime = Date.now();
const maxWait = 10000; // 10 seconds

const intervalId = setInterval(() => {
  const el = document.querySelector(NESTED_LIST_SELECTOR);

  if (el) {
    clearInterval(intervalId);
    console.log('Element found:', el);
    return;
  }

  if (Date.now() - startTime > maxWait) {
    clearInterval(intervalId);
    console.warn('Element not found within time limit');
  }
}, 1000);

Or better yet, you could utilize a MutationObserver

const observer = new MutationObserver(() => {
  const el = document.querySelector(NESTED_LIST_SELECTOR);

  if (el) {
    console.log('Element found:', el);
    observer.disconnect();

    // Your logic here
  }
});

observer.observe(document.body, {
  childList: true,
  subtree: true
});