Programmatic API
window.fpuListNest exposes instances, init(), refresh() and destroyAll(), e.g. to re-nest after your own CMS loading.
CMS List Nest
data-fpu-nest
Nest more than 10 items and unlimited collections on a page: the multi-reference workaround for Webflow.
The principle · Why List Nest
2 × 10Webflow limit∞With List Nest
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 data-fpu-nest attributes.
- Quell-ListeHidden on the page, supplies the items.
- SlotDiv block in the target item, receives the copies.
- ReihenfolgeSlug order in refs determines the output.
PlaceholderTutorial video
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 → Footer Code. The script loads deferred and only starts when it finds a data-fpu attribute on the page.
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.
Tip
Bind data-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).
Important
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 data-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.
OptionalOnly needed when you need it — expand
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 }
More capabilitiesAdditional features
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.