How to add an attribute:

close icon
Hey! Give us some feedback here.
Filter and Sort

CMS Sort

Create advanced and complex no-code sorting for Webflow CMS Collection List content.

CMS Sort
Step #1

Copy the Solution <script> and paste into the <head> of your page

copy icon
Copy Script
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.

navigator arrow
LIST
I want to sort the content of this

Collection List or Collection List Wrapper

See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmssort-element
copy icon
Value
list
copy icon
This is the CMS Collection List that will be sorted.
how to add cms sort list attribute
navigator arrow
SELECT TRIGGER
I want to use a
select icon

Select field

See how it works
see webflow attributes
as my Sort UI element
Add this attribute
Description
Name
fs-cmssort-element
copy icon
Value
trigger
copy icon
Defines a Select Field element as a sorting trigger.
navigator arrow
Option
DATE
I want to sort by date
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmssort-type
copy icon
Value
date
copy icon
Allows sorting by date format.
It's just needed for date formats like:

July 4, 2021
July 4, 2021 13:30
07/04/2021
07/04/2021 13:30
December 2021
Where?
Add to the CMS Item dynamic text element with fs-cmssort-field = "IDENTIFIER"
navigator arrow
FIELD IDENTIFIER
When I interact with this 
select icon

Select field

See how it works
see webflow attributes
choices, I want to sort this

Text Block, Heading, Paragraph or Text Link

content
Add this attribute
Description
Select Choice Value
IDENTIFIER-asc
This is how the Sort UI element communicates with the Webflow CMS List.

Add IDENTIFIER-asc or IDENTIFIER-desc to the Select Choice Value.

The IDENTIFIER value connects a Sort UI element to the correct field from Webflow CMS. The IDENTIFIER value is like the name of a CMS field. However, it does not need to match your CMS field. IDENTIFIER values can be whatever you want, but they should be descriptive, like "Name", "Countries", "States", "Cities", etc.

Add -asc to the end of the IDENTIFIER to indicate that this Select Choice should be sorting in ascending order
Select Choice Value
IDENTIFIER-desc
Add -desc to the end of the IDENTIFIER to indicate that this Select Choice should be sorting in descending order
Name
fs-cmssort-field
copy icon
Value
IDENTIFIER
copy icon
Check live example here
If you are using CMS Filter, the fs-cmsfilter-field = IDENTIFIER will work with all CMS Sort UI elements. You do not have to add fs-cmsfilter-field and fs-cmssort-field to the dynamic Collection Item text.

Add fs-cmssort-field="IDENTIFIER" attribute to text inside the CMS Item template in your CMS list. Add it to the dynamic text element connected to the CMS field of your IDENTIFIER.

Watch video below to understand how this works. The video shows this entire process.
navigator arrow
BUTTON TRIGGER
I want to use a
button icon

Button, Text Link or Link Block

See how it works
see webflow attributes
as my Sort UI element to create a sort toggle
Add this attribute
Description
Name
fs-cmssort-element
copy icon
Value
IDENTIFIER
copy icon
Defines a Button, Text Link or Link Block element as a sorting trigger.

Add IDENTIFIER-asc or IDENTIFIER-desc to the Button element.

The IDENTIFIER value connects a Sort UI element to the correct field from Webflow CMS. The IDENTIFIER value is like the name of a CMS field. However, it does not need to match your CMS field. IDENTIFIER values can be whatever you want, but they should be descriptive, like "Name", "Countries", "States", "Cities", etc.

Add -asc to the end of the IDENTIFIER to indicate that this Dropdown option should be sorting in ascending order.

Add -desc to the end of the IDENTIFIER to indicate that this Dropdown option should be sorting in descending order.
navigator arrow
Option
DATE
I want to sorty by date
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmssort-type
copy icon
Value
date
copy icon
Allows sorting by date format.
It's just needed for date formats like:

July 4, 2021
July 4, 2021 13:30
07/04/2021
07/04/2021 13:30
December 2021
Where?
Add to the CMS Item dynamic text element with fs-cmssort-field = "IDENTIFIER"
navigator arrow
Option
NUMBER
I want to sorty by number
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmssort-type
copy icon
Value
number
copy icon
Allows sorting by number.
By default, CMS Sort treats all fields as alphanumeric strings. This attribute is needed to define a numeric field that can contain decimals or negative values like:

25.89
-13
-2.68
100.50
Where?
Add to the CMS Item dynamic text element with fs-cmssort-field = "IDENTIFIER"
navigator arrow
Option
Reverse
I want the first
button icon

Button

See how it works
see webflow attributes
click to sort by DESCENDING order
Add this attribute
Description
Name
fs-cmssort-reverse
copy icon
Value
true
copy icon
The first click will trigger desc sorting instead of the default asc.

