Glossary w/ Letter Groupings

Webflow's CMS Lists do not have a native "grouping" feature, however with a bit of ingenuity and the use of conditional visibility, it's possible to create neatly grouped lists.

If you like, you can further add in-page navigation to make it easily accessible.

In this tutorial, we'll build a standard A-Z Glossary with letter grouping and a navigation bar.

Webflow's site has a page with this type of item grouping here.

Resources

• Demonstration
• Cloneable

Code

Notes

This demonstration is centered on an alphabetic grouping, and has an easily identifiable distinction between group-header-items and content-type items, in the presence or absence of description content.

Despite that, this grouping technique should be adaptable to other CMS list grouping use-cases as well.

There are only three key mechanics at work;

1. All of the headings and the items must be in the same collection list
2. They must be distinguishable from each other using conditional visibility. The absence or presence of content in a field is one approach, another is to create a Yes/No switch and manually identify your headers.
3. They must be sortable so that the headers are in the right position among the group they represent. One way to do this is to assign every member of the group a identifier such as a group code, and to assign this to the header as well. Sort on that code, and as a secondary field, sort on your Yes/No switch field, and then the Name of the items. This will bring the groups together, with the header as the first item and the items sorted by name ( or other field you want them sorted by ).

Pagination

Pagination will mostly work, however if you are on page 2, the heading will not be repeated on that page. You'd see the content items, without a group header, until the next group begins.

‍