CMS List Nest
Nest more than 10 items and unlimited collections on a page: the multi-reference workaround for Webflow.
CMS List Nest clones items from a usually hidden source list into slots inside your target item. As many as you like, nested as deep as you like. Entirely through fpu-nest attributes.
- Source listHidden on the page, supplies the items.
- SlotDiv block in the target item, receives the copies.
- OrderSlug order in refs determines the output.
Add this <script> to your project's custom code
Once per project is enough, even if you use the solution on several pages: Project Settings → Custom Code → Head Code. The script loads alongside the page without holding up rendering; it runs once the page is in place and does nothing while no fpu attribute is there.
<!-- FlowPowerUser · CMS List Nest -->
<script defer src="https://cdn.jsdelivr.net/npm/@flowpoweruser/attributes@1/list-nest.js"></script>Add the attributes on the target page
On the page where the nested list should appear, define the slot that receives the copies.
Target slotThe div block inside the target item that receives the nested items.
Select a div block inside the target item and give it these attributes. target marks the slot, refs lists the slugs to nest (comma-separated, order = render order), and collection names the source collection. collection is optional if only one source exists on the page.
Bind fpu-nest-refs to a CMS field (plain text holding the multi-reference slugs) so each item carries its own references.
Empty stateStays in place when there are no matches, otherwise it is removed.
Place an element inside the target slot that shows when no referenced items are found. When there are matches, the script removes it automatically.
Add the attributes on the source list
Place the source list anywhere on the same page, usually hidden. Its items are cloned into the slots.
Source listThe collection list items are cloned from.
Select the collection list of the source collection and give it these attributes. After processing, the list is hidden automatically (display:none).
The collection value on the source list and the target slot must match exactly, otherwise the script won't find the source.
Source itemEach item of the source list carries its slug.
Give the collection item the slug it is referenced by in fpu-nest-refs, then bind it to the slug field via CMS.
Publish and check on the live site
Attributes solutions do not run in Designer, Edit or Preview mode. Publish your project and test the result on the published site, after every change.
OptionalMore settings
LimitMaximum number of inserted items per slot.
Add this attribute on the target slot to cap the number of inserted items.
Keep source visiblePrevents the source list from being hidden automatically.
By default the source list is hidden after processing. With this attribute it stays visible, which helps while building.
LoggingWrites one init line to the console.
Logs one line to the browser console on init, which helps while debugging.
Global defaultsSets defaults for all slots via script.
Define global defaults in a <script> after the include. An attribute on the element always wins over the global value. Example: window.fpuListNestConfig = { limit: 6, logging: false, hideSource: true }
Additional features
- Programmatic API
- window.fpuListNest exposes instances, init(), refresh() and destroyAll(), e.g. to re-nest after your own CMS loading.
- Events
- fpu:items-changed fires per populated target list (detail: { solution: 'nest', list }). Conversely, List Nest reacts re-render-tolerantly to events from other solutions (Load More, Filter) and refills new slots automatically.
- Multi-level nesting
- Source items may contain slots themselves; nesting is resolved up to depth 5 (which also guards against circular references).
- Note: interactions & IDs
- Source items are cloned (cloneNode), since several targets can use the same source. Webflow interactions (IX2) do not survive cloning; id attributes are carried along, so id-based anchors in source items may produce duplicates.