Sticky Table of Contents in Framer

Sticky Table of Contents in Framer

Sticky Table of Contents in Framer

Sticky Table of Contents in Framer

Website

Website

Website

Website

Sticky Table of Contents in Framer

Sticky Table of Contents in Framer

Sticky Table of Contents in Framer

Sticky Table of Contents in Framer

This is a demo website in Framer that showcases the structure you need if you want to add a sticky table of contents to your blog posts. Feel free to remix the project and dig into it to see how it's built, or watch the mini tutorial.

This is a demo website in Framer that showcases the structure you need if you want to add a sticky table of contents to your blog posts. Feel free to remix the project and dig into it to see how it's built, or watch the mini tutorial.

This is a demo website in Framer that showcases the structure you need if you want to add a sticky table of contents to your blog posts. Feel free to remix the project and dig into it to see how it's built, or watch the mini tutorial.

This is a demo website in Framer that showcases the structure you need if you want to add a sticky table of contents to your blog posts. Feel free to remix the project and dig into it to see how it's built, or watch the mini tutorial.

Sticky Table of Contents in Framer
Sticky Table of Contents in Framer
Sticky Table of Contents in Framer
Sticky Table of Contents in Framer

About the Resource

In this demo, I'm using sticky positioning to keep the table of contents in view as you scroll down the page. To achieve that, we need to make sure that the sticky positioned frame's parent containers are all set to overflow visible.

To ensure that the table of contents is optimized for mobile and tablet, we need to create a separate frame for the mobile version of the table of contents and show or hide the version on each breakpoint as needed.

sticky table of contents layers structure

As you can see in the image above, the "Mobile ToC" is hidden on the desktop breakpoint, and the regular "Table of Contents" is visible.

Step 01 outline

Step / 01

Remix the project.

Step 2 outline

Step / 02

See how it's built.

Step 3 outline

Step / 03

Try recreating it for practice, or copy and paste it to your project.

Free Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.

Free
Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.

Free Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.