Restyle the docs sidebar and top bar to match Figma

config/navigation.yml

@@ -23,6 +23,7 @@ toc:
   - toc: explore-analyze
   - toc: deploy-manage
   - toc: cloud-account
+    navigation_title: Manage your Cloud account
   - toc: troubleshoot
 
 

config/navigation_preview.yml

@@ -26,6 +26,7 @@ toc:
       - toc: explore-analyze
       - toc: deploy-manage
       - toc: cloud-account
+        navigation_title: Manage your Cloud account
       - toc: extend
         children:
           - toc: kibana://extend

src/Elastic.Documentation.Configuration/Toc/SiteNavigationFile.cs

@@ -146,7 +146,16 @@ public class SiteTableOfContents : List<ISiteNavigationEntry>;
 /// When <c>true</c>, the resolved navigation node is marked as an island from the assembler side.
 /// OR-ed with any <c>island: true</c> the content set already declares — can only enable, never disable.
 /// </param>
-public record SiteTableOfContentsRef(Uri Source, string PathPrefix, IReadOnlyCollection<SiteTableOfContentsRef> Children, bool Island = false)
+/// <param name="NavigationTitle">
+/// Optional assembler-side label for this TOC root. When set, replaces the index page title
+/// in the assembled navigation (dropdowns, back-links, sidebar root row). Does not change the page H1.
+/// </param>
+public record SiteTableOfContentsRef(
+	Uri Source,
+	string PathPrefix,
+	IReadOnlyCollection<SiteTableOfContentsRef> Children,
+	bool Island = false,
+	string? NavigationTitle = null)
 	: ISiteNavigationEntry, ITableOfContentsItem
 {
 	// For site-level TOC refs, the Path is the path prefix (where it will be mounted in the site)
@@ -281,7 +290,12 @@ public object ReadYaml(IParser parser, Type type, ObjectDeserializer rootDeseria
 			var island = dictionary.TryGetValue("island", out var islandObj) && islandObj is string islandStr
 				&& bool.TryParse(islandStr, out var islandBool) && islandBool;
 
-			return new SiteTableOfContentsRef(source, pathPrefix, children, island);
+			var navigationTitle = dictionary.TryGetValue("navigation_title", out var titleObj) && titleObj is string title
+				&& !string.IsNullOrWhiteSpace(title)
+				? title
+				: null;
+
+			return new SiteTableOfContentsRef(source, pathPrefix, children, island, navigationTitle);
 		}
 
 		var keys = string.Join(", ", dictionary.Keys.Select(k => $"'{k}'"));
@@ -356,7 +370,12 @@ public class SiteTableOfContentsRefYamlConverter : IYamlTypeConverter
 			var island = dictionary.TryGetValue("island", out var islandObj) && islandObj is string islandStr
 				&& bool.TryParse(islandStr, out var islandBool) && islandBool;
 
-			return new SiteTableOfContentsRef(source, pathPrefix, children, island);
+			var navigationTitle = dictionary.TryGetValue("navigation_title", out var titleObj) && titleObj is string title
+				&& !string.IsNullOrWhiteSpace(title)
+				? title
+				: null;
+
+			return new SiteTableOfContentsRef(source, pathPrefix, children, island, navigationTitle);
 		}
 
 		var keys = string.Join(", ", dictionary.Keys.Select(k => $"'{k}'"));

src/Elastic.Documentation.Navigation/Assembler/SectionTopNavBuilder.cs

@@ -16,7 +16,7 @@ namespace Elastic.Documentation.Navigation.Assembler;
 /// <item><c>children:</c> — maps to a <see cref="SectionNavigation"/> tree node; active when the
 ///   current page's NavigationRoot.Id equals the section's Id.</item>
 /// </list>
-/// Plain <c>toc:</c> entries also produce one tab, active when NavigationRoot.Id == item.Id.
+/// Leftover top-level <c>toc:</c> entries are not tabs (they stay in the tree).
 /// Active state is determined by comparing the current page's NavigationRoot.Id to each
 /// tab's stored <see cref="TopNavLinkItem.SectionId"/>.
 /// </summary>
@@ -28,14 +28,8 @@ public static class SectionTopNavBuilder
 		if (navFile.TableOfContents.Count == 0)
 			return null;
 
-		// Index plain toc: items by Identifier for fast lookup.
-		// Sections with children now live in the tree as SectionNavigation nodes and
-		// are looked up by title instead.
-		var byIdentifier = topLevel
-			.OfType<IRootNavigationItem<INavigationModel, INavigationItem>>()
-			.Where(item => item is not SectionNavigation)
-			.ToDictionary(item => item.Identifier);
-
+		// Sections with children live in the tree as SectionNavigation nodes and
+		// are looked up by title.
 		var sectionsByTitle = topLevel
 			.OfType<SectionNavigation>()
 			.ToDictionary(s => s.Title, StringComparer.OrdinalIgnoreCase);
@@ -74,17 +68,11 @@ public static class SectionTopNavBuilder
 					}
 				}
 			}
-			else if (entry is SiteTableOfContentsRef tocRef)
+			else if (entry is SiteTableOfContentsRef)
 			{
-				// Plain toc: entry — one tab, active when NavigationRoot.Id == item.Id
-				if (byIdentifier.TryGetValue(tocRef.Source, out var navItem))
-				{
-					items.Add(new TopNavLinkItem(
-						navItem.NavigationTitle,
-						navItem.Index.Url,
-						IsExternal: false,
-						SectionId: navItem.Id));
-				}
+				// Preview tabs come from section: entries only. A leftover top-level
+				// toc: (the local docs-builder inject) stays in the tree, not the top bar.
+				continue;
 			}
 		}
 

src/Elastic.Documentation.Navigation/Assembler/SiteNavigation.cs

