Functional
CMS Nest
Option to have no limitations for Webflow CMS Nested Collections. Nest more than 5 items. Nest multiple Collections on a page.
Step #2
Implement in Webflow
Apply attributes to elements on the page
Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.
Setup option 1 — Fetch CMS items
Use Webflow CMS Template page in implementation. Send requests to each item's template page to fetch the nested CMS items.
Add this attribute
Description
Name
fs-cmsnest-element
Value
list
This is the CMS Collection List that will display the primary list of content. This is the list we want to add a nested Collection to. We will call this the "parent list".
For example, if we want to display "Attractions" and nest a "Categories" Collection List, this attribute would be placed on the "Attractions" Collection List. This is the primary list of content that we want to show.
IMPORTANT - In the Collection Item, it is required to have a link that is connected to the CMS Template page for that item. It is required that this link is used as the parent wrapper that wraps all content or as the first element inside the Collection Item*
*See screenshot graphic below — we show the Link Block containing all of the item contents. This Link Block is connected to the CMS Template page, "Current Attraction". This Link Block placement works well if you want the user to navigate to the CMS Template Page.
If you do not want the user to navigate to the CMS Template page, you may hide a link inside the Collection Item. The link does not have to be visible or clickable by the user. However, this link is required to be a direct child of the Collection Item element and it must be directed to the CMS Template page for that item.
Warning: CMS Nest is not intended to be used inside a Collection Template Page, doing this may result in unwanted nesting behavior
For example, if we want to display "Attractions" and nest a "Categories" Collection List, this attribute would be placed on the "Attractions" Collection List. This is the primary list of content that we want to show.
IMPORTANT - In the Collection Item, it is required to have a link that is connected to the CMS Template page for that item. It is required that this link is used as the parent wrapper that wraps all content or as the first element inside the Collection Item*
*See screenshot graphic below — we show the Link Block containing all of the item contents. This Link Block is connected to the CMS Template page, "Current Attraction". This Link Block placement works well if you want the user to navigate to the CMS Template Page.
If you do not want the user to navigate to the CMS Template page, you may hide a link inside the Collection Item. The link does not have to be visible or clickable by the user. However, this link is required to be a direct child of the Collection Item element and it must be directed to the CMS Template page for that item.
Warning: CMS Nest is not intended to be used inside a Collection Template Page, doing this may result in unwanted nesting behavior
Add this attribute
Description
Name
fs-cmsnest-element
Value
nest-target
This div will be removed and replaced with the "child" Collection List.
This is where the the child Collection List will be added inside the parent Collection list.
This must be inside the CMS Item of the "list" element.
This is where the the child Collection List will be added inside the parent Collection list.
This must be inside the CMS Item of the "list" element.
Name
fs-cmsnest-collection
Value
IDENTIFIER
Add a Collection IDENTIFIER to match this element to a Collection
- IDENTIFIER should be a descriptive word that identifies your Collection.
- Each IDENTIFIER in a CMS Nest setup must be identical.
- For example, each element in the implementation will have fs-cmsnest-collection = "attraction-categories".
- IDENTIFIER should be a descriptive word that identifies your Collection.
- Each IDENTIFIER in a CMS Nest setup must be identical.
- For example, each element in the implementation will have fs-cmsnest-collection = "attraction-categories".
Add this attribute
Description
Name
fs-cmsnest-element
Value
nest-source
This element is the child Collection List content we want to nest inside the parent Collection List.
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 the div.
This Collection List can be anywhere on the page outside the parent collection. It will be removed from its location and added to each CMS Item of the parent list.
This child Collection List will replace the target div we set in the parent Collection List item.
For example, if we want to display "Attractions" and nest a "Categories" Collection, this attribute would be placed on the "Categories" Collection List.
In the Collection Item, it is required to have a link that is connected to the CMS Template page. This link is requiered to be a dirct child of the Collection Item element. See screenshot graphic below.
It is not required for this link to be clickable or visible for the user. The only requirement is that a link to the CMS Template page is inside the Collection Item.
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 the div.
This Collection List can be anywhere on the page outside the parent collection. It will be removed from its location and added to each CMS Item of the parent list.
This child Collection List will replace the target div we set in the parent Collection List item.
For example, if we want to display "Attractions" and nest a "Categories" Collection, this attribute would be placed on the "Categories" Collection List.
In the Collection Item, it is required to have a link that is connected to the CMS Template page. This link is requiered to be a dirct child of the Collection Item element. See screenshot graphic below.
It is not required for this link to be clickable or visible for the user. The only requirement is that a link to the CMS Template page is inside the Collection Item.
Name
fs-cmsnest-collection
Value
IDENTIFIER
Add a Collection IDENTIFIER to match this element to a Collection
- IDENTIFIER should be a descriptive word that identifies your Collection.
- Each IDENTIFIER in a CMS Nest setup must be identical.
- For example, each element in the implementation will have fs-cmsnest-collection = "attraction-categories".
- IDENTIFIER should be a descriptive word that identifies your Collection.
- Each IDENTIFIER in a CMS Nest setup must be identical.
- For example, each element in the implementation will have fs-cmsnest-collection = "attraction-categories".
COLLECTION (on template)
I have to add this
Collection List
See how it works
ON THE CMS TEMPLATE PAGE of the primary content list
Add this attribute
Description
Name
fs-cmsnest-element
Value
template-reference
This is a required step. Do not miss it. Look at the visuals closely. Watch the video walkthrough.
This child Collection List will be hidden on the CMS template page of your parent list Collection.
Example: Attractions = parent list. Categories = child nested list.
If our primary list is "Attractions", this Collection List element must go on the "Attractions" CMS Template page. (See screenshot)
The Categories Collection List on the Attractions Template page must be binded to the multi-reference field "Categories". (See screenshot)
This is required to know which "Categories" should be nested ineach "Attraction" item on our primary page.
In the Collection List, it is required to have a link that is connected to the CMS Template page. See screenshot graphic below.
This child Collection List will be hidden on the CMS template page of your parent list Collection.
Example: Attractions = parent list. Categories = child nested list.
If our primary list is "Attractions", this Collection List element must go on the "Attractions" CMS Template page. (See screenshot)
The Categories Collection List on the Attractions Template page must be binded to the multi-reference field "Categories". (See screenshot)
This is required to know which "Categories" should be nested ineach "Attraction" item on our primary page.
In the Collection List, it is required to have a link that is connected to the CMS Template page. See screenshot graphic below.
Name
fs-cmsnest-collection
Value
IDENTIFIER
Add a Collection IDENTIFIER to match this element to a Collection
- IDENTIFIER should be a descriptive word that identifies your Collection.
- Each IDENTIFIER in a CMS Nest setup must be identical.
- For example, each element in the implementation will have fs-cmsnest-collection = "attraction-categories".
- IDENTIFIER should be a descriptive word that identifies your Collection.
- Each IDENTIFIER in a CMS Nest setup must be identical.
- For example, each element in the implementation will have fs-cmsnest-collection = "attraction-categories".
Multi Nested Collection List
See how it works
I want to have Collection > Nested Collection > Nested Collection > ...
Multi nest any amount of Attributes CMS Nest implementations inside each other. Simulate a multiple levels of nested Collection Lists. There are no limitations of nesting levels.
No attribute needed.
Example:
Our primary Collection is "Attractions". Inside this Collection we nest "Categories". This is the example shown on this docs page. With the multi nest update, you can now nest the "Type" Collection inside "Categories". "Type" is a reference Collection of "Categories". We can now access the "Type" Collection inside the primary outer Collection of "Attractions". This concept is a nested list inside of a nested list inside of a nested list.
In the below example, we show a 4 level of nesting concept.
Project Collection
> Categories Collection
> > Services Collection
> > > Color Collection
No attribute needed.
Example:
Our primary Collection is "Attractions". Inside this Collection we nest "Categories". This is the example shown on this docs page. With the multi nest update, you can now nest the "Type" Collection inside "Categories". "Type" is a reference Collection of "Categories". We can now access the "Type" Collection inside the primary outer Collection of "Attractions". This concept is a nested list inside of a nested list inside of a nested list.
In the below example, we show a 4 level of nesting concept.
Project Collection
> Categories Collection
> > Services Collection
> > > Color Collection
No attribute or steps to take. Just sharing a cool performance improvement.
Attributes CMS Nest includes a caching system.
Example:
A Collection list that has 100 items. Each item has a nested list of 20 items. And each nested item has another nested list of 10 items.
Without the caching system, this would mean that the system would perform: 100*20*10 = 20,000 requests
With the caching system, requests are stored so:
100+20+10 = 130 requests
Attributes CMS Nest includes a caching system.
Example:
A Collection list that has 100 items. Each item has a nested list of 20 items. And each nested item has another nested list of 10 items.
Without the caching system, this would mean that the system would perform: 100*20*10 = 20,000 requests
With the caching system, requests are stored so:
100+20+10 = 130 requests
Add this attribute
Description
Name
fs-cmsnest-cache
Value
false
By default, CMS 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.
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.
Where?
Add to an element with fs-cmsnest-element = "list"
Setup option 2 — CMS items as plain-text
Alternative setup for large lists and faster loading time
Use a Webflow "Plain text" field to manually type each reference item. No CMS Template page in setup. May require manual, and possibly double, data entry.
- May require manual, and possibly double, data entry.
- Bypasses all requests made to CMS Template pages.
- Does not require the "COLLECTION (on template)" step from Version 1.
- Does not require any CMS item links from Version 1.
- Requires a CMS "Plain text" field that lists the slugs of the referenced items.
Create an additional CMS field in the CMS Collection. This CMS field must have a comma-separated list of page slugs that mirror the reference field items.
In the the example below, there is a reference field with the nested items, "Events", "Health", "Jobs", "News", "Technology".
The new CMS field has a Text field with "events, health-care, jobs, news, technology".
The manual entry of reference fields must be completed for each item in the CMS Collection.
Taking these extra steps will significantly improve page performance.
- Bypasses all requests made to CMS Template pages.
- Does not require the "COLLECTION (on template)" step from Version 1.
- Does not require any CMS item links from Version 1.
- Requires a CMS "Plain text" field that lists the slugs of the referenced items.
Create an additional CMS field in the CMS Collection. This CMS field must have a comma-separated list of page slugs that mirror the reference field items.
In the the example below, there is a reference field with the nested items, "Events", "Health", "Jobs", "News", "Technology".
The new CMS field has a Text field with "events, health-care, jobs, news, technology".
The manual entry of reference fields must be completed for each item in the CMS Collection.
Taking these extra steps will significantly improve page performance.
Add this attribute
Description
Name
fs-cmsnest-element
Value
list
This is the CMS Collection List that will display the primary list of content. This is the list we want to add a nested Collection to. We will call this the "parent list".
For example, if we want to display "Attractions" and nest a "Categories" Collection List, this attribute would be placed on the "Attractions" Collection List. This is the primary list of content that we want to show.
Warning: CMS Nest is not intended to be used inside a Collection Template Page, doing this may result in unwanted nesting behavior
For example, if we want to display "Attractions" and nest a "Categories" Collection List, this attribute would be placed on the "Attractions" Collection List. This is the primary list of content that we want to show.
Warning: CMS Nest is not intended to be used inside a Collection Template Page, doing this may result in unwanted nesting behavior
PLAIN TEXT CMS FIELD
I want this
Text Block
See how it works
to represent the nested reference items in the Collection Item
Add this attribute
Description
Name
fs-cmsnest-element
Value
slugs
This is the plain text CMS field that will represent the Webflow reference items for the Collection Item.
Create an additional CMS field in the CMS Collection. This CMS field must have a comma-separated list of page slugs that mirrors the reference field list.
In the the example below, there is a reference field with the nested items, "Adventure", "Free Tour", "Culture", "Historical", "Beach", "Nature".
The mirroring CMS field must have the slugs of each of those items — "adventure, free-tour, culture, historical, beach, nature".
The manual entry of slugs must be completed for each item in the CMS Collection.
This element should be set to display: none. This must be inside the CMS Item of the "list" element.
IDENTIFIER should be a descriptive word that identifies your Collection. For example, fs-cmsnest-collection = "attraction-categories"
Create an additional CMS field in the CMS Collection. This CMS field must have a comma-separated list of page slugs that mirrors the reference field list.
In the the example below, there is a reference field with the nested items, "Adventure", "Free Tour", "Culture", "Historical", "Beach", "Nature".
The mirroring CMS field must have the slugs of each of those items — "adventure, free-tour, culture, historical, beach, nature".
The manual entry of slugs must be completed for each item in the CMS Collection.
This element should be set to display: none. This must be inside the CMS Item of the "list" element.
IDENTIFIER should be a descriptive word that identifies your Collection. For example, fs-cmsnest-collection = "attraction-categories"
Name
fs-cmsnest-collection
Value
IDENTIFIER
Add a Collection IDENTIFIER to match this element to a Collection
- IDENTIFIER should be a descriptive word that identifies your Collection.
- Each IDENTIFIER in a CMS Nest setup must be identical.
- For example, each element in the implementation will have fs-cmsnest-collection = "attraction-categories".
- IDENTIFIER should be a descriptive word that identifies your Collection.
- Each IDENTIFIER in a CMS Nest setup must be identical.
- For example, each element in the implementation will have fs-cmsnest-collection = "attraction-categories".
Add this attribute
Description
Name
fs-cmsnest-element
Value
nest-target
This div will be removed and replaced with the "child" Collection List.
This is where the the child Collection List will be added inside the parent Collection list.
This must be inside the CMS Item of the "list" element.
This is where the the child Collection List will be added inside the parent Collection list.
This must be inside the CMS Item of the "list" element.
Name
fs-cmsnest-collection
Value
IDENTIFIER
Add a Collection IDENTIFIER to match this element to a Collection
- IDENTIFIER should be a descriptive word that identifies your Collection.
- Each IDENTIFIER in a CMS Nest setup must be identical.
- For example, each element in the implementation will have fs-cmsnest-collection = "attraction-categories".
- IDENTIFIER should be a descriptive word that identifies your Collection.
- Each IDENTIFIER in a CMS Nest setup must be identical.
- For example, each element in the implementation will have fs-cmsnest-collection = "attraction-categories".
Add this attribute
Description
Name
fs-cmsnest-element
Value
nest-source
This element is the child Collection List content we want to nest inside the parent Collection List.
Do not hide this Collection List. If it is set to "display: none", it will not be shown in the parent list.
In the Collection Item, it is required to have a link that is connected to the CMS Template page. See screenshot graphic below.
It is not required for this link to be clickable or visible for the user. The only requirement is that a link to the CMS Template page is inside the Collection Item.
This Collection List can be anywhere on the page outside the parent collection. It will be removed from its location and added to each CMS Item of the parent list.
This child Collection List will replace the target div we set in the parent Collection List item.
For example, if we want to display "Attractions" and nest a "Categories" Collection, this attribute would be placed on the "Categories" Collection List.
Do not hide this Collection List. If it is set to "display: none", it will not be shown in the parent list.
In the Collection Item, it is required to have a link that is connected to the CMS Template page. See screenshot graphic below.
It is not required for this link to be clickable or visible for the user. The only requirement is that a link to the CMS Template page is inside the Collection Item.
This Collection List can be anywhere on the page outside the parent collection. It will be removed from its location and added to each CMS Item of the parent list.
This child Collection List will replace the target div we set in the parent Collection List item.
For example, if we want to display "Attractions" and nest a "Categories" Collection, this attribute would be placed on the "Categories" Collection List.
Name
fs-cmsnest-collection
Value
IDENTIFIER
Add a Collection IDENTIFIER to match this element to a Collection
- IDENTIFIER should be a descriptive word that identifies your Collection.
- Each IDENTIFIER in a CMS Nest setup must be identical.
- For example, each element in the implementation will have fs-cmsnest-collection = "attraction-categories".
- IDENTIFIER should be a descriptive word that identifies your Collection.
- Each IDENTIFIER in a CMS Nest setup must be identical.
- For example, each element in the implementation will have fs-cmsnest-collection = "attraction-categories".
Multi Nested Collection List
See how it works
I want to have Collection > Nested Collection > Nested Collection > ...
Multi nest any amount of Attributes CMS Nest implementations inside each other. Simulate a multiple levels of nested Collection Lists. There are no limitations of nesting levels.
No attribute needed.
Example:
Our primary Collection is "Attractions". Inside this Collection we nest "Categories". This is the example shown on this docs page. With the multi nest update, you can now nest the "Type" Collection inside "Categories". "Type" is a reference Collection of "Categories". We can now access the "Type" Collection inside the primary outer Collection of "Attractions". This concept is a nested list inside of a nested list inside of a nested list.
In the below example, we show a 4 level of nesting concept.
Project Collection
> Categories Collection
> > Services Collection
> > > Color Collection
No attribute needed.
Example:
Our primary Collection is "Attractions". Inside this Collection we nest "Categories". This is the example shown on this docs page. With the multi nest update, you can now nest the "Type" Collection inside "Categories". "Type" is a reference Collection of "Categories". We can now access the "Type" Collection inside the primary outer Collection of "Attractions". This concept is a nested list inside of a nested list inside of a nested list.
In the below example, we show a 4 level of nesting concept.
Project Collection
> Categories Collection
> > Services Collection
> > > Color Collection
Add this attribute
Description
Name
fs-cmsnest-cache
Value
false
By default, CMS 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.
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.
Where?
Add to an element with fs-cmsnest-element = "list"
Working examples
See this solution working live in this Webflow project.
Example #1
Add a nested collection list with more than 5 items
Example #2
Add a nested collection list with more than 5 items (CMS items as plain text)
Capri
Italy
Capri Island
Capri is an island located in the Tyrrhenian Sea off the Sorrento Peninsula.
More than 5 nested items:
beach, adventure, free-tour, historical, nature, culture
New York
United States
American Museum of Natural History
Is a natural history museum on the Upper West Side of Manhattan, New York City.
More than 5 nested items:
architecture, culture, historical, most-visited, museum, paid-tour, most-rated, entertainment
Rome
Italy
The Vatican Museums
The Vatican Museums are the public museums of the Vatican City.
More than 5 nested items:
architecture, culture, historical, most-rated, museum, most-visited, paid-tour
Combinations using CMS Nest:
You can combine this Attribute with others to create more complex solutions.
Frequently Asked Questions
Everything you need to know about this attributes solution.
Can I use the nest attribute to pull data like images into a nested collection list?
It should be possible, just be sure that the template page has all the items that you need nested referenced on sthe page.
Could I create two nested lists on a single page using the CMS Nest Attribute?
Yes!
You can have two separate nested lists in the same parent collection or you can have multi-level nesting!
Could I make CMS Nest, Combine and Filter work together on the same page?
A special setup is required for this. Follow the next steps
- Prevent CMS Combine and CMS Filter from loading by adding
fs-attributes-preventload='true'to the scripts - Add the following snippet to the
</body>section of your page
<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmsnest',
(listInstances) => {
console.log('cmsnest Successfully loaded!');
window.fsAttributes.cmscombine.init();
window.fsAttributes.cmsfilter.init();
},
]);
</script>
Some tweaks may be required so please feel free to open a thread on the Forum!
Developer documentation
Check the dev documentation
Next time implement inside Webflow
Use Finsweet Extension
