Yes, you can use Webflow CMS collections to populate dropdown menus, but with some limitations depending on how you implement the dropdown. Here's how to approach it depending on your goal:
- Webflow’s native Dropdown component cannot be directly bound to CMS content.
- Instead, you can simulate a dropdown by using a Collection List styled to look and behave like a dropdown.
- For example, create a button that toggles visibility of the Collection List with interactions.
2. Populate Options from a Multi-Reference Field
- You can’t bind a multi-reference field directly into a native Dropdown input.
- However, if you're displaying a product (like a t-shirt), you can use a Collection List nested inside a product template to display all the referenced color options from a multi-reference field.
- Example: On a t-shirt CMS template page, add a nested Collection List connected to the “Colors” multi-reference field. Each item would display a color name or swatch.
- If you're building a form with a select/dropdown input, you cannot natively bind options to CMS items.
- To achieve that, you'll need to use custom JavaScript to:
- Query CMS data (e.g., via Webflow’s CMS JSON data using Webflow’s API via fetch or by using a hidden Collection List).
- Dynamically populate a true
<select>
input with those values on page load.
4. Workaround Using Collection Pages
- If the goal is for users to filter or navigate based on CMS items (like selecting a color to filter t-shirts), use:
- Collection Lists to display filters or options.
- Combine with page reloads, query strings, or Finsweet’s CMS Filter attributes to dynamically show data tied to those choices.
Summary
While you can't bind a CMS collection to a native Webflow Dropdown input, you can simulate it with a styled Collection List, or use custom code to dynamically populate the dropdown. For multi-reference fields like t-shirt colors, use nested Collection Lists on CMS template pages to show available options.