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?

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.