Streaming live at 10am (PST)

Webflow Symbols and Nested Collection Lists

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

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 div = document.createElement("div")

      div.innerHTML = html
      container.innerHTML += div.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 -->

This 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.

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

1 Like