Prototype nav-v2: new IA with label sections, accordion sidebar#2927
Draft
theletterf wants to merge 50 commits intomainfrom
Draft
Prototype nav-v2: new IA with label sections, accordion sidebar#2927theletterf wants to merge 50 commits intomainfrom
theletterf wants to merge 50 commits intomainfrom
Conversation
Adds a new `navigation-v2.yml`-driven sidebar behind the `nav-v2`
feature flag (enabled by default in dev/preview environments).
- New YAML format: label sections (non-clickable headings), toc entries
that resolve to existing navigation nodes at their original URL paths,
page crosslinks, and title-only placeholder (disabled) links
- `SiteNavigationV2` extends `SiteNavigation`, passes the original
nav file to the base constructor so content URLs are unchanged; builds
a separate `V2NavigationItems` tree for sidebar rendering
- `GlobalNavigationHtmlWriter` detects `SiteNavigationV2` and returns
the same full V2 nav HTML (cached once) for every page
- `_TocTreeNavV2.cshtml` renders labels as `<span>`, placeholders as
`aria-disabled` anchors, folders/leaves same as V1
- `pages-nav-v2.ts` adds accordion collapse (open one section → others
collapse) and current-page marking with no auto-expand
- Feature flag key normalisation: assembler.yml uses `NAV_V2` (underscore)
but lookup uses `nav-v2` (hyphen); fixed by calling `featureFlags.Set`
which normalises via `ToLowerInvariant().Replace('_', '-')`
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
ShortId.Create("label") always produced the same SHA256 hash, so all
8 label checkboxes shared id="v2-label-1ACA80E8". Every <label for="">
targeted the first checkbox, making only "Get Started" expandable.
Fix: include the label text in the hash — ShortId.Create("label", label).
Also updates nav-v2-status.md to reflect verified accordion behaviour.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…d labels)
Translates the team's proposed information architecture into the V2 nav:
Top-level labels:
• Elasticsearch fundamentals (get-started + placeholder concepts)
• Install, deploy, and administer (deploy-manage + cloud-account)
• The Elasticsearch Platform (container for nested labels)
• Solutions and project types (solutions)
• Reference (elasticsearch + kibana)
• Troubleshooting (troubleshoot)
"The Elasticsearch Platform" has three nested labels:
• Ingest and manage data → toc: manage-data
• Search, visualize, and analyze → toc: explore-analyze
• AI and machine learning → title: placeholders (content lives in
explore-analyze today; dedicated toc roots needed to wire up)
Nested labels work with no code changes — the YAML parser, SiteNavigationV2
builder, and _TocTreeNavV2 partial already recurse through children at any
depth. The Razor partial applies level-aware styling (font-semibold at
level 0, lighter weight at depth 1+).
Also documents the proposed IA mapping and content split analysis
in nav-v2-status.md.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Labels at any depth are now unconditionally expanded — no checkbox, no chevron, children always visible. This applies to both top-level labels (Elasticsearch fundamentals, The Elasticsearch Platform, etc.) and nested labels (Ingest and manage data, Search/visualize, AI/ML). _TocTreeNavV2.cshtml: for LabelNavigationNode, removed the peer div / checkbox / chevron pattern; render a plain <span> heading followed by an always-visible <ul> of children. Removed data-v2-accordion from label <li> elements since labels no longer participate in accordion. TOC folder nodes (INodeNavigationItem) retain their existing checkbox-driven expand/collapse toggle unchanged. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Verified behaviours: labels always expanded (no toggle), nested labels same, placeholders render as disabled, TOC folders still toggle, accordion scoped to TOC siblings - Mark nested label support as done - Correct build/serve commands to dotnet run invocations - Note LabelNavigationNode.ExpandedByDefault is now unused Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Level-1 labels (top-level sections): font-semibold text-sm text-ink — bold, 14px, full ink colour. Level-2+ labels (sub-section dividers): text-[10px] font-semibold uppercase tracking-widest text-ink/50 — all-caps, 10px, wide letter-spacing, 50% opacity. This is the standard sidebar sub-group treatment (VS Code, Linear, Notion style) and makes the hierarchy immediately legible at a glance. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Level-1 label text: text-xs uppercase tracking-widest font-semibold text-ink — same small-caps treatment as level-2 but full ink colour, making them clearly structural dividers not clickable links - Level-1 label <li>: border-t border-grey-20 pt-4 mt-4 to draw a thin horizontal rule between each top-level section; first: variant removes the border/padding from the first item Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Was text-[10px] text-ink/50 — too small and too dim to read comfortably. Now text-xs (12px) text-ink/65 — same small-caps uppercase treatment, clearly subordinate to level-1 but readable at a glance. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
src/services/Elastic.Documentation.Assembler/Building/AssemblerBuildService.cs
Fixed
Show fixed
Hide fixed
🔍 Preview links for changed docs |
Introduces `GroupNavV2Item` — a YAML `group:` item that renders as an expandable folder with a disabled (cursor-not-allowed) link and a chevron toggle. Unlike `label:` (always-expanded section heading), `group:` behaves like a regular TOC folder but with no real URL. Changes: - `NavigationV2File.cs`: add `GroupNavV2Item` record + `group:` YAML parsing - `PlaceholderNavigationNode.cs`: new nav node implementing INodeNavigationItem - `SiteNavigationV2.cs`: `CreateGroup` builder (mirrors `CreateLabel`) - `_TocTreeNavV2.cshtml`: render PlaceholderNavigationNode as disabled folder - `navigation-v2.yml`: replace `toc: manage-data` in "Ingest and manage data" with the full "Ingest or migrate: bring your data into Elasticsearch" tree (placeholder titles only; no toc/page refs yet) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Translates the complete card-sort JSON into navigation-v2.yml using group:/title: placeholders throughout. All 6 top-level labels are populated with the full proposed IA structure — no toc/page refs yet. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Switch NavV2Deserializer from DeserializerBuilder to StaticDeserializerBuilder — our NavV2FileYamlConverter parses manually via parser events so the static context is sufficient; fixes IL3050/IL2055 AOT errors in the native build - Remove unused `$` import from pages-nav-v2.ts; fixes ESLint @typescript-eslint/no-unused-vars error in the npm check Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Reorganize the AI and machine learning label for clearer hierarchy: - **Agent builder**: promoted to top-level group (was nested inside AI framework) - **Elastic Inference Service**: promoted to top-level group - **Machine Learning and NLP**: unchanged (stays first) - **AI chat and LLM configuration**: new group combining AI chat experiences, LLM provider guides, and AI access management — the shared plumbing for platform features that leverage LLMs - **AI agent skills for Elastic**: unchanged (stays last) The former "AI framework" wrapper is removed. Its landing page (ai-features.md) is reused as the page for the new "AI chat and LLM configuration" group. Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…data Moves "Ingest tools (from Reference)" up one level so it sits alongside "Ingest or migrate" and "Data storage and lifecycle" as a direct child of the "Ingest and manage data" label. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Move Workflows out of "Share, alert, and automate" into its own label section, placed between "Share, alert, and automate" and "AI and machine learning". This reflects that Workflows is a distinct platform capability — not just an extension of alerting — with its own triggers, steps, data handling, and management surface. The overview page for "Share, alert, and automate" is updated separately in docs-content to remove the Workflows section and add cross-references instead (elastic/docs-content#5661). Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Update group name and page reference to match the renamed docs-content file (elastic/docs-content#5663). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Made-with: Cursor
Made-with: Cursor
Made-with: Cursor
Resolve assembler.yml: keep NAV_V2 under preview and add air-gapped env from main. Made-with: Cursor
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…2998) * feat(nav-v2): wire Elasticsearch fundamentals and Ingest data storage sections Replace placeholder title: entries with real page: cross-links in two sections of navigation-v2.yml: - Elasticsearch fundamentals: Get started, Elasticsearch concepts, and Use cases — 8 pages wired from docs-content get-started, manage-data, solutions/search, and explore-analyze - Ingest and manage data > Data storage and lifecycle: The Elasticsearch data store, Index basics, Mapping, Text analysis, Data lifecycle — 16 pages wired from docs-content manage-data and elasticsearch reference - Ingest and manage data > Transform and enrich data: Data pipelines, enrichment, mapping — 6 pages wired from docs-content manage-data and opentelemetry reference Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat(nav-v2): expand data storage, lifecycle, and transform sections to full depth Expand flat page: leaf entries into group: + page: + children: structures mirroring the full manage-data/toc.yml depth: - Data streams: 18 pages (TSDS, downsampling, logs, failure store) - Mapping: +7 pages (dynamic, explicit, runtime fields) - Text analysis: +8 pages (concepts, configure) - Templates: +2 pages - ILM: +14 pages (rollover, tutorials, migrate) - Data stream lifecycle: +4 tutorials - Rollup: +6 pages - Ingest pipelines: +3 pages (examples, error handling) - Data enrichment: +4 examples - Index basics: +1 page (perform operations) - Data store: +1 page (near real-time search) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* feat(nav-v2): wire Ingest logs, APM agents, and clean up labels - Replace "Logs (Solutions / Obs)" placeholder with full "Ingest logs" group: 20 pages from docs-content://solutions/observability/logs/ - Wire APM agents via toc: docs-content://reference/apm-agents - Add page: to "Ingest tools" and "Ingest data from applications" groups - Clean up labels: remove "(New)", "(New - Crosslinks)", "(Solutions / Obs)", "(from Reference)" suffixes Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat(nav-v2): reorder EDOT before Fleet, add Agentless integrations - Move opentelemetry://reference before docs-content://reference/fleet in the Ingest tools section - Add Agentless integrations group (3 pages) before Ingest data from applications Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Rename "Agentless integrations" to "Ingest data with agentless integrations" - Add integration-docs://reference/agentless_integrations.md to the agentless group Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…groups CollectPlaceholders only recursed into PlaceholderNavigationNode and LabelNavigationNode, missing placeholders nested inside PageFolderNavigationNode or TOC nodes. Add a catch-all case for INodeNavigationItem so all nested placeholders get stub pages. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
… tippy tooltips - Mark nav text with docs-sidebar-nav-v2__nav-text; override text-pretty/word-break for nowrap ellipsis - Folder rows: min-width 0 and overflow on flex links; grid peer min-width 0 - Tippy: cancel onShow when text is not overflowing; anchor ref for folder links (keyboard focus)
- Walk ancestor li.group-navigation nodes and add nav-v2-active-ancestor when the folder row is not .current (same color as current; chevron uses currentColor). - Folder row: same URL toggles expand/collapse only; navigating to another URL keeps the folder open (checkbox checked) so parent clicks do not collapse the subtree. - Outside-click collapse leaves folders open when the click target lies on an ancestor folder row in the same branch (folderStaysOpenForNavClick). - Remove any leftover nav-v2-active-label-ancestor class on refresh.
- Set top-level tree li padding-bottom to 32px; margins for label--top and label--nested; first nested header under an icon title uses margin-top 12px. - Remove hardcoded Platform subsection li classes; rely on generic markup and CSS. - Adjust border and nested label colors to match design. - Nav link default/hover colors (#1d2a3e, #f1f6ff); wrap label text instead of single-line ellipsis; clip nav for Tippy; styles for nav-v2-active-ancestor rows. - Drop nav-v2-truncate Tippy theme rules (tooltips disabled while text wraps).
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.
Prototypes a new information architecture sidebar gated behind the
nav-v2feature flag (auto-enabled indevandpreviewenvironments). Content is served at the same URL paths as V1 — only the sidebar layout changes.Demo: https://docs-v3-preview.elastic.dev/elastic/docs-builder/docs/2927/get-started
Navigation YAML format (
config/navigation-v2.yml)A new
navigation-v2.ymlfile drives the sidebar, separate fromnavigation.yml. It supports five item types:label:toc:path_prefix:required)page:.mdfile; renders as a real clickable linkgroup:title:The current
navigation-v2.ymlcontains the full proposed IA skeleton translated from the card-sort design.page:andtoc:refs are used where content already exists;group:andtitle:placeholders mark items still to be wired up.Placeholder stub pages
Every
title:leaf andgroup:folder that lacks apage:now gets a generated stub page at/{sitePrefix}/_placeholder/{hash}/. The stub renders the full site chrome (header, V2 nav sidebar, footer) with an<h1>of the placeholder title and a "This content is coming soon." paragraph.This means all placeholder nav items are greyed but clickable — clicking them navigates to the stub instead of doing nothing.
Filling the gaps
To wire up a placeholder:
title: Foowithtoc: repo://path(optionally keepingtitle: Footo override the root's own nav title) when a whole TOC root covers the topic.title: Foowithpage: docs-content://path/to/file.md(optionally keepingtitle: Footo override the page's own nav title) when a specific existing page covers the topic. The URL is resolved automatically from the file path.group: Foowithtoc:when the folder gains a real root, or keep it asgroup:withpage:/toc:children if the folder itself has no canonical URL.In other words,
title:doubles as a display name override — you never have to remove it when promoting a placeholder to a real link.Sidebar behaviour
group:nodes: expand/collapse toggle; accordion at top level (open one → siblings collapse); greyed link → stub pagetoc:nodes: full live tree, same expand/collapse as V1page:leaves: clickable link to the canonical page URLtitle:leaves: greyed link → stub pageVisual hierarchy
text-xs font-semibold uppercase tracking-widest· full ink · thin horizontal rule aboveURL scheme — known limitation and future direction
toc:entries currently use the same URL paths as V1 (navigation.yml), because the file-writing pipeline (GlobalNavigationPathProvider) derives output paths fromNavigationTocMappings, which is populated fromnavigation.ymlbeforeSiteNavigationV2is constructed. Changes to path prefixes in the navigation model do not propagate back to where HTML files are physically written.The intended final scheme is deterministic and URI-derived:
{scheme}/{host}/{path}for non-docs-contentrepos, and{host}/{path}fordocs-content(the default narrative repo, so the scheme adds no disambiguation value). Making this work end-to-end requires wiring the V2 nav file intoAssembleSources.AssembleAsyncso thatNavigationTocMappingsis populated fromnavigation-v2.ymlinstead ofnavigation.yml. That work is out of scope for this prototype PR.🤖 Generated with Claude Code