How can I create a dropdown menu with a pre-filled field in Webflow, allowing users to filter neighbourhoods from a collection list and navigate to a corresponding page after making a selection?
- Create a Neighborhoods Collection with name and slug fields.
- Add a Select field inside a Form Block and give it a unique ID.
- Use a Collection List and HTML Embed to render CMS items as <option> elements.
- Add JavaScript to redirect the user to the selected neighborhood’s URL on change.
- Include a default disabled <option> to prompt user selection.
You want to build a dropdown filter tied to a Collection List that lets users choose a neighborhood and then redirects them to a dynamic Collection Page based on that choice.
1. Create the Collection Structure
- Use the CMS (Collections) to create a Neighborhoods collection.
- Include a Name (e.g., "Downtown") and a Slug (auto-generated or custom), which will build the destination URL for each neighborhood.
2. Add a Dropdown Element to the Page
- Drag a Form Block into your page.
- Inside the form, insert a Select field (dropdown).
- Give the Select field a name like neighborhood-selector.
3. Populate Dropdown Options Using CMS
Webflow doesn’t natively support CMS-driven select options. To work around this, use custom code to populate the select field with CMS items:
- Add a Collection List connected to the Neighborhoods collection.
- Inside each Collection Item, add a Custom Attribute block with:
- Element type: HTML Embed
- Inside the embed, insert an
<option>using interpolation:
Example: <option value="/neighborhoods/{{slug}}">{{name}}</option>
- Give the Select element an ID (e.g.,
id="neighborhood-select") so you can target it with a script.
4. Add Redirect on Selection
- Place a custom script at the bottom of your page (before
</body>) to listen for selection:
Example inline script:
`document.getElementById('neighborhood-select').addEventListener('change', function() {
if (this.value) window.location.href = this.value;
});`
- This will grab the selected slug’s URL and navigate to the corresponding Collection Page.
5. Optional: Add Default Option
- Inside the Select field (can be manually set), add a default option:
<option selected disabled>Select a neighborhood</option>
This prevents submission unless the user chooses a valid option.
Summary
Create a dropdown menu using a dynamic Collection List, render each item as an <option> with its slug as the value, and attach a JavaScript redirect to load the selected Collection Page. Since CMS items can’t populate native select fields automatically in Webflow, an HTML Embed and custom script are required.
