How can I assign an in-page link to individual team members in a collection list on a Webflow page without using individual collection pages?
TL;DR
- Add a unique anchor ID to each Collection Item using a custom attribute (
id = member-{{slug}}). - Create anchor links by setting link elements to
#member-{{slug}}within the Collection List or other navigation elements. - Publish and test to confirm that clicking a link scrolls to the correct team member.
You want to create in-page anchor links for each team member in a Webflow Collection List without using individual Collection Pages. Follow these steps to achieve this using Collection Item IDs and anchor links.
1. Add a Unique Anchor ID to Each Collection Item
- Select the Collection List on the page.
- Click on any Collection Item inside the list.
- Under the Element Settings Panel (gear icon), find the Custom Attributes section.
- Add a custom attribute:
- Name:
id - Value:
member-{{slug}}(the slug field ensures each item gets a unique ID).
2. Create Anchor Links for Each Team Member
- Inside the same Collection List, add a link element where users can click to jump to a specific member.
- Set the Link Type to Page Section.
- In the Link Settings, enter
#member-{{slug}}as the link. - Repeat this step for any other place (e.g., a sidebar menu or buttons) where users need to jump to specific team members.
3. Test the Anchor Links
- Publish your site and verify that clicking a team member link scrolls the page to the correct Collection Item.
Summary
You can create in-page links for Collection Items by adding unique IDs using the slug field, then linking to them with #member-{{slug}}. This allows users to navigate directly to a team member's section without needing separate Collection Pages.