[akira28]

Operation pages now have a sticky bar of quick links to their sections: Authorization, Path, Query, Header, Body and Response. A click jumps to the section, and the link of the section in view is underlined. The examples rail also stays in view while the sections scroll.

Affects: API reference

Stack: 2 of 2, on top of #4636

Prompt summary: Stack a second PR on the expand-by-default change that adds fast links to the response, path and query sections. It follows the epTabs bar of the endpoint page proposal in the API docs prototype, in the current stylesheet and not the flagged design system.

Why

With every section open, an operation page gets long. A reader looking for the query parameters or the response scrolls past everything above it, and the page offers no map of what it holds.

What

The bar

_SectionLinks.cshtml renders one link per section the operation has, in page order. OperationViewModel.SectionLinks builds the list, and the bar is left out when the page has fewer than two sections.

Behaviour

The bar sticks under the page header and scrolls sideways on a narrow window. A link is a plain #anchor, so the existing hash handling opens a folded section it points into, and the section stops below the bar instead of under it.

Sticky examples rail

From 1024px up, .api-page-rail is sticky under the page header. When the examples are taller than the window, they scroll inside the rail under Copy page, so the code blocks keep their fixed line caps from #4554 and the Copy page menu is not clipped. That PR made the rail normal page flow because a rail sized to fit the window shrank the request code; this one keeps the caps and lets the rail scroll instead. Below 1024px the rail still follows the article.

Reused pieces

The scroll-spy is initToc from ds/toc.ts, the one behind the "On this page" outline: the bar carries data-toc and data-toc-link, and initOperationView calls initToc. The bar adds no script and one small block of CSS in api-docs.css. The design-system stylesheet has no styles for the bar yet, so a page built with NAVIGATION_PREVIEW on leaves it out and renders as before.

Out of scope: The bar for the flagged design system, marking the last link at the bottom of a short page (the outline spy does not), and the filter and sort controls the prototype shows in the query and body sections.

Verify

dotnet test tests/Elastic.ApiExplorer.Tests
cd src/Elastic.Documentation.Site && npm run test

Check on the preview

• Elasticsearch: Search — the bar lists Authorization, Path, Query, Body and Response; scroll and watch the underline follow, then click Response.
• Elasticsearch: Delete async search — a short page: every link is visible, and the underline follows the section you scroll to.
• Same page, scroll far down — the examples rail stays beside the sections; on a short window the examples scroll under Copy page.
• Elasticsearch API landing page — control: no bar, unchanged.

🤖 Generated with Claude Code

[github-actions]

Docs preview (local build)

Handbook preview: https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/4641/

Sample changed pages:

• docs/data/openapi/api-explorer.md