Advanced Element Sorting
Sort Webflow's collection list items any way you like
Webflow's collection lists have a few limitations on the native sort functionality;
- The inability to sort on Ref fields
- The inability to sort on Option fields
- The inability to sort nested collection list items
- Random sorting works well, but only changes the order every 12 hours
This attribute allows to do all of these;
- Sort by ref & option field types
- Sort by text, date, numbers, or even semvers
- Sort ascending, descending or randomly ( on every page refresh )

Sort by Option or Ref
Demonstration
Place on any Collection List directly ( not the Collection List Wrapper ). No value is needed.
Sort direction defaults to ascending. If you want to specify the direction, add this attribute with a value of;
asc
for ascendingdesc
for descendingrandom
for random ( on every page refresh )
The field type always defaults to sorting as a string. If you want to specify the data type of the field being sorted, add this attribute with a value of;
string
to sort as stringsnumber
to parse sort as numbersdate
to parse and sort as dates
Defaults to
string
when unspecified or unrecognized.** Note that semver sorting is a numeric-only implementation of the sort rules. It is not designed to handle alphanumerics in pre-release identifiers.
The sort field is controlled by specifying a Sort Key. This gives you complete control over the field that is being used for sorting.
Create an HTML Embed inside of your Collection List Item, with this code;
<data wfu-sort-key=""></data>
As the attribute value for
wfu-sort-key
, insert the field that you want to sort by, using Webflow’s ‘+ Add Field at the top-right of the HTML Embed Code Editor window. Remember, Sygnal Attributes will always treat your value as a string for sort purposes, unless you specify otherwise. If you want sorting to occur as a number, date, or semver, make sure to specify that attribute.
There are currently no configuration options for this library, so we’ll use a no-code integration approach.
Add this CSS script to the HEAD of your site or page.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sygnaltech/[email protected]/dist/css/webflow-html.css">
Add this JS reference to the BODY of your site or page.
<script type="module" src="https://cdn.jsdelivr.net/gh/sygnaltech/[email protected]/src/nocode/webflow-html.js"></script>
See above for details.
See above for details.
See above for details.
Last modified 4mo ago