Is it possible to use a Webflow CMS collection to populate a dropdown menu with items? For example, can the items in the dropdown menu correspond to a multi-collection reference for colors that apply to a selected t-shirt?
TL;DR
- Use a Dropdown element (not a form dropdown) and place a Collection List inside it, binding it to the Colors CMS collection.
- Add a Text Block or Link Block inside collection items to display color names dynamically.
- Style dropdown items to resemble a form dropdown if needed.
- Use custom JavaScript to transfer the selected CMS color to a hidden form input for submission.
Yes, you can use a Webflow CMS collection to populate a dropdown menu dynamically, but Webflow does not natively support CMS-based dropdown elements in forms. However, there is a workaround using a Collection List inside a custom Dropdown element.
1. Use a Collection List Inside a Dropdown
- Add a Dropdown element from the components panel (not a form dropdown).
- Place a Collection List inside the dropdown.
- Bind the Collection List to your Colors CMS collection.
- Inside the collection item, add a Text Block or Link Block, and set it to display the color name dynamically.
2. Styling & Functionality Considerations
- Ensure that each dropdown item has appropriate styling to look like a form dropdown.
- If you need the selected value to be tracked in a form submission, you’ll need custom JavaScript to update a hidden input field.
3. Custom Code for a Functional Form Dropdown (Optional)
- Since Webflow’s native form dropdown doesn’t support CMS binding, use JavaScript to transfer the selected CMS color to a hidden input field in a Webflow form.
Summary
Webflow doesn’t natively support CMS-powered form dropdowns, but you can simulate a dropdown using a Collection List inside a custom Dropdown component. For a true form integration, custom JavaScript is required to pass the selected value.