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
  • Create a static Dropdown in the Navbar and remove placeholder links.  
  • Drag a Collection List into the Dropdown Menu, bind it to your CMS Categories, and set links to their corresponding Template Pages.

Yes, you can connect a Dropdown component in Webflow to a Collection Template using a combination of static and dynamic elements. However, Webflow does not natively support binding dynamic CMS content directly inside a Dropdown component in the Navbar. You’ll need a workaround.

1. Set Up Your CMS Collection

  • Create a Categories Collection if you haven’t already (e.g., Blog Categories, Product Types).
  • Make sure each category has fields like Name and Slug, useful for linking.

2. Create a Static Dropdown Structure

  • In your Navbar, drag in a Dropdown component.
  • Rename the parent link (e.g., "Categories").
  • Inside the Dropdown, remove the placeholder links.

3. Add a Collection List to the Dropdown

  • Drag a Collection List from the Add panel into the Dropdown Menu area.
  • Connect it to your Categories collection.
  • Inside the Collection List, add a Text Link or Link Block.
  • Bind the Text to the Category Name and set the Link to go to the appropriate Current Category Template Page.

4. Style and Adjust Behavior

  • Style the Collection List inside the Dropdown to match the rest of your menu.
  • Make sure the hover or click interaction for the Dropdown still works as expected.

Note: You can’t use dynamic CMS content in a native Webflow Navbar symbol across multiple pages. As a workaround, use a custom dropdown built outside the Navbar, or embed the menu in each selected template page.

Summary

You can connect a dropdown to a CMS Collection by adding a Collection List into the Dropdown component manually. Drag a Collection List into the Dropdown Menu area, bind it to your Categories, and style the links accordingly. Just keep in mind Webflow’s limitations when using dynamic content inside symbols or Navbar components.

Rate this answer

Other Webflow Questions