Strange behavior of anchor links

[MrOxMasTer]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/next15-anchor-link-698s83

To Reproduce

1. Open the "open" link
2. To understand that the menu does not open
3. Restart the page
4. See the open menu and the "close" link
5. Try to close using the "close" link
6. To understand that it does not close again and try to reload the page
7. To understand that the menu has closed and the "close" button is missing

Normal transitions work on headers for example, but together with target in css, for some reason so laggy and dumb. Something with caching, but it's strange even for caching

Current vs. Expected behavior

Current: The menu does not open using the link
Expected behavior: So that everything opens on time and doesn't lag.

Provide environment information

Available CPU cores: 2
Binaries:
  Node: 20.12.0
  npm: 10.5.0
  Yarn: 1.22.19
  pnpm: 8.15.6
Relevant Packages:
  next: 15.0.0-rc.0 // Latest available version is detected (15.0.0-rc.0).
  eslint-config-next: 15.0.0-rc.0
  react: 19.0.0-rc-f994737d14-20240522
  react-dom: 19.0.0-rc-f994737d14-20240522
  typescript: 5.4.5
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Navigation

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

Possible solutions to this problem:

Disable javascript on the client
Replacing the Link component with a regular a tag
But with this variation, then when the Link component is pressed after a, the menu does not close (although maybe the problem here is that I don't fully understand how target works).

[AsadSaleh]

To navigate to a different URL inside your app, say from "/" to "/menu", you should use the Link element. Like this:
<Link href="/menu">Open</Link>, instead of: <Link href={"#menu"}>Open</Link>

But, if what you want is to open/hide an HTML element, you can use a React state to handle the condition, and use Tailwind to animate the state between it.

My favorite way is to use the HTML data-* attribute using React state and manage the CSS using Tailwind's data attribute selector data-[attribute_name=attribute_value]:*

For example:

const [open, setOpen] = useState(false);

...

<div data-open={open} className="hidden data-[open=true]:block">My hidden navigation</div>

With this approach, you can efficiently create a toggling behavior between 2 CSS conditions.

[AsadSaleh]

I think this is not the problem of Next.js itself.

I recommend @MrOxMasTer to close this issue. Instead, you can utilize tools like ChatGPT / Claude AI to help you generate a correct code for this.

[MrOxMasTer]

For example:

const [open, setOpen] = useState(false);

I was interested in building a more fault-tolerant system, rather than using a banal option in the form of useState, which does not work with js disabled...

[AsadSaleh]

I see.

I hope you find your answer.

[ztanner]

Hi @MrOxMasTer --

This is an unfortunate side effect of the CSS target: pseudoselector not working well with single page apps that make use of the history API (window.history.pushState / window.history.replaceState) to handle navigations, rather than doing full document requests via a regular anchor link (<a href="...">...</a>).

For reference:

• Define that push/replaceState don't affect to :target handling whatwg/html#639 (comment)

There's not much we can do on the Next.js side without potentially breaking a lot more common cases, without the CSS spec changing.

[MrOxMasTer]

This is an unfortunate side effect of the CSS target: pseudoselector not working well with single page apps that make use of the history API (window.history.pushState / window.history.replaceState) to handle navigations, rather than doing full document requests via a regular anchor link (<a href="...">...</a>).

So the Link component does not use the a tag internally, but the window.history tag? How does it continue to work with js disabled?

[ztanner]

So the Link component does not use the a tag internally, but the window.history tag? How does it continue to work with js disabled?

It renders an anchor tag. If JavaScript is disabled, it will behave as a regular anchor link. When JavaScript is enabled, the app is progressively enhanced to instead use window.history APIs, to avoid needing to do a full document fetch when navigating and unlock other framework features.

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.