Webflow Symbols and Nested Collection Lists

Community resources Webflow Tips
1

EDIT 1: Before reading this, make sure to check CMS Nest - Nest Webflow CMS Collection lists without limitations (finsweet.com). Maybe it covers what you need in a simpler way.

Hey everyone.

The following code is intended for the more JS-savvy people that will be able to figure out things from here. I don’t have the time to create a fully fledged tutorial on this, but this should give you guys a nice place to start.

This is intended to go around the issue of Webflow not allowing Nested Collection lists inside symbols

The code is basically fetching the specific section with nested collection lists from a hidden page. That section is outside a symbol on that hidden page, but will be dropped inside the symbol (navbar in this case) once people open any page with the navbar.

In this example, I place the following code inside an EMBED BLOCK with id=“mega-themes-nav-container”. The embed block itself is inside the navbar symbol.

<!-- START - Workaround for WF Nested Collections Lists inside symbols -->
<!-- 
This is required due to Webflow's limitation that doesn't allow us to use nested collection lists
inside symbols. In this case, navbar is the symbol, and the nested collection list is Mega-Themes and Sub-Themes 
-->
<script>
  (()=>{
    const container = document.getElementById("mega-themes-nav-container")
    fetch("/non-public/components/navbar").then(async (res)=>{
      const html = await res.text()

      const parser = new DOMParser();
      const doc = parser.parseFromString(html, "text/html");
      container.innerHTML += doc.querySelector("#mega-themes-navbar-links").outerHTML;
           
      // Add "current" class to links that point to current page
      document.querySelectorAll("a").forEach(a=>{
        if (a.href === window.location.href){
            a.classList.add("w--current")
        }
      })
    })
  })()
</script>
<!-- END - Workaround for WF Nested Collections Lists inside symbols -->

Anyone with more time, feel free to create a proper tutorial from this

3 Likes
2

Anyone created a proper tutorial for this?

3

The code is commented so I ask what you mean by proper?

1 Like
4

I’m not very good at javascript. I’m trying to create a reusable nav bar with dropdowns from nested collection lists so if there is a way the code can get me there. I’d really love that.

5

Is the path/url in the fetch function project specific? cause I’ve never seen something like that.

6

I’ll create a video for you, but the path in there is specific to each project. /non-public/components/navbar is just a path to a “hidden” page in my Webflow project that I dropped the nested collection list at.

This path can be anything you want, the same way that you will likely need to change the following values: #mega-themes-navbar-links, #mega-themes-nav-container

mega-themes-navbar-links is the ID of the nested collection list in the hidden page

mega-themes-nav-container is the ID of the element that should wrap the nested collection list element. This will be an element inside your symbol.

7

Thank you very much. A tutorial video will be very much appreciated especially for any person that may need this workaround in the future. I finally got the Finsweet CMS nest attribute to work for my use case.

Thank you again for reaching out.