AttRibutes
List Nest
What is this page about?

Attributes, by Finsweet, offers a free series of Solutions that provide essential features to improve your Webflow websites.

List Nest

Nest more than 5 items, and nest multiple collections on a page in Webflow

Watch a quick tutorial

List Nest enables nesting multiple lists bound to multi-reference fields inside a Collection List Item without limitations. Here's what you need to know:

  • This solution works by adding custom attributes to specific elements for identification.
  • Carefully follow the steps below to define a Target List (on a static page) that will host the Nested List from the Collection Template page. On the published site, Attributes List Nest will automatically bring the Nested List from the Template page to the static page where the Target List is.

List Nest • Flash Card

Copy Script

For advanced users familiar with this solution. Includes all attributes from this page. Click on attributes and values to copy them.

Required attributes on the Target List page

Target List

Add to Collection List on the Collection List element

fs-list-element
=
"
list
"

Target Div

Add to Div

fs-list-element
=
"
nest-target
"
fs-list-nest
=
"
IDENTIFIER
"

Item Link

Add to a Link element

fs-list-element
=
"
item-link
"

Important: set this link to the CMS Current page in the Link Settings panel.

CMS Field Slug (Plain text method)

Add to Div Block

fs-list-element
=
"
nest-slugs
"
fs-list-instance
=
"
list
"

CMS Collection Source (Plain text method)

Add to Collection List

fs-list-element
=
"
list
"
fs-list-instance
=
"
IDENTIFIER
"

Required attributes and settings on the Collection Template page

Nested List (Wrapper)

Add to the Collection List Wrapper element (NOT to the Collection List element)

fs-list-element
=
"
wrapper
"
fs-list-instance
=
"
INDENTIFIER
"

Collection settings

Required: Bind this List to a Multi-reference field of the Target List Collection, NOT to a Collection.

Collection Item link

Required: Set the Collection Item link link to the CMS Current page in the Link Settings panel.

Collection Item link

Required: Set the Collection Item link link to the CMS Current page in the Link Settings panel.

Optional attributes

Disable caching (Optional)

Add to Collection List

fs-list-cache
=
"
false
"
1

Add this <script> inside the <head> tag of your page or project

This script is the universal Attribute script: you only need to include it once, even if you have multiple Attribute solutions on the page. Learn more .

<script async type="module"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
fs-list
></script>

Copy Script
2

Choose which nesting method your Collection List needs

Default - Fetch CMS Items

It sends requests to the Template Page of each item to fetch the nested CMS items

Alternative method

Use a list of CMS items as plain-text to improve loading time. Use it in case of performance issues.

3

Default method - Add these required attributes and settings

Target List

Defines the List in which the Nested List will be added
fs-list-element
=
"
list
"

To define the Target List — the Collection List in which you want to nest another List — select the Collection List element and add this attribute.

Add this attribute:
Name
fs-list-element
Copy
Value
list
Copy
Add it to those type(s) of element(s):
Collection List
EXAMPLE

If you want to display a list of “Blog Posts” and include a nested “Categories” Collection List within each item, apply this attribute to the “Blog Posts” Collection List.

This List represents the primary content you aim to display.

Target Div

The Div Block in which the Nested List will be placed
fs-list-element
=
"
nest-target
"
fs-list-nest
=
"
IDENTIFIER
"

To define where the Nested List will be positioned, select a Div Block element inside the Collection Item element and add these attributes to it. This Div Block will act as the wrapper for the Nested List

Choose an IDENTIFIER value that represents the content of your Nested List, e.g., categories. You will use the same IDENTIFIER in a later step to create a connection between the Target Div and the Nested List.

Add this attribute:
Name
fs-list-element
Copy
Value
nest-target
Copy
Add this attribute:
Name
fs-list-nest
Copy
Value
IDENTIFIER
Copy
Define your own value instead of IDENTIFIER. Example:
fs-list-nest = "categories"
Add it to those type(s) of element(s):
Div Block
IMPORTANT

