Can I add a sticky sidebar with section links on a CMS Collection Page template in Webflow, similar to Webflow's Article collection page template?

Yes, you can add a sticky sidebar with section links on a CMS Collection Page template in Webflow, just like the one on Webflow’s own Article template. Here's how to do it:

1. Structure Your CMS Collection Page Template

• Open your CMS Collection Page Template (e.g., Blog Post Template) in Webflow Designer.
• Create a 2-column layout using a Grid or Flexbox: one for the sticky sidebar and one for the main content area.

2. Build the Sticky Sidebar

• Add a Div Block into the sidebar column and name it something like Sidebar.
• Inside the Sidebar, add a List of links (these can be manually created or dynamically bound to Rich Text anchor links like H2s).
• Set the Sidebar’s Position to “Sticky” and assign a Top value (e.g., 60px) so it sticks below the navbar.

3. Add Section IDs to Content Areas

• In the main content area, use Rich Text or individual Headings (like H2 or H3).
• Assign unique IDs to each section or heading you want to link to (e.g., overview, features, faq).
• Use the Element Settings panel to add the ID to the element.

4. Link Sidebar Items to Those Sections

• For each sidebar link, set the Link Type to “Page Section” and choose or manually type the ID (e.g., #overview, #features).
• This will scroll the page to the corresponding section rather than navigating to a new page.

5. Use Conditional Visibility (if needed)

• If you're dynamically pulling content from a CMS, you may want to use Conditional Visibility to show only the sidebar links that correspond with content sections that exist.
• For example, only show the “FAQ” link if the FAQ field in the CMS item is populated.

6. Ensure Responsive Layout

• On smaller breakpoints, consider hiding the sticky behavior or repositioning the sidebar for mobile usability.
• Use media queries via Webflow breakpoints to disable position: sticky on mobile if necessary.

Summary

You can create a sticky sidebar with anchor section links on a CMS Collection Page template by structuring your layout with a two-column design, using position: sticky on the sidebar, assigning unique IDs to content sections, and linking to those IDs. This mimics the behavior seen on Webflow’s own Article template effectively.