How can a CMS collection be linked to a dropdown menu in Webflow?
TL;DR
- Add a Dropdown element, insert a Collection List into the Dropdown List, and bind it to a CMS Collection.
- Add and bind Link elements within the Collection Items, style them, and the dropdown will auto-update with CMS changes.
To link a CMS collection to a dropdown menu in Webflow, you’ll dynamically populate dropdown items from the collection using a Collection List inside the dropdown. This allows the dropdown to auto-update when CMS items change.
1. Structure the Dropdown Menu
- Add a Dropdown element to your Navbar or desired section.
- Inside the dropdown, select the Dropdown List element where you want the CMS items to appear.
2. Bind a Collection List to the Dropdown
- Drag a Collection List into the Dropdown List.
- In the Collection List Settings Panel, choose your target CMS Collection (e.g., Categories, Services, etc.).
3. Design the Collection Items as Dropdown Links
- Inside the Collection Item, add a Link Block or Text Link.
- Bind the link’s text to a collection field (e.g.,
Name). - Set the link’s destination:
- For Collection Pages: Choose Current Collection Page.
- For custom URLs: Bind to a URL field from your collection using the Link Settings.
4. Style and Finalize
- Style the dropdown and CMS links as needed.
- Optional: Add hover or interactions for enhanced menu behavior.
5. Test Responsiveness and Functionality
- Preview your site to confirm that dropdown items reflect your CMS entries.
- Whenever you add, remove, or update CMS items, the dropdown menu will automatically reflect those changes.
Summary
To link a CMS collection to a dropdown menu in Webflow, place a Collection List inside the Dropdown List, bind it to your CMS Collection, and style the list items as links. This ensures the dropdown dynamically updates with CMS content.