Is there a way to display the full URL or slug as the link text in Webflow when creating a page with a list of collection item URLs?
- Use the Slug field as link text by binding a Text or Link Block to it in the Collection List.
- Manually build the full URL by combining static text with the Slug in a text field, or create a Full URL field in the CMS populated manually or via automation.
- Display the complete URL as link text and link URL by binding a Text Link to the Full URL field in your Collection.
To display the full URL or slug as link text in Webflow when listing Collection items, you can use Collection fields creatively, even though Webflow doesn’t expose the full published URL directly.
1. Use the Slug Field as Link Text
- In the Collection List, connect a Text Block or Link Block to the Slug field of the Collection item.
- To do this, select the element, then click the “Settings” (gear icon) in the right sidebar.
- Choose “Get text from...” and map it to the Slug field.
This will show only the slug, not the full URL.
2. Manually Build the Full URL Using Static and Dynamic Parts
If you want to show the actual URL (e.g., https://your-site.com/blog/post-title):
- Use a rich text or text block in the Collection list.
- Set the text to include the static parts of the URL, then append the dynamic slug:
- Example:
https://your-site.com/blog/+Slug - You can’t concatenate text fields directly in Webflow, but you can:
- Use a Plain Text field (like "Full URL") in your Collection and populate it manually or via automation (e.g., Zapier or Make).
- Or build the full text in the CMS import before upload.
3. Display the Full URL as Link Text
- Add a Text Link inside your Collection List.
- Set the Link Text to your Slug or Full URL field.
- In the link settings, bind the link URL to the Slug, and add the base path:
- For example:
https://your-site.com/blog/+Slugvia the external link field.
Since Webflow link settings don’t support formula-style string building, you need a CMS field with the complete URL to make this look clean.
4. (Optional) Add a Full URL Field in Your CMS
To simplify future edits:
- Create a new Plain Text field in your Collection called Full URL.
- Populate it with the full slug-based URL for each item (e.g.,
https://your-site.com/blog/post-title). - Use this both as the link text and the link URL in your design.
You can automate this population during CMS item creation using tools like Zapier, Make, or Webflow Logic (Beta).
Summary
Webflow doesn’t automatically expose the full published URL, but you can work around this by using the Slug field and combining it with fixed path text. For best results, create a Full URL field in your CMS and display it as both link text and href.