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?

To create a dropdown menu that filters neighborhoods from a CMS Collection in Webflow and redirects to the corresponding page after selection, follow these steps:

1. Structure Your CMS Collection

• Ensure your Collection contains a list of neighborhoods, each with its own Name and Slug.
• Each neighborhood should have an auto-generated CMS Template Page (e.g., /neighborhoods/chelsea).

2. Insert a Form and Dropdown Element

• Add a Form Block to your page.
• Inside the form, add a Dropdown element from the Add panel (not the Navbar dropdown, but the Form dropdown).
• Give the dropdown a class like "Neighborhood-Dropdown".

3. Populate Dropdown Options Dynamically

Webflow does not natively bind CMS content to a Form Dropdown, so use a workaround:

• Add a Collection List (bound to your Neighborhoods collection) adjacent to the Dropdown.
• Inside each Collection Item:
• Add a custom Embed component (from Add → Elements → Embed).
• Paste this inline script (no <script> tag needed):
  document.querySelector('.Neighborhood-Dropdown select').innerHTML += '<option value="/neighborhoods/{{slug}}">{{name}}</option>';
• Replace {{slug}} and {{name}} with the CMS fields using Webflow’s +Add Field menu (e.g., Slug, Name).

4. Add Redirect Logic on Selection

• With the dropdown selected, go to the Settings panel.

• Add a unique ID like neighborhood-select.

• Then, embed custom code to redirect users after selection:

  In the Page Settings → Before tag, insert:

  `document.getElementById('neighborhood-select').addEventListener('change', function(e) {
  if (e.target.value) {
  window.location.href = e.target.value;
  }
  });`

5. Optional: Add a Default Placeholder Option

• Before the dynamic population, manually include a default option like:
  <option value="">Select a neighborhood...</option>
  You can place this directly inside the form dropdown in Webflow Designer.

Summary

Build a dynamic dropdown using a manual embed workaround to inject CMS items as <option> elements. Each option links to the neighborhood's CMS page, and selecting an item triggers a client-side redirect based on the selected value.