Can a navbar navigation link in Webflow be directly linked to a collections page without the need for an intermediary page?
TL;DR
- In your Webflow navbar, manually enter the URL slug of the Collection Page (e.g.,
/blog) as the link. - Navigate to the Collection Page slug via the Pages panel to confirm accuracy; no additional page setup or code is needed.
Yes, you can directly link a Webflow navbar navigation link to a Collection page. Webflow allows you to link navigation items to specific Collection Pages without needing any intermediary or static page.
1. Use a Manual Link to the Collection Page
- Collection Pages are template pages for specific CMS Collections (e.g., blog posts, products).
- These pages have predictable URLs based on the Collection slug. For example:
/blog/{slug}whereblogis the Collection slug.
To link directly:
- Go to your Navbar, select the navigation link.
- In the Element Settings (gear icon), choose Page or URL option.
- If linking to a dynamic Collection Page template (like the Blog main collection page), Webflow doesn't auto-list it in the "Pages" dropdown.
- Instead, manually enter the static URL of the Collection Page template — usually just the slug, for example:
/blog(for a Blog Collection Page)/products(for a Products Collection Page)
2. Understand the Difference Between Collection Page and Collection Item
- If you want to send users to the list of all collection items, that's the Collection Page template based on the Collection slug, accessible directly using
/[collection-name]. - If you're trying to link to a specific collection item, you'll need to reference that specific item's slug, like
/blog/my-first-post. These links are dynamic and not typically used in the main navbar unless hand-coded or managed via custom code or logic.
3. Confirm Collection Page Slug
- To find or confirm your Collection Page slug:
- Go to the Pages panel, scroll to the CMS Collection Pages section.
- Click on the Collection (e.g., “Blog Posts”) to see the slug: it's typically
/blog,/projects, etc. - Use this URL in your navigation link.
4. Limitations to Note
- You cannot bind navigation links to dynamic CMS data (like the latest blog post) in the Navbar without using custom code or symbols with conditional logic.
- However, you can manually enter the Collection Page’s URL, which functions like a static archive page for that CMS Collection.
Summary
You can directly link a navbar item to a Collection Page by entering the Collection slug URL (e.g., /blog) as a manual link. No intermediary page is required. Just ensure the Collection Page’s slug matches the path you use.