Files
supabase/apps/docs
53b0760918 Fix sidebar highlight sync in the reference docs (#42249)
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Bug fix

## What is the current behavior?

On reference documentation pages (/reference/cli/*,
/reference/javascript/*, etc.), the sidebar navigation sometimes gets
"stuck"; clicking a different section scrolls the page correctly, but
the sidebar highlight remains on a previously selected item instead of
updating to the newly selected one.

This issue is intermittent and typically occurs after the page has been
idle for 2-3 minutes. It appears to be caused by Next.js's usePathname()
hook returning stale data after the internal router state becomes
desynced from the actual browser URL (which is updated via
history.pushState/replaceState).

## What is the new behavior?

The sidebar now reliably highlights the correct active section, both
when:
- Clicking sidebar links
- Scrolling through the page (scroll spy)

This is achieved by introducing a custom useCurrentPathname() hook that:
1. Reads directly from window.location.pathname (the source of truth)
2. Subscribes to history.pushState and history.replaceState changes
3. Uses React 18's useSyncExternalStore for proper external state
synchronization

The implementation uses a singleton pattern to ensure history methods
are only patched once, even when multiple components subscribe.

## Additional context


https://github.com/user-attachments/assets/87da13e0-6b01-44d9-8ce5-f12d0dcaa8fb



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Improved navigation reliability by enhancing active reference tracking
in menus when navigating between documentation pages.
* Fixed inconsistent pathname updates to ensure more reliable navigation
state synchronization across the documentation interface.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Co-authored-by: Illia Basalaiev <illiab@IMB3.local>
Co-authored-by: Chris Chinchilla <chris.ward@supabase.io>
2026-01-29 14:45:48 +11:00
..
2025-12-01 12:19:35 +00:00
2025-11-28 08:58:11 +00:00
2024-10-24 12:56:20 -02:30
2024-10-24 12:56:20 -02:30

Reference Docs

Supabase Reference Docs

Maintainers

If you are a maintainer of any tools in the Supabase ecosystem, you can use this site to provide documentation for the tools & libraries that you maintain.

Versioning

All tools have versioned docs, which are kept in separate folders. For example, the CLI has the following folders and files:

  • cli: the "next" release.
  • cli_spec: contains the DocSpec for the "next" release (see below).
  • cli_versioned_docs: a version of the documentation for every release (including the most current version).
  • cli_versioned_sidebars: a version of the sidebar for every release (including the most current version).

When you release a new version of a tool, you should also release a new version of the docs. You can do this via the command line. For example, if you just released the CLI version 1.0.1:

npm run cli:version 1.0.1

DocSpec

We use documentation specifications which can be used to generate human-readable docs.

  • OpenAPI: for documenting API endpoints.
  • SDKSpec (custom to Supabase): for SDKs and client libraries.
  • ConfigSpec (custom to Supabase): for configuration options.
  • CLISpec (custom to Supabase): for CLI commands and usage.

The benefit of using custom specifications is that we can generate many other types from a strict schema (eg, HTML and manpages). It also means that we can switch to any documentation system we want. On this site we use Next.js, but on Supabase's official website, we use a custom React site and expose only a subset of the available API for each tool.

Contributing

To contribute to docs, see the developers' guide and contributing guide.