← Back to Documentation Overview | Search these pages with the button in the top right

List sorting helps users quickly find the information they’re looking for.

List Sorting in Action

Enable in Dynamic Map App

1. Enable List Sorting
2. Select desired sortable fields

Update Code

Insert updated code into Dynamic Map’s Custom Code

Locate in Webflow Designer

The ncf-sort element is placed within the cru-ncf-map-filter

<aside> 💡 Pro Tip: Fix default Sorting

By default, Webflow displays your list in the custom CMS order on first load. To fix this, set your desired initial sort state using Webflow’s sort order option. Be sure to apply the same sorting to both collection lists—otherwise, tooltips and pop-ups won’t display correctly.

Change Sort Order on List Item Collection List

Change Sort Order on Pop-Up / Tooltip Collection List

</aside>

<aside> 💡 Pro Tip: Rename the dropdown options

By default, all options are displayed in lowercase. You can easily change this by following this guide:

</aside>

Design Details / Arrow Spacing

To fix Webflow’s default chevron in the select field, take a look at this guide:

https://discourse.webflow.com/t/arrow-spacing-w-select/160128

<aside> 👉 Questions? We're excited to [email protected]

</aside>