How can I set up my navigation in Webflow to link to category pages using a collection list?

Published on
September 22, 2023

To set up your navigation in Webflow to link to category pages using a collection list, follow these steps:

  1. Create a Collection for your category pages:
  • Go to the Collections tab in the Webflow Designer.
  • Click on the "Add Collection" button and give it a name (e.g., "Categories").
  • Add the necessary fields for your category pages, such as a name, description, and image.
  1. Populate your Collection with category items:
  • Go to the Collections tab and open the "Categories" collection.
  • Click on the "Add" button to create new category items.
  • Fill in the details for each category item, such as the name, description, and image.
  1. Design your Category template:
  • In the Webflow Designer, go to the Pages tab and click on the template page for your category pages.
  • Design the layout and add dynamic elements to display the category information, such as the category name, description, and image.
  1. Create a Collection List on your navigation:
  • Go to your navigation element (usually a Navbar or a Nav Menu) on your website.
  • Add a Collection List element within the navigation element.
  • In the Collection List settings, select the "Categories" collection as the source.
  1. Link the Collection List items to the respective category pages:
  • Inside the Collection List, add a Link Block for each category item.
  • For each Link Block, bind the link to the respective category page by selecting the dynamic field for the category's URL.
  • You can access the dynamic field by clicking on the field icon next to the URL input and selecting the appropriate field from the "Categories" collection.
  1. Style your navigation and category links:
  • Use the Webflow Designer to style your navigation element as desired.
  • Apply styles to the Link Block within the Collection List to customize the appearance of the category links.
  1. Preview and Publish:
  • Preview your website to see how the navigation links to the category pages.
  • If everything looks good, publish your site to make the changes live.

That's it! Your navigation in Webflow is now set up to link to category pages using a collection list.

Additional Questions:

  1. How do I create a collection in Webflow?
  2. What are dynamic fields in Webflow?
  3. How do I design a template page in Webflow?