Repository navigation
Move nav method glyphs into the SVG sprite sheet - #4237
Merged
Merged
Conversation
Each API operation page emits 613 inline SVG elements in the sidebar nav, but they are only three distinct shapes (arrow, X, multi-operation branch). At ~246 bytes each on average, those duplicates account for ~151 KB per page — 89% of the 436 KB page weight. Three symbols are added to the hidden sprite sheet in `_GlobalLayout.cshtml`: `icon-api-arrow`, `icon-api-x`, and `icon-api-multi`. The templates that previously inlined the full path data now emit a single `<use>` reference per glyph instead. `currentColor` inheritance and the `rotate(180deg)` transform on GET arrows both work through `<use>` — the outer `<svg>` carries the transform. The same inline paths appear in `_HttpMethodBadge.cshtml` on API Explorer operation pages; those are updated to use the same sprites. `icon-chevron-double-down` is also added to the sprite sheet. It was referenced in `_TocTreeNavLegacy.cshtml:25` but missing — a pre-existing dangling reference that rendered as a blank icon. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
akira28
approved these changes
Sep 29, 2026
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
LGTM.
What is this? | From workflow: PR Review
Give us feedback! React with 🚀 if perfect, 👍 if helpful, 👎 if not.
Contributor
Docs preview (local build)Handbook preview: https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/4237/ |
Member
Author
Fixing nested chevrons. |
The `ul.nav-subtree` was a bare flex item of `li.nav-folder` with no explicit width. In a flex wrap container, this makes the subtree content-sized, so its children's `w-full` percentage resolves against a collapsing containing block. The result: `grid-cols-[1fr_auto]` at depth 2+ collapsed to text width + chevron, placing the `>` glyph immediately after the link text instead of at the panel's right edge. Wrapping the subtree in `div.nav-subtree-clip` (which carries `@apply w-full`) gives it a defined containing block. The existing CSS selectors already handle the clip path for both reveal and current-page line-darkening rules, so no CSS change is needed. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Member
Author
|
chevrons fixed, merging |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The three distinct SVG shapes rendered by `_NavHttpMethodGlyph.cshtml` were being emitted as 613 separate inline elements per API operation page — 151 KB of duplicated markup per page, 389 KB of sidebar, and ~1.7 GiB of raw output across all 4,029 pages. Moving them to the existing sprite sheet cuts the sidebar to ~215 KB and the raw output by ~550 MB.
Also fixes chevron misalignment at deeper nesting levels in the legacy nav.
Affects: Site UI, API reference
Why
`_NavHttpMethodGlyph.cshtml` rendered the full SVG `` string on every call — one call per nav item, with 200+ items per sidebar. Only three shapes exist: an arrow (GET/POST/PUT/PATCH), an × (DELETE), and a multi-op indicator. The page also had a dangling `` reference in `_TocTreeNavLegacy.cshtml` that pointed to a symbol that was not in the sprite sheet.
Separately, `ul.nav-subtree` was a bare flex item of `li.nav-folder` (`display: flex; flex-wrap: wrap`) with no explicit width. In a flex wrap context this makes the subtree content-sized, so children's `w-full` resolves against a collapsing containing block. The result: `grid-cols-[1fr_auto]` at depth 2+ collapsed to text width + chevron, placing `>` immediately after the link text instead of at the panel's right edge.
What
Sprite sheet symbols
Four `` elements — `icon-chevron-double-down`, `icon-api-arrow`, `icon-api-x`, and `icon-api-multi` — are now in the hidden sprite `` in `_GlobalLayout.cshtml`. The `icon-chevron-double-down` symbol resolves the pre-existing dangling reference in `_TocTreeNavLegacy.cshtml`.
`_NavHttpMethodGlyph.cshtml`
Each branch now emits a single `` with a `` reference instead of a full inline ``. The inline `width="12" height="12"` stays — the CSS rule at `.nav-v2-api-method svg` sets only `display:block`, so dropping the attributes would collapse the element to 300×150.
`_HttpMethodBadge.cshtml`
The same two shapes appear on API operation page badges in `src/Elastic.ApiExplorer/`. These now use the same sprite references. No CSS change is needed; `.api-method-icon svg` already sizes explicitly.
Legacy nav chevron alignment
`_TocTreeNavLegacy.cshtml` now wraps `ul.nav-subtree` in `div.nav-subtree-clip` (which carries `@apply w-full`) for both the `Heading` and `else` branches. This gives the subtree a defined containing block so the `grid-cols-[1fr_auto]` grid fills the full panel width at every nesting depth. The existing CSS selectors already handle `nav-subtree-clip > nav-subtree` for both the reveal rule and the current-page line-darkening rule, so no CSS change is needed.
Verify
dotnet test tests/Navigation.Tests/Then build and open an API operation page locally to confirm method pills are coloured correctly and icons render at the right size in both light and dark mode. Also open a nested nav section (depth 2+) and confirm the `>` chevron sits flush against the right edge of the panel.
Supersedes #4207.
🤖 Generated with Claude Code