A common pattern is to create section components that you can link to with HTML5's fragment navigation. In this case, the browser scrolls to the specified section ID.
Webflow’s linking tool can’t see inside of components. so it won't list those ID'd component section. Instead you can link manually by typing in that same ID in a URL link.
Setting up your Component
On your component create an id property. Ideally this should be on the outermost element.
- If the outermost element is a DIV, Section or other native element, you can create an ID attribute from the ID field at the top of the Settings panel with that element selected.
- If the outermost element is a custom element, create the ID as an attribute, and create the component property from there. Name it ID.
Linking to it
Webflow’s linking tool can’t see inside of components. so you manually by typing in that same ID in a URL link.
- If you’re linking to the current page, you can link using a
#section-idformat. - If you’re linking to another page, you can prefix it with the page’s relative path, e.g.
/contact#formwould link to your form component on the /contact page. For homepage links, use/as the relative path.
Dynamic Linking ( Advanced )
In a special case such CMS collection-list-generated pages, you can place your component inside of a collection list, and then bind the slug directly to the ID property of the component.
To form the button links for navigation, you would need to then generate #(slug) as the links. That can be achieved with custom code, or SA5 dynamic attributes.
Attributes;
href=#or your page-specific path e.g./contact#x:href:post= (slug)
Learn more;
https://attr.sygnal.com/sa5-html/sa5-dynamic-attributes