Useful for lists that come in asc sort order by default with Webflow native sorting options.
Where?
Add to the button trigger element with fs-cmssort-element = "trigger"
navigator arrow
Option
SORT DIRECTION CLASS
When the
button icon

Button

See how it works
see webflow attributes
is clicked, I want to add ascending
and descending classes to the button
to visually show a change in the sort direction
Add this attribute
Description
Name
fs-cmssort-asc
copy icon
Value
ascending-class
copy icon
Optionally add a class to the button element when the list is sorting in ascending order.

If this attribute is not set, by default the library will add a fs-cmssort_asc CSS class to the button.
Where?
Add to the button trigger element with fs-cmssort-element = "trigger"
Name
fs-cmssort-desc
copy icon
Value
descending-class
copy icon
Optionally add a class to the button element when the list is sorting in descending order.

If this attribute is not set, by default the library will add a fs-cmssort_desc CSS class to the button.
Where?
Add to the button trigger element with fs-cmssort-element = "trigger"
Useful for visual changes to the button to indicate the list is sorting in a certain direction. For example, having the class flip the direction of an arrow.

Use this feature like CSS. Apply these ascending and descending classes at the list level or the button level.

Apply these attributes to the element with fs-cmssort-element = list to apply these classes to all buttons in the Sort UI.

Apply these attributes to the element with fs-cmssort-field = IDENTIFIER (the button), to apply unique classes to each button.
Initial state of the sort button:
how to add cms sort attribute
Ascending state of the sort button:
how to add cms sort attribute
Descending state of the sort button:
how to add cms sort attribute
navigator arrow
FIELD IDENTIFIER
When I interact with the Button Trigger, I want to sort this
See how it works
see webflow attributes

Text Block, Heading, Paragraph or Text Link

content
Add this attribute
Description
Name
fs-cmssort-field
copy icon
Value
IDENTIFIER
copy icon
Check live example here
If you are using CMS Filter, the fs-cmsfilter-field = IDENTIFIER will work with all CMS Sort UI elements. You do not have to add fs-cmsfilter-field and fs-cmssort-field to the dynamic Collection Item text.

Add fs-cmssort-field="IDENTIFIER" attribute to text inside the CMS Item template in your CMS list. Add it to the dynamic text element connected to the CMS field of your IDENTIFIER.

Watch video below to understand how this works. The video shows this entire process.
navigator arrow
DROPDOWN TRIGGER
I want to use a
form icon

Dropdown

See how it works
see webflow attributes
as my Sort UI element
Add this attribute
Description
Name
fs-cmssort-element
copy icon
Value
trigger
copy icon
Defines a Dropdown element as a sorting trigger.
navigator arrow
FIELD IDENTIFIER
When I interact with this 

Text Link or Link Block

See how it works
see webflow attributes
inside a Webflow Dropdown, I want to sort this

Text Block, Heading, Paragraph or Text Link

content
Add this attribute
Description
Name
fs-cmssort-field
copy icon
Value
IDENTIFIER-asc
copy icon
This is how the Sort UI element communicates with the Webflow CMS List.

Add IDENTIFIER-asc or IDENTIFIER-desc to the Text Link or Link Block inside the Dropdown.

The IDENTIFIER value connects a Sort UI element to the correct field from Webflow CMS. The IDENTIFIER value is like the name of a CMS field. However, it does not need to match your CMS field. IDENTIFIER values can be whatever you want, but they should be descriptive, like "Name", "Countries", "States", "Cities", etc.

Add -asc to the end of the IDENTIFIER to indicate that this Dropdown option should be sorting in ascending order
Name
fs-cmssort-field
copy icon
Value
IDENTIFIER-desc
copy icon
Add -desc to the end of the IDENTIFIER to indicate that this Dropdown option should be sorting in ascending order
Name
fs-cmssort-field
copy icon
Value
IDENTIFIER
copy icon
Check live example here
If you are using CMS Filter, the fs-cmsfilter-field = IDENTIFIER will work with all CMS Sort UI elements. You do not have to add fs-cmsfilter-field and fs-cmssort-field to the dynamic Collection Item text.

Add fs-cmssort-field="IDENTIFIER" attribute to text inside the CMS Item template in your CMS list. Add it to the dynamic text element connected to the CMS field of your IDENTIFIER.

Watch video below to understand how this works. The video shows this entire process.
navigator arrow
DROPDOWN LABEL
I want the
form icon

Dropdown

See how it works
see webflow attributes
label text inside the Dropdown Toggle to update with the current sort option
Add this attribute
Description
Name
fs-cmssort-element
copy icon
Value
dropdown-label
copy icon
Add to the text inside the Dropdown Toggle to make the text dynamic with the current active sorting option.

