How to Link to a Specific Section of a Page in Framer

Linking to a section means pointing to a heading or element lower on the same page or on another page

In Framer, you create these links by giving a section an ID (a unique name), then building a link that points to that ID. When someone clicks the link, the page scrolls directly to that section instead of loading the top of the page. This works for navigation menus, table of contents, "back to top" buttons, and any time you want a link to land on a specific part of a page rather than the beginning.

The process has two parts: naming the section you want to link to, then creating the link that finds it. Framer handles both through its design interface and link settings.

Key Takeaways

Every section you want to link to needs a unique ID set in Framer's design panel — this is the target the link will point toward.
Create the link by selecting a text element or button, opening the link menu, and choosing the ID from the dropdown or typing it manually.
Links to sections on the same page use a hash symbol followed by the ID, like #contact-form, and work without publishing.
Links to sections on a different page combine the page URL with the ID, like /about#team-members.
Test section links in preview mode before publishing to make sure the page scrolls to the right place.

How to assign an ID to a section in Framer

Open your Framer project and select the element or section you want to link to — this could be a heading, a text block, a container, or any component. In the right panel, look for the Design tab and scroll down until you see the ID field. This field is usually near the bottom, sometimes under an expandable "Advanced" section depending on your Framer version.

Type a unique name into the ID field. Use lowercase letters, numbers, and hyphens only — no spaces or special characters. Good ID names describe what the section is: contact-form, pricing-table, team-members, or faq-section. Each ID on your page must be different; if two sections share the same ID, the link will only jump to the first one.

Press Enter to save the ID. You do not need to publish your site for the ID to work — it is active as soon as you set it in the editor.

Creating a link that points to a section ID

Select the text, button, or element you want to turn into a link. This could be a navigation menu item, a button labeled "Go to pricing," or a text link in your footer. With the element selected, look for the Link option in the right panel — it usually appears as a chain icon or a "Link" field.

Click the Link field to open the link menu. You will see options to link to a page, an external URL, or a section. Choose the section option or look for a dropdown that shows all available IDs on your current page. If your ID appears in the list, click it to select it. If it does not appear, type the ID manually — Framer will accept it even if you have not created the section yet, though the link will not work until the ID exists.

For links to sections on a different page, you will need to type the full path: the page URL followed by a hash and the ID, like /services#pricing-table. Framer will show you available pages in the link menu; select the page first, then add the hash and ID at the end.

Testing section links before publishing

Click the preview button (usually a play icon or "Preview" button in the top toolbar) to test your links without publishing. Click the link you just created and watch whether the page scrolls to the correct section. If it does not scroll, or scrolls to the wrong place, go back to the editor and check that the ID on the target section matches exactly what you typed in the link — IDs are case-sensitive, so contact-form and Contact-Form are different.

If the link still does not work, make sure the ID field is actually filled in on the target section. Sometimes the ID field appears empty even though you thought you saved it; click into it again and re-enter the ID to confirm it sticks.

Common mistakes and how to fix them

The most frequent problem is a mismatch between the ID you typed in the link and the ID on the section itself. If your link says #contact-form but the section ID is contactform (no hyphen), the link will not work. Copy and paste the ID from the section into the link field to avoid typos.

Another common issue is forgetting the hash symbol when typing an ID manually. A link to a section always needs the hash: #pricing, not pricing. Framer usually adds this automatically if you use the dropdown, but if you type it yourself, include the hash.

If you are linking to a section on a different page and the link does not work, check that you used the correct page path. In Framer, page paths are usually lowercase and use hyphens instead of spaces — a page titled "Our Team" might have the path /our-team. The full link would be /our-team#team-members.

Using section links in navigation menus and tables of contents

Section links are especially useful for long pages where you want readers to jump between sections without scrolling. Create a navigation menu or table of contents at the top of your page, then link each menu item to a section ID further down. This works well for documentation pages, pricing pages with multiple tiers, or FAQ pages where each question is its own section.

To build this, create a text element or button for each menu item, then link each one to the corresponding section ID. Framer will handle the scrolling automatically when someone clicks. You can also add a "back to top" link at the bottom of the page by linking it to the ID of your header or top section.

Frequently Asked Questions

Can I link to a section on someone else's Framer site?

No — section links only work within your own Framer site. You can link to external websites, but you cannot point to a specific section on another person's Framer site unless they have published their page and you know the exact ID they used. Even then, most sites do not expose their internal IDs publicly.

What happens if I delete a section that has an ID?

Any links pointing to that ID will break. The page will load normally, but the link will not scroll anywhere. Before deleting a section, search your site for links that point to it, or simply remove the ID from the section instead of deleting the section itself.

Do section links work on mobile devices?

Yes — section links scroll to the target section on phones and tablets the same way they do on desktop. The scroll behavior is the same across all devices.

Can I add a delay or animation when the page scrolls to a section?

Framer's built-in section links scroll instantly. If you want a smooth scroll animation, you can use Framer's interactions or custom code, but the basic link-to-ID feature does not include animation options in the design panel.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.