@@ -52,7 +52,7 @@ public SiteNavigation(
 		Phantoms = siteNavigationFile.Phantoms;
 		DeclaredPhantoms = [.. siteNavigationFile.Phantoms.Select(p => new Uri(p.Source))];
 		DeclaredTableOfContents = SiteNavigationFile.GetAllDeclaredSources(siteNavigationFile);
-		NavigationTitle = "Elastic Docs";
+		NavigationTitle = "Docs";
 
 		_nodes = [];
 		foreach (var setNavigation in documentationSetNavigations)
@@ -281,6 +281,8 @@ void IAssignableChildrenNavigation.SetNavigationItems(IReadOnlyCollection<INavig
 		root ??= node;
 
 		_ = UnseenNodes.Remove(tocRef.Source);
+		if (tocRef.NavigationTitle is not null && node is IAssignableNavigationTitle titled)
+			titled.NavigationTitleOverride = tocRef.NavigationTitle;
 		// Apply assembler-level island override (OR semantics — can enable, never disable)
 		if (tocRef.Island && node is IAssignableIslandNavigation islandNode)
 			islandNode.IsIsland = true;

src/Elastic.Documentation.Navigation/INavigationItem.cs

@@ -93,6 +93,15 @@ public interface IAssignableIslandNavigation
 	bool IsIsland { get; set; }
 }
 
+/// <summary>
+/// Optional assembler-side label. When set, replaces the index page title in navigation
+/// (sidebar, dropdowns, back-links) without changing the page H1.
+/// </summary>
+public interface IAssignableNavigationTitle
+{
+	string? NavigationTitleOverride { get; set; }
+}
+
 public interface IRootNavigationItem<out TIndex, out TChildNavigation> : INodeNavigationItem<TIndex, TChildNavigation>, IAssignableChildrenNavigation
 	where TIndex : INavigationModel
 	where TChildNavigation : INavigationItem

src/Elastic.Documentation.Navigation/Isolated/Node/DocumentationSetNavigation.cs

@@ -16,14 +16,9 @@
 
 namespace Elastic.Documentation.Navigation.Isolated.Node;
 
-public interface IDocumentationSetNavigation
+public interface IDocumentationSetNavigation : IAssignableNavigationTitle
 {
 	IReadOnlyDictionary<Uri, IRootNavigationItem<IDocumentationFile, INavigationItem>> TableOfContentNodes { get; }
-
-	/// <summary>
-	/// Optional override for the navigation title. When set, this is used instead of the index page's title.
-	/// </summary>
-	string? NavigationTitleOverride { get; set; }
 }
 
 [DebuggerDisplay("{Url}")]

src/Elastic.Documentation.Navigation/Isolated/Node/FolderNavigation.cs

@@ -12,7 +12,7 @@ public class FolderNavigation<TModel>(
 	string parentPath,
 	INodeNavigationItem<INavigationModel, INavigationItem>? parent,
 	INavigationHomeAccessor homeAccessor)
-	: INodeNavigationItem<TModel, INavigationItem>, IAssignableChildrenNavigation, IAssignableIslandNavigation
+	: INodeNavigationItem<TModel, INavigationItem>, IAssignableChildrenNavigation, IAssignableIslandNavigation, IAssignableNavigationTitle
 	where TModel : class, IDocumentationFile
 {
 	// Will be set by SetNavigationItems
@@ -23,7 +23,10 @@ public class FolderNavigation<TModel>(
 	public string Url => Index.Url;
 
 	/// <inheritdoc />
-	public string NavigationTitle => Index.NavigationTitle;
+	public string? NavigationTitleOverride { get; set; }
+
+	/// <inheritdoc />
+	public string NavigationTitle => NavigationTitleOverride ?? Index.NavigationTitle;
 
 	/// <inheritdoc />
 	public IRootNavigationItem<INavigationModel, INavigationItem> NavigationRoot => homeAccessor.HomeProvider.NavigationRoot;

src/Elastic.Documentation.Navigation/Isolated/Node/TableOfContentsNavigation.cs

@@ -13,6 +13,7 @@ public class TableOfContentsNavigation<TModel> : IRootNavigationItem<TModel, INa
 	, INavigationHomeAccessor
 	, INavigationHomeProvider
 	, IAssignableIslandNavigation
+	, IAssignableNavigationTitle
 	where TModel : class, IDocumentationFile
 {
 	public TableOfContentsNavigation(
@@ -58,7 +59,10 @@ INavigationHomeProvider homeProvider
 	public string Url => Index.Url;
 
 	/// <inheritdoc />
-	public string NavigationTitle => Index.NavigationTitle;
+	public string? NavigationTitleOverride { get; set; }
+
+	/// <inheritdoc />
+	public string NavigationTitle => NavigationTitleOverride ?? Index.NavigationTitle;
 
 	/// <summary>
 	/// TableOfContentsNavigation's NavigationRoot comes from its HomeProvider.

src/Elastic.Documentation.Site/Assets/assembler.css

@@ -8,7 +8,7 @@
 
 @media screen and (min-width: 768px) {
 	:root {
-		--offset-top: calc(var(--spacing) * 18);
+		--offset-top: 56px;
 	}
 }
 

src/Elastic.Documentation.Site/Assets/codex.css

@@ -7,16 +7,6 @@
 	--offset-top: calc(var(--header-height) + var(--sub-header-height));
 }
 
-#htmx-indicator {
-	top: var(--header-height);
-}
-
-body:has(.codex-root-landing) {
-	#htmx-indicator {
-		top: 0;
-	}
-}
-
 /* Codex header specific styles - only apply on lg screens (matches --breakpoint-lg) */
 @media screen and (min-width: 1280px) {
 	.has-isolated-header {