For example, if the user selects "Name (A>Z)" in the Dropdown, the dropdown label element with this attribute will update to "Name (A>Z)".
how to add cms sort label attribute
navigator arrow
Option
DATE
I want to sorty by date
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmssort-type
copy icon
Value
date
copy icon
Allows sorting by date format.
It's just needed for date formats like:

July 4, 2021
July 4, 2021 13:30
07/04/2021
07/04/2021 13:30
December 2021
Where?
Add to the CMS Item dynamic text element with fs-cmssort-field = "IDENTIFIER"
navigator arrow
Option
DURATION
I want to specify the duration of the animation
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmssort-duration
copy icon
Value
100
copy icon
Change duration of the fade animation on the sorted Collection List.

Values are in milliseconds. Default is 100ms.

If you already have fs-cmsfilter-duration applied to the list, this attribute is not needed. Only one duration is needed.
Where?
Add to an element with fs-cmssort-element = "list"

Working examples

See this solution working live in this Webflow project.

Example 1
CMS Sort using a select field
Sort by:
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Louvre Museum
Paris
/
France
Louvre Museum

It is the home of many of the most known work of arts, including the Mona Lisa.

October 18, 2021

Parque Güell
Barcelona
/
Spain
Parque Güell

Parc Güell is a privatized park system composed of gardens and architectural elements.

October 18, 2021

Taj Mahal
Agra
/
India
Taj Mahal

The Taj Mahal is an ivory-white marble mausoleum on the right bank of the river Yamuna in the Indian city of Agra.

October 25, 2021

Arc de Triomphe
Paris
/
France
Arc de Triomphe

The Arc de Triomphe de l'Étoile is one of the most famous monuments in Paris, France.

October 18, 2021

Statue of Liberty
New York
/
United States
Statue of Liberty

Is a colossal neoclassical sculpture on Liberty Island in New York Harbor in New York City.

October 25, 2021

American Museum of Natural History
New York
/
United States
American Museum of Natural History

Is a natural history museum on the Upper West Side of Manhattan, New York City.

October 25, 2021

Copy and paste accessible CMS Sort components for your project
locked icon
Clone Accessible Components UI KIT
new
Example 2
CMS Sort using buttons
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
The Grand Canyon
Arizona
/
United States
The Grand Canyon

The Grand Canyon is a steep-sided canyon carved by the Colorado River in Arizona, United States.

October 25, 2021

Copacabana Beach
Rio de Janeiro
/
Brazil
Copacabana Beach

Copacabana is a bairro (neighbourhood) located in the South Zone of the city of Rio de Janeiro, Brazil.

October 25, 2021

Iguazu Falls
Foz do Iguaçu
/
Brazil
Iguazu Falls

Iguazú Falls are waterfalls of the Iguazu River on the border of the Argentine and Brazil.

October 25, 2021

Trevi Fountain
Rome
/
Italy
Trevi Fountain

The Trevi Fountain is a fountain in the Trevi district in Rome, Italy.

October 18, 2021

Taj Mahal
Agra
/
India
Taj Mahal

The Taj Mahal is an ivory-white marble mausoleum on the right bank of the river Yamuna in the Indian city of Agra.

October 25, 2021

Louvre Museum
Paris
/
France
Louvre Museum

It is the home of many of the most known work of arts, including the Mona Lisa.

October 18, 2021

Copy and paste accessible CMS Sort components for your project
locked icon
Clone Accessible Components UI KIT
new
Example 3
CMS Sort using a dropdown
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Walt Disney World
Orlando
/
United States
Walt Disney World

Is an entertainment resort complex in Bay Lake and Lake Buena Vista, Florida, United States.

October 25, 2021

Parque Güell
Barcelona
/
Spain
Parque Güell

Parc Güell is a privatized park system composed of gardens and architectural elements.

October 18, 2021

Trevi Fountain
Rome
/
Italy
Trevi Fountain

The Trevi Fountain is a fountain in the Trevi district in Rome, Italy.

October 18, 2021

Christ the Redeemer
Rio de Janeiro
/
Brazil
Christ the Redeemer

Christ the Redeemer is an Art Deco statue of Jesus Christ in Rio de Janeiro, Brazil.

October 25, 2021

Casa Milà
Barcelona
/
Spain
Casa Milà

Casa Milà or "The stone quarry", a reference to its unconventional rough-hewn appearance.

October 18, 2021

Central Park
New York
/
United States
Central Park

An urban park in New York City located between the Upper West and Upper East Sides of Manhattan.

October 25, 2021

Copy and paste accessible CMS Sort components for your project
locked icon
Clone Accessible Components UI KIT
new

Developer documentation

external link icon

Next time implement inside Webflow

external link icon

Need help? Use the Automated Support Service

Subscribe

Sign up for future releases!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.