How to fix nested links

Nested links (a tags) are not allowed on web pages. Even though your page might still work (the browser will do the very best it can to guess what you wanted) it will be much slower and cause unexpected bugs.

Unfortunately nested links are easy to make. You can link an entire Frame and then put some text inside it that also has links. In HTML, it would look something like this:

<a href="/contact-form">

<div>

    <p>You can <a href="/contact-details">contact us</a> if you so desire.</p>

  </div>

</a>

It’s now easy to understand why it’s invalid: if you try to figure out what should happen if you click on the inner link, which one should the browser use?

Luckily, Framer can help you avoid most of these because we can detect them on the canvas for static content, like Frames and static text. If that is the case, we will show a small alert next to your layer (with a link to this page) so you can fix it before you publish.

To fix it, simply remove one of the links (it’s typically the outer one) and rework your structure so that they don’t nest anymore. You can always ask in the community if you’re not sure how to approach this.

Unfortunately, there are also instances where we can only detect them after we build the page (on publishing). That is in cases where dynamic content results in a nested link, for example:

• CMS content (with links)

• Components (with links that aren't variables)

• Overrides and code components (that add links)

In that case you will get an optimization warning like this for the specific pages that have nested links (all other pages will still be optimized):

### /page-path

This page has nested links (<a> tags) and could not be optimized; meaning that it might still work, but it's much better if you fix it: https://framer.com/r/nested-links

The nested links are:

- contact us ("/contact-details")

You can use the nested links hint to fix it exactly like above.

How to fix nested links

Nested links (a tags) are not allowed on web pages. Even though your page might still work (the browser will do the very best it can to guess what you wanted) it will be much slower and cause unexpected bugs.

Unfortunately nested links are easy to make. You can link an entire Frame and then put some text inside it that also has links. In HTML, it would look something like this:

<a href="/contact-form">

<div>

    <p>You can <a href="/contact-details">contact us</a> if you so desire.</p>

  </div>

</a>

It’s now easy to understand why it’s invalid: if you try to figure out what should happen if you click on the inner link, which one should the browser use?

Luckily, Framer can help you avoid most of these because we can detect them on the canvas for static content, like Frames and static text. If that is the case, we will show a small alert next to your layer (with a link to this page) so you can fix it before you publish.

To fix it, simply remove one of the links (it’s typically the outer one) and rework your structure so that they don’t nest anymore. You can always ask in the community if you’re not sure how to approach this.

Unfortunately, there are also instances where we can only detect them after we build the page (on publishing). That is in cases where dynamic content results in a nested link, for example:

• CMS content (with links)

• Components (with links that aren't variables)

• Overrides and code components (that add links)

In that case you will get an optimization warning like this for the specific pages that have nested links (all other pages will still be optimized):

### /page-path

This page has nested links (<a> tags) and could not be optimized; meaning that it might still work, but it's much better if you fix it: https://framer.com/r/nested-links

The nested links are:

- contact us ("/contact-details")

You can use the nested links hint to fix it exactly like above.

How to fix nested links

Nested links (a tags) are not allowed on web pages. Even though your page might still work (the browser will do the very best it can to guess what you wanted) it will be much slower and cause unexpected bugs.

Unfortunately nested links are easy to make. You can link an entire Frame and then put some text inside it that also has links. In HTML, it would look something like this:

<a href="/contact-form">

<div>

    <p>You can <a href="/contact-details">contact us</a> if you so desire.</p>

  </div>

</a>

It’s now easy to understand why it’s invalid: if you try to figure out what should happen if you click on the inner link, which one should the browser use?

Luckily, Framer can help you avoid most of these because we can detect them on the canvas for static content, like Frames and static text. If that is the case, we will show a small alert next to your layer (with a link to this page) so you can fix it before you publish.

To fix it, simply remove one of the links (it’s typically the outer one) and rework your structure so that they don’t nest anymore. You can always ask in the community if you’re not sure how to approach this.

Unfortunately, there are also instances where we can only detect them after we build the page (on publishing). That is in cases where dynamic content results in a nested link, for example:

• CMS content (with links)

• Components (with links that aren't variables)

• Overrides and code components (that add links)

In that case you will get an optimization warning like this for the specific pages that have nested links (all other pages will still be optimized):

### /page-path

This page has nested links (<a> tags) and could not be optimized; meaning that it might still work, but it's much better if you fix it: https://framer.com/r/nested-links

The nested links are:

- contact us ("/contact-details")

You can use the nested links hint to fix it exactly like above.