Can I connect a dropdown component in Webflow to a collection template? I want to display a list of categories under a general link in the menu.
TL;DR
- Add a Dropdown in your layout and insert a Collection List inside the Dropdown List, binding it to your CMS Collection and linking each item to its dynamic page.
- Avoid placing Collection Lists inside Navbar Symbols; instead, unlink the Symbol or build a custom navbar to enable dynamic dropdowns.
You can connect a dropdown menu in Webflow to a CMS Collection, such as categories, by using a Collection List within the dropdown. However, there are some limitations and specific setups required inside Webflow’s Collection Template Pages or Symbols used inside Navbars.
1. Use a Collection List in a Dropdown
- First, drag a Dropdown component into your Navbar or desired section.
- Inside the Dropdown List (the open state), add a Collection List.
- Bind the Collection List to your desired CMS Collection (e.g., Categories).
- Inside the Collection List, add a Text Link (or Link Block) and connect it to each category's Name and slug-based URL using the built-in Link Settings > Page option linked to the dynamic Collection Template Pages.
2. Limitations in the Navbar Symbol
- The native Navbar may be a Symbol, and Webflow does not allow Collection Lists inside Symbols.
- To work around this:
- Unlink the Navbar Symbol, or
- Use a custom navbar built manually (not using the Navbar element), and include the CMS-powered dropdown there.
3. Filter and Style the Dropdown
- You can filter the Collection List to show only specific categories if needed via the Collection List Settings.
- Style the Dropdown and Collection items to match your desired menu appearance using Flexbox or other layout settings.
4. Create Category Template Pages (if needed)
- Ensure each category in your CMS has a Collection Template Page so the links in the dropdown can go to a unique category page.
- You can also create manual static pages and use categories as filters via query parameters, but this requires more complex filtering logic (e.g., with custom scripts or third-party tools).
Summary
You can dynamically populate a dropdown with CMS Categories using a Collection List inside the Dropdown, but you must avoid doing so inside a Symbolized Navbar. Use a custom menu or unlink the Navbar to make it work correctly.