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?
TL;DR
- Add and bind a Collection List to the desired collection.
- Drag a Link Block or Text Link into the Collection Item placeholder and set its link destination to the slug or URL field.
- Insert and bind a Text Block inside the link to the same field used for the link's destination.
- Style the link text as needed.
To display the full URL or slug as the link text in Webflow for a list of collection item URLs, follow these steps:
1. Bind the Collection List
- Add a Collection List to your page by dragging it from the Add panel.
- Bind the Collection List to the desired collection that has the URLs or slugs you want to display.
2. Insert a Link Block or Text Link
- Drag a Link Block or Text Link into your Collection Item placeholder within the Collection List.
3. Set the Link Destination
- Select the link element you've just added.
- In the Element Settings panel, set the link settings to point to the relevant field from your collection, usually the slug or URL field.
4. Add a Text Element Inside the Link
- Drag a Text Block inside the Link Block or edit the Text Link itself.
- Bind the Text Block’s text setting to the same Slug or URL field used in the link settings. This will automatically pull in the full URL or slug as the link text.
5. Style the Text
- Style the text within the link as required to match your design.
Summary
To display a collection item’s full URL or slug as link text in Webflow, bind the text within a Link Block or Text Link to the same slug or URL field you use for the link destination. This ensures both the link and the displayed text are consistent, showing the complete path.