This Div Block must be inside of the Collection Item of the Target List, the one you've added fs-list-element="list" to.

Item Link

Creates a connection between the Target List and the Collection Template page
fs-list-element
=
"
item-link
"

This step ensures a connection between the Target List and the Collection Template page.

  1. Select a Link element inside the Collection Item — if there's none, create one — and add this attribute.
  2. Set this link to the CMS Current link in the Link Settings panel — it's the link to the Collection Item page.
Add this attribute:
Name
fs-list-element
Copy
Value
item-link
Copy
Add it to those type(s) of element(s):
Link Block
Text Link
Button
IMPORTANT

This step is mandatory for the solution to work. Please double-check that there is a Link element in the Collection Item and that it’s set to the Collection Template page.

Nested Items

On the CMS Template page
fs-list-element
=
"
wrapper
"
fs-list-instance
=
"
IDENTIFIER
"

This step needs to be performed on another page, specifically the Collection Template page of the Target List, the one you set with fs-list-element="list" in the first step. WARNING: not on the Template page of the Collection you want to nest.

  1. On the Collection Template page, create a Collection List and bind it to a Multi-reference field of the Target List Collection.
  2. Select the Collection List Wrapper element and apply these attributes. Ensure the IDENTIFIER value matches the one defined for the fs-list-nest="IDENTIFIER" attributes from the previous steps.
  3. Add your content in the Collection Item element. This List displays exactly what will appear on each Collection Item of the Target List. The way you add and style its content here on the Collection Template page is how it will be shown, nested in the Target List, on the published site.
Add this attribute:
Name
fs-list-element
Copy
Value
wrapper
Copy
Add this attribute:
Name
fs-list-instance
Copy
Value
IDENTIFIER
Copy
Define your own value instead of IDENTIFIER. Example:
fs-list-instance = "categories"
Add it to those type(s) of element(s):
Collection List Wrapper
IMPORTANT

The fs-list-element="wrapper" attribute must be added to a Collection List Wrapper element, NOT to the Collection List element that's inside of it.

The Nested Collection List on the Collection Template page must be bound to a Mutli-reference field of the Target List Collection, NOT to a CMS Collection, in the Collection List Source settings.

NOTE

This List will stay visible on the Template page on the published site. You can use it in the Template page or decide to hide it by hiding a parent element of it.

Set the link to the current CMS page

On the CMS Template page

Remaining on the Collection Template page, create a Link Block element anywhere inside of the Collection Item element, select it and set it as the 'Current' in the Link Settings panel.

This step establishes a relationship between this list and your Target List. It's requested for the List Nest Solution to work.

EXAMPLE

In our example, this target page appears in the Link Settings as Current Categories, because our Target CMS Collection is named "Blog Posts". Current is a term used throughout Webflow CMS to designate the standalone CMS Item page.

NOTE

Most often, the link element inside the Collection Item wraps all the content, allowing visitors to click the category tag to reach the category page. The presence of the link element and its settings are mandatory. However, you can place it anywhere, even as an empty link element, making it invisible and without a click effect.

3

Add these required attributes to the elements

Target List

Defines the List in which the Nested List will be added
fs-list-element
=
"
list
"

To define the Target List — the Collection List in which you want to nest another List — select the Collection List element and add this attribute.

Add this attribute:
Name
fs-list-element
Copy
Value
list
Copy
Add it to those type(s) of element(s):
Collection List
EXAMPLE

If you want to display a list of “Blog Posts” and include a nested “Categories” Collection List within each item, apply this attribute to the “Blog Posts” Collection List.

This List represents the primary content you aim to display.

Target Div

Defines the Div Block in which the Nested List will be placed
fs-list-element
=
"
nest-target
"
fs-list-nest
=
"
IDENTIFIER
"

To define where the Nested List will be positioned, select a Div Block element inside the Collection Item element and add these attributes to it. This Div Block will act as the wrapper for the Nested List

