Can a navbar navigation link in Webflow be directly linked to a collections page without the need for an intermediary page?
TL;DR
- Identify the desired CMS item’s slug and manually create the URL using
/collection-name/item-slugformat. - In the navbar, select a link element and set its Link Type to URL, then enter the full path to the dynamic Collection Page.
Yes, a navbar link in Webflow can directly link to a dynamic Collection Page without needing an intermediary page. Collection Pages are generated automatically for each item in a collection and are accessible via predictable URLs.
1. Understand Collection Page Structure
- Each Webflow Collection Page has a slug based on the collection name (e.g.,
/blog/[slug]). - You can copy these URLs and use them in static elements like the navbar.
2. Linking to a Specific Collection Page
- Identify the Slug of the CMS item you want to link (e.g.,
webflow-tips). - The final URL will follow this format:
/collection-name/item-slug(e.g.,/blog/webflow-tips), whereblogis the Collection slug andwebflow-tipsis the individual item’s slug.
3. Add the Link to the Navbar
- Go to your navbar component in the Designer.
- Select any link element inside the navbar (e.g., a Link Block or Text Link).
- In the Element Settings panel, set the Link Type to URL.
- Enter the full path to the Collection Page you want to link, such as
/blog/webflow-tips.
4. Limitations
- This method requires that you manually set the URL, meaning it doesn’t update dynamically if item slugs change.
- You cannot filter or bind CMS content dynamically within navbar links unless you build the entire navbar using a Collection List, which comes with layout constraints and is not recommended in navbars.
Summary
You can link a navbar item directly to a Collection Page by manually setting the static URL using the collection and item slugs. No intermediary page is needed.