Choose an IDENTIFIER value that represents the content of your Nested List, e.g., categories. You will use the same IDENTIFIER in a later step to create a connection between the Target Div and the Nested List.

Add this attribute:
Name
fs-list-element
Copy
Value
nest-target
Copy
Add this attribute:
Name
fs-list-nest
Copy
Value
IDENTIFIER
Copy
Define your own value instead of IDENTIFIER. Example:
fs-list-nest = "categories"
Add it to those type(s) of element(s):
Div Block
IMPORTANT

This Div Block must be inside of the Collection Item of the Target List, the one you've added fs-list-element="list" to.

CMS Field Slugs

The text element matching the CMS Items slugs
fs-list-element
=
"
nest-slugs
"
fs-list-instance
=
"
IDENTIFIER
"

For this alternative nesting method to work, you need to add these attributes to a Text Block element bound to a Text Field that contains a text version of the Multi-reference field:

  1. Create a new Text field in the Target List Collection settings and place it under the Multi-reference field bound to the Collection you want to nest.
  2. For each Collection Item, replicate the list of referenced items from the Multi-reference field in the text field. Separate each item with a comma.
Add this attribute:
Name
fs-list-element
Copy
Value
nest-slugs
Copy
Add this attribute:
Name
fs-list-instance
Copy
Value
IDENTIFIER
Copy
Example:
fs-list-instance = "categories"
Add it to those type(s) of element(s):
Text Block
NOTE

This is the additional Text field in the CMS Collection. This CMS field must contain a comma-separated list of CMS page slugs of the items in the Multi-reference field. E.g.; If the name of a multi-referenced item is "Graphic Design", its slug is most probably graphic-design. Slugs are always written in lower-case.

Item Link

The Collection Item link is set to the CMS Current page
fs-list-element
=
"
item-link
"

Select the Link element inside the Collection Item and set it to the CMS Current link in the Link Settings panel — it's the link to the Collection Item page.

This step ensures a connection between the Target List and the Collection Template page.

Add this attribute:
Name
fs-list-element
Copy
Value
item-link
Copy
Add it to those type(s) of element(s):
Link Block
Text Link
IMPORTANT

This step is mandatory for the solution to work. Please double-check that there is a Link element in the Collection Item and that it’s set to the Collection Template page.

The Link element can be any type of link, such as aButton, or a Link Block wrapping the entire Collection Item content.

Nested List

The List that is nested inside of the other
fs-list-element
=
"
list
"
fs-list-instance
=
"
IDENTIFIER
"

Add these attributes to a Collection List on the page that will become the Nested List on the published site. Ensure the IDENTIFIER value matches the one defined previously.

Add this attribute:
Name
fs-list-element
Copy
Value
list
Copy
Add this attribute:
Name
fs-list-instance
Copy
Value
IDENTIFIER
Copy
Example:
fs-list-instance = "categories"
Add it to those type(s) of element(s):
Collection List
WARNING

Do not hide this Collection List. If it is set to display: none, it will not be shown in the parent list. If the list being visible in the Designer is annoying, you can add a wrapping div and hide it.

EXAMPLE

If you want to display “Blog Posts” and nest a “Categories” Collection List inside of each blog posts Item, you would place these attributes on the “Categories” Collection List

NOTE

Inside of the Collection Item element, there must be a link connected to the Current link in the Link Settings panel. This link should be the first child of the Collection Item element. It does not need to remain clickable or visible to the user.

4

Publish your project and check out the result on the live site.

Check more elements and settings below
Optional

Add more

settings

Disable Caching

Prevent loaded items from being stored in the cache
fs-list-cache
=
"
false
"

By default, List Nest caches the fetched documents for performance, and the cache doesn't expire until the site is re-published.

There are some times where you might want to opt out of this behavior, like when you programatically update your CMS Collections via the Webflow CMS API without manually publishing the site.

Add this attribute:
Name
fs-list-cache
Copy
Value
false
Copy
Add it to any element with
fs-list-element = "list"

Still need help?

Get Support