From ceeb1dcb8e526c3ad512abfec18912e047a60c9a Mon Sep 17 00:00:00 2001
From: Fabrizio Ferri Benedetti <fabri.ferribenedetti@elastic.co>
Date: Tue, 18 Aug 2026 13:15:23 +0200
Subject: [PATCH 1/5] Add mobile top nav tabs menu

The section-driven top nav needs a compact mobile presentation so configured tabs remain usable on narrow screens while preserving the existing desktop tab row.

Co-Authored-By: GPT-5.5 <noreply@openai.com>
---
 .../Assets/secondary-nav.css                  | 19 +++++++++
 .../Assets/styles.css                         |  1 +
 .../Layout/_SecondaryNav.cshtml               | 42 ++++++++++++++++++-
 .../Rendering/SecondaryNavRenderingTests.cs   | 29 +++++++++++--
 4 files changed, 86 insertions(+), 5 deletions(-)
 create mode 100644 src/Elastic.Documentation.Site/Assets/secondary-nav.css

diff --git a/src/Elastic.Documentation.Site/Assets/secondary-nav.css b/src/Elastic.Documentation.Site/Assets/secondary-nav.css
new file mode 100644
index 000000000..9552f9239
--- /dev/null
+++ b/src/Elastic.Documentation.Site/Assets/secondary-nav.css
@@ -0,0 +1,19 @@
+@layer components {
+	.secondary-nav-mobile-menu summary {
+		list-style: none;
+	}
+
+	.secondary-nav-mobile-menu summary::-webkit-details-marker {
+		display: none;
+	}
+
+	.secondary-nav-mobile-chevron {
+		flex-shrink: 0;
+		color: var(--color-grey-60);
+		transition: transform 0.15s ease;
+	}
+
+	.secondary-nav-mobile-menu[open] .secondary-nav-mobile-chevron {
+		transform: rotate(180deg);
+	}
+}
diff --git a/src/Elastic.Documentation.Site/Assets/styles.css b/src/Elastic.Documentation.Site/Assets/styles.css
index db3847d47..0b760a4ca 100644
--- a/src/Elastic.Documentation.Site/Assets/styles.css
+++ b/src/Elastic.Documentation.Site/Assets/styles.css
@@ -22,6 +22,7 @@
 @import './markdown/image-carousel.css';
 @import './markdown/hr.css';
 @import './modal.css';
+@import './secondary-nav.css';
 @import './secondary-nav-dropdown.css';
 @import './archive.css';
 @import './markdown/stepper.css';
diff --git a/src/Elastic.Documentation.Site/Layout/_SecondaryNav.cshtml b/src/Elastic.Documentation.Site/Layout/_SecondaryNav.cshtml
index 569dcb898..a9d685258 100644
--- a/src/Elastic.Documentation.Site/Layout/_SecondaryNav.cshtml
+++ b/src/Elastic.Documentation.Site/Layout/_SecondaryNav.cshtml
@@ -11,12 +11,50 @@
 	     class="bg-grey-10 border-b border-grey-20">
 		@if (topNav is not null)
 		{
+			var activeMobileLink = topNav.Items.OfType<TopNavLinkItem>().FirstOrDefault(item => item.IsActive(currentSectionId));
+			var mobileSummary = activeMobileLink?.Title ?? "Sections";
+
 			@* navigation-preview: scrollable section-driven top nav.
 			   secondary-nav-dropdown.css lets an open dropdown escape the overflow clipping. *@
+			<div class="w-full max-w-(--max-layout-width) mx-auto px-4 py-3 md:hidden">
+				<details class="secondary-nav-mobile-menu">
+					<summary class="flex w-full cursor-pointer select-none items-center justify-between rounded-md border border-grey-20 bg-white px-3 py-2 font-sans text-sm font-semibold text-ink">
+						<span>@mobileSummary</span>
+						<svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true"
+						     class="secondary-nav-mobile-chevron">
+							<path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+							      stroke-linejoin="round"/>
+						</svg>
+					</summary>
+					<div class="mt-2 rounded-md border border-grey-20 bg-white py-1 font-sans text-sm font-semibold shadow-sm">
+						@foreach (var link in topNav.Items.OfType<TopNavLinkItem>())
+						{
+							var isActive = link.IsActive(currentSectionId);
+							var mobileStateClass = isActive ? "text-blue-elastic" : "text-ink-light hover:text-blue-elastic active:text-blue-elastic-100";
+							@if (link.IsExternal)
+							{
+								<a href="@link.Url"
+								   target="_blank"
+								   rel="noopener noreferrer"
+								   class="block px-3 py-2 @mobileStateClass">
+									@link.Title
+									<span class="sr-only">(opens in a new tab)</span>
+								</a>
+							}
+							else
+							{
+								<a href="@link.Url"
+								   preload="mousedown"
+								   class="block px-3 py-2 @mobileStateClass">@link.Title</a>
+							}
+						}
+					</div>
+				</details>
+			</div>
 			<div class="
 						secondary-nav-scroll-container
-						w-full min-w-0 overflow-x-auto
-						max-w-(--max-layout-width) flex mx-auto justify-start items-center
+						hidden w-full min-w-0 overflow-x-auto md:flex
+						max-w-(--max-layout-width) mx-auto justify-start items-center
 						px-4 py-6">
 				<ul class="flex gap-6 font-sans font-semibold text-sm text-ink-light md:text-base">
 					@foreach (var item in topNav.Items)
diff --git a/tests/Navigation.Tests/Rendering/SecondaryNavRenderingTests.cs b/tests/Navigation.Tests/Rendering/SecondaryNavRenderingTests.cs
index b22485234..bbf166d8f 100644
--- a/tests/Navigation.Tests/Rendering/SecondaryNavRenderingTests.cs
+++ b/tests/Navigation.Tests/Rendering/SecondaryNavRenderingTests.cs
@@ -34,6 +34,12 @@ public class SecondaryNavRenderingTests(ITestOutputHelper output) : Documentatio
 		])
 	]);
 
+	private static readonly TopNavRenderModel LinkOnlyTopNav = new([
+		new TopNavLinkItem("Guides", "/docs/guides/", false),
+		new TopNavLinkItem("Reference", "/docs/reference/", false, SectionId: ReferenceSectionId),
+		new TopNavLinkItem("APIs", "https://www.elastic.co/docs/api/", true)
+	]);
+
 	[Fact]
 	public async Task WithoutConfigurationTheBuiltInLinksAreRendered()
 	{
@@ -59,13 +65,28 @@ public async Task ConfiguredLinksReplaceTheBuiltInOnes()
 		html.Should().Contain("id=\"htmx-indicator\"");
 	}
 
+	[Fact]
+	public async Task TopNavLinksRenderMobileMenu()
+	{
+		var html = await Render(LinkOnlyTopNav, currentUrl: "/docs/reference/some-page", root: new MockSectionRoot(ReferenceSectionId));
+
+		html.Should().Contain("secondary-nav-mobile-menu");
+		html.Should().Contain("<span>Reference</span>");
+		html.Should().Contain("href=\"/docs/guides/\"");
+		html.Should().Contain("href=\"/docs/reference/\"");
+		html.Should().Contain("href=\"https://www.elastic.co/docs/api/\"");
+		html.Should().Contain("target=\"_blank\"");
+		html.Should().Contain("(opens in a new tab)");
+	}
+
 	[Fact]
 	public async Task WithTopNavTheBarIsLeftAlignedAndCarriesNoBrandLink()
 	{
 		var html = await Render(TopNav, "/docs/");
 
 		html.Should().NotContain(">Docs<");
-		html.Should().Contain("justify-start").And.NotContain("justify-between");
+		html.Should().Contain("secondary-nav-scroll-container");
+		html.Should().Contain("justify-start");
 	}
 
 	[Fact]
@@ -107,12 +128,14 @@ public async Task TheItemCoveringTheCurrentPageIsMarkedActive()
 		// Active state is determined by NavigationRoot.Id matching the tab's SectionId.
 		var refRoot = new MockSectionRoot(ReferenceSectionId);
 		var reference = await Render(TopNav, currentUrl: "/docs/reference/some-page", root: refRoot);
-		var referenceListItem = reference.Split("<li").First(li => li.Contains("Reference"));
+		var desktopTabs = reference.Split("<ul").Last();
+		var referenceListItem = desktopTabs.Split("<li").First(li => li.Contains("Reference"));
 		referenceListItem.Should().Contain("text-blue-elastic").And.NotContain("hover:text-blue-elastic");
 
 		// Dropdown tabs have no tree backing — they are never marked active via section ID.
 		var product = await Render(TopNav, currentUrl: "/docs/products/elasticsearch/index");
-		var productListItem = product.Split("<li").First(li => li.Contains("Products"));
+		desktopTabs = product.Split("<ul").Last();
+		var productListItem = desktopTabs.Split("<li").First(li => li.Contains("Products"));
 		// "hover:text-blue-elastic" present means the inactive CSS variant is applied, not the active one.
 		productListItem.Should().Contain("hover:text-blue-elastic")
 			.And.NotContain("relative text-blue-elastic\"");

From 538209c5e0887664966741c4aa1c852d82a447a9 Mon Sep 17 00:00:00 2001
From: Fabrizio Ferri Benedetti <fabri.ferribenedetti@elastic.co>
Date: Tue, 18 Aug 2026 15:03:28 +0200
Subject: [PATCH 2/5] Use Docs Home for mobile top nav fallback

The mobile top-nav menu should describe the documentation landing page when no section tab is active instead of using a generic sections label.

Co-Authored-By: GPT-5.5 <noreply@openai.com>
---
 .../Layout/_SecondaryNav.cshtml                           | 2 +-
 .../Rendering/SecondaryNavRenderingTests.cs               | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/Elastic.Documentation.Site/Layout/_SecondaryNav.cshtml b/src/Elastic.Documentation.Site/Layout/_SecondaryNav.cshtml
index a9d685258..9d75120d2 100644
--- a/src/Elastic.Documentation.Site/Layout/_SecondaryNav.cshtml
+++ b/src/Elastic.Documentation.Site/Layout/_SecondaryNav.cshtml
@@ -12,7 +12,7 @@
 		@if (topNav is not null)
 		{
 			var activeMobileLink = topNav.Items.OfType<TopNavLinkItem>().FirstOrDefault(item => item.IsActive(currentSectionId));
-			var mobileSummary = activeMobileLink?.Title ?? "Sections";
+			var mobileSummary = activeMobileLink?.Title ?? "Docs Home";
 
 			@* navigation-preview: scrollable section-driven top nav.
 			   secondary-nav-dropdown.css lets an open dropdown escape the overflow clipping. *@
diff --git a/tests/Navigation.Tests/Rendering/SecondaryNavRenderingTests.cs b/tests/Navigation.Tests/Rendering/SecondaryNavRenderingTests.cs
index bbf166d8f..d3d21cfc1 100644
--- a/tests/Navigation.Tests/Rendering/SecondaryNavRenderingTests.cs
+++ b/tests/Navigation.Tests/Rendering/SecondaryNavRenderingTests.cs
@@ -79,6 +79,14 @@ public async Task TopNavLinksRenderMobileMenu()
 		html.Should().Contain("(opens in a new tab)");
 	}
 
+	[Fact]
+	public async Task TopNavMobileMenuUsesDocsHomeFallback()
+	{
+		var html = await Render(LinkOnlyTopNav, currentUrl: "/docs/");
+
+		html.Should().Contain("<span>Docs Home</span>");
+	}
+
 	[Fact]
 	public async Task WithTopNavTheBarIsLeftAlignedAndCarriesNoBrandLink()
 	{

From d3f60cfa2cec54e0de3ba2faadb6453870f5f36c Mon Sep 17 00:00:00 2001
From: Fabrizio Ferri Benedetti <fabri.ferribenedetti@elastic.co>
Date: Tue, 18 Aug 2026 15:57:18 +0200
Subject: [PATCH 3/5] Move mobile top nav into drawer

Keep the mobile section selector and version selector with the existing pages navigation drawer so small screens have a single navigation entry point.

Co-Authored-By: GPT-5.5 <noreply@openai.com>
---
 .../Layout/_PagesNav.cshtml                   | 62 +++++++++++++++++++
 .../Layout/_SecondaryNav.cshtml               | 40 +-----------
 src/Elastic.Documentation.Site/_ViewModels.cs |  8 +++
 .../Layout/_TableOfContents.cshtml            |  4 +-
 .../MarkdownLayoutViewModel.cs                |  6 --
 src/Elastic.Markdown/Page/Index.cshtml        |  1 +
 .../Rendering/SecondaryNavRenderingTests.cs   | 51 +++++++++++++--
 7 files changed, 120 insertions(+), 52 deletions(-)

diff --git a/src/Elastic.Documentation.Site/Layout/_PagesNav.cshtml b/src/Elastic.Documentation.Site/Layout/_PagesNav.cshtml
index 5034ce7d7..7420b55dc 100644
--- a/src/Elastic.Documentation.Site/Layout/_PagesNav.cshtml
+++ b/src/Elastic.Documentation.Site/Layout/_PagesNav.cshtml
@@ -1,8 +1,70 @@
+@using Elastic.Documentation.Configuration.Toc
+@using Microsoft.AspNetCore.Html
 @inherits RazorSlice<Elastic.Documentation.Site.GlobalLayoutViewModel>
+@{
+	var topNavLinks = Model.TopNav?.Items.OfType<TopNavLinkItem>().ToArray() ?? [];
+	var currentSectionId = Model.CurrentNavigationItem.NavigationRoot?.Id;
+	var activeMobileLink = topNavLinks.FirstOrDefault(item => item.IsActive(currentSectionId));
+	var mobileSummary = activeMobileLink?.Title ?? "Docs Home";
+	var hasMobileDrawerControls = topNavLinks.Length > 0 || Model.ShowVersionDropdown;
+}
 <aside class="sidebar font-sans bg-white fixed md:sticky shadow-2xl md:shadow-none left-full group-has-[#pages-nav-hamburger:checked]/body:left-0 bottom-0 md:left-auto top-[calc(var(--offset-top)+1px)] w-[80%] md:w-auto shrink-0 border-r border-r-grey-20 z-[10000] md:z-auto transition-[top,max-height] duration-300 md:col-start-1 md:row-start-1">
 	<nav
 		id="pages-nav"
 		class="sidebar-nav h-full simple-scrollbar">
+		@if (hasMobileDrawerControls)
+		{
+			<div class="md:hidden border-b border-grey-20 px-4 py-4">
+				@if (topNavLinks.Length > 0)
+				{
+					<div class="font-sans">
+						<div class="mb-2 text-xs font-bold uppercase tracking-wide text-grey-70">Section</div>
+						<details class="secondary-nav-mobile-menu">
+							<summary class="flex w-full cursor-pointer select-none items-center justify-between rounded-md border border-grey-20 bg-white px-3 py-2 text-sm font-semibold text-ink">
+								<span>@mobileSummary</span>
+								<svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true"
+								     class="secondary-nav-mobile-chevron">
+									<path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+									      stroke-linejoin="round"/>
+								</svg>
+							</summary>
+							<div class="mt-2 rounded-md border border-grey-20 bg-white py-1 text-sm font-semibold shadow-sm">
+								@foreach (var link in topNavLinks)
+								{
+									var isActive = link.IsActive(currentSectionId);
+									var mobileStateClass = isActive ? "text-blue-elastic" : "text-ink-light hover:text-blue-elastic active:text-blue-elastic-100";
+									@if (link.IsExternal)
+									{
+										<a href="@link.Url"
+										   target="_blank"
+										   rel="noopener noreferrer"
+										   class="block px-3 py-2 @mobileStateClass">
+											@link.Title
+											<span class="sr-only">(opens in a new tab)</span>
+										</a>
+									}
+									else
+									{
+										<a href="@link.Url"
+										   preload="mousedown"
+										   class="block px-3 py-2 @mobileStateClass">@link.Title</a>
+									}
+								}
+							</div>
+						</details>
+					</div>
+				}
+				@if (Model.ShowVersionDropdown)
+				{
+					<div class="mt-4 font-sans">
+						<div class="mb-2 text-xs font-bold uppercase tracking-wide text-grey-70">Version</div>
+						<version-dropdown all-versions-url="@Model.AllVersionsUrl" current-version='@(Model.CurrentVersion)' items='@(new HtmlString(Model.VersionDropdownSerializedModel))'>
+							<div class="h-8">@*height of dropdown button*@</div>
+						</version-dropdown>
+					</div>
+				}
+			</div>
+		}
 		@(new HtmlString(Model.NavigationHtml))
 	</nav>
 	@* ReSharper disable once Html.IdNotResolved *@
diff --git a/src/Elastic.Documentation.Site/Layout/_SecondaryNav.cshtml b/src/Elastic.Documentation.Site/Layout/_SecondaryNav.cshtml
index 9d75120d2..c65402c9d 100644
--- a/src/Elastic.Documentation.Site/Layout/_SecondaryNav.cshtml
+++ b/src/Elastic.Documentation.Site/Layout/_SecondaryNav.cshtml
@@ -11,46 +11,8 @@
 	     class="bg-grey-10 border-b border-grey-20">
 		@if (topNav is not null)
 		{
-			var activeMobileLink = topNav.Items.OfType<TopNavLinkItem>().FirstOrDefault(item => item.IsActive(currentSectionId));
-			var mobileSummary = activeMobileLink?.Title ?? "Docs Home";
-
-			@* navigation-preview: scrollable section-driven top nav.
+			@* navigation-preview: desktop section-driven top nav.
 			   secondary-nav-dropdown.css lets an open dropdown escape the overflow clipping. *@
-			<div class="w-full max-w-(--max-layout-width) mx-auto px-4 py-3 md:hidden">
-				<details class="secondary-nav-mobile-menu">
-					<summary class="flex w-full cursor-pointer select-none items-center justify-between rounded-md border border-grey-20 bg-white px-3 py-2 font-sans text-sm font-semibold text-ink">
-						<span>@mobileSummary</span>
-						<svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true"
-						     class="secondary-nav-mobile-chevron">
-							<path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-							      stroke-linejoin="round"/>
-						</svg>
-					</summary>
-					<div class="mt-2 rounded-md border border-grey-20 bg-white py-1 font-sans text-sm font-semibold shadow-sm">
-						@foreach (var link in topNav.Items.OfType<TopNavLinkItem>())
-						{
-							var isActive = link.IsActive(currentSectionId);
-							var mobileStateClass = isActive ? "text-blue-elastic" : "text-ink-light hover:text-blue-elastic active:text-blue-elastic-100";
-							@if (link.IsExternal)
-							{
-								<a href="@link.Url"
-								   target="_blank"
-								   rel="noopener noreferrer"
-								   class="block px-3 py-2 @mobileStateClass">
-									@link.Title
-									<span class="sr-only">(opens in a new tab)</span>
-								</a>
-							}
-							else
-							{
-								<a href="@link.Url"
-								   preload="mousedown"
-								   class="block px-3 py-2 @mobileStateClass">@link.Title</a>
-							}
-						}
-					</div>
-				</details>
-			</div>
 			<div class="
 						secondary-nav-scroll-container
 						hidden w-full min-w-0 overflow-x-auto md:flex
diff --git a/src/Elastic.Documentation.Site/_ViewModels.cs b/src/Elastic.Documentation.Site/_ViewModels.cs
index 4789119c8..6db3f894c 100644
--- a/src/Elastic.Documentation.Site/_ViewModels.cs
+++ b/src/Elastic.Documentation.Site/_ViewModels.cs
@@ -72,6 +72,14 @@ public TopNavRenderModel? TopNav
 		}
 	}
 
+	public string? VersionDropdownSerializedModel { get; init; }
+
+	public string? CurrentVersion { get; init; }
+
+	public string? AllVersionsUrl { get; init; }
+
+	public bool ShowVersionDropdown { get; init; }
+
 	/// <summary>
 	/// When the current page is a hidden nav item (e.g. an individual detection rule page),
 	/// the URL of its nearest visible ancestor. The client uses this to highlight the correct
diff --git a/src/Elastic.Markdown/Layout/_TableOfContents.cshtml b/src/Elastic.Markdown/Layout/_TableOfContents.cshtml
index 250a8733d..8a958a1af 100644
--- a/src/Elastic.Markdown/Layout/_TableOfContents.cshtml
+++ b/src/Elastic.Markdown/Layout/_TableOfContents.cshtml
@@ -4,9 +4,9 @@
 @inherits RazorSlice<Elastic.Markdown.MarkdownLayoutViewModel>
 <aside class="sidebar md:block w-full lg:max-w-65 order-1 lg:order-2">
 	<nav id="toc-nav" class="sidebar-nav lg:h-full flex flex-row-reverse lg:block items-center justify-between md:justify-start gap-4 simple-scrollbar">
-		@if (Model.Features.PrimaryNavEnabled && !Model.VersioningSystem.IsVersionless && Model.BuildType != BuildType.Codex && Model.Branding is null)
+		@if (Model.ShowVersionDropdown)
 		{
-			<div class="mt-4">
+			<div class="mt-4 hidden md:block">
 				<version-dropdown all-versions-url="@Model.AllVersionsUrl" current-version='@(Model.CurrentVersion)' items='@(new HtmlString(Model.VersionDropdownSerializedModel))'>
 					<div class="h-8">@*height of dropdown button*@</div>
 				</version-dropdown>
diff --git a/src/Elastic.Markdown/MarkdownLayoutViewModel.cs b/src/Elastic.Markdown/MarkdownLayoutViewModel.cs
index b89a74d23..5cc5f48da 100644
--- a/src/Elastic.Markdown/MarkdownLayoutViewModel.cs
+++ b/src/Elastic.Markdown/MarkdownLayoutViewModel.cs
@@ -26,12 +26,6 @@ public record MarkdownLayoutViewModel : GlobalLayoutViewModel
 
 	public required VersioningSystem VersioningSystem { get; init; }
 
-	public required string? VersionDropdownSerializedModel { get; init; }
-
-	public required string? CurrentVersion { get; init; }
-
-	public required string? AllVersionsUrl { get; init; }
-
 	public string? RedirectUrl { get; init; }
 
 	/// <summary>The resolved right-gutter CTA for this page (docset.yml template, or the built-in default).</summary>
diff --git a/src/Elastic.Markdown/Page/Index.cshtml b/src/Elastic.Markdown/Page/Index.cshtml
index d7040b304..1482d20ff 100644
--- a/src/Elastic.Markdown/Page/Index.cshtml
+++ b/src/Elastic.Markdown/Page/Index.cshtml
@@ -46,6 +46,7 @@
 		VersioningSystem = Model.VersioningSystem,
 		VersionDropdownSerializedModel = JsonSerializer.Serialize(Model.VersionDropdownItems,
 			ViewModelSerializerContext.Default.VersionDropDownItemViewModelArray),
+		ShowVersionDropdown = Model.Features.PrimaryNavEnabled && !Model.VersioningSystem.IsVersionless && Model.BuildType != BuildType.Codex && Model.Branding is null,
 		// Header properties for isolated mode
 		HeaderTitle = Model.DocSetName,
 		HeaderVersion = null,
diff --git a/tests/Navigation.Tests/Rendering/SecondaryNavRenderingTests.cs b/tests/Navigation.Tests/Rendering/SecondaryNavRenderingTests.cs
index d3d21cfc1..109c9240f 100644
--- a/tests/Navigation.Tests/Rendering/SecondaryNavRenderingTests.cs
+++ b/tests/Navigation.Tests/Rendering/SecondaryNavRenderingTests.cs
@@ -66,11 +66,12 @@ public async Task ConfiguredLinksReplaceTheBuiltInOnes()
 	}
 
 	[Fact]
-	public async Task TopNavLinksRenderMobileMenu()
+	public async Task TopNavLinksRenderInMobileDrawer()
 	{
-		var html = await Render(LinkOnlyTopNav, currentUrl: "/docs/reference/some-page", root: new MockSectionRoot(ReferenceSectionId));
+		var html = await RenderPagesNav(LinkOnlyTopNav, currentUrl: "/docs/reference/some-page", root: new MockSectionRoot(ReferenceSectionId));
 
 		html.Should().Contain("secondary-nav-mobile-menu");
+		html.Should().Contain(">Section<");
 		html.Should().Contain("<span>Reference</span>");
 		html.Should().Contain("href=\"/docs/guides/\"");
 		html.Should().Contain("href=\"/docs/reference/\"");
@@ -80,13 +81,25 @@ public async Task TopNavLinksRenderMobileMenu()
 	}
 
 	[Fact]
-	public async Task TopNavMobileMenuUsesDocsHomeFallback()
+	public async Task TopNavMobileDrawerUsesDocsHomeFallback()
 	{
-		var html = await Render(LinkOnlyTopNav, currentUrl: "/docs/");
+		var html = await RenderPagesNav(LinkOnlyTopNav, currentUrl: "/docs/");
 
 		html.Should().Contain("<span>Docs Home</span>");
 	}
 
+	[Fact]
+	public async Task MobileDrawerRendersVersionDropdown()
+	{
+		var html = await RenderPagesNav(topNav: null, currentUrl: "/docs/", showVersionDropdown: true);
+
+		html.Should().Contain(">Version<");
+		html.Should().Contain("<version-dropdown");
+		html.Should().Contain("all-versions-url=\"/docs/versions/\"");
+		html.Should().Contain("8.19");
+		html.Should().Contain("items='[]'");
+	}
+
 	[Fact]
 	public async Task WithTopNavTheBarIsLeftAlignedAndCarriesNoBrandLink()
 	{
@@ -162,6 +175,34 @@ private async Task<string> Render(
 		TopNavRenderModel? topNav,
 		string currentUrl,
 		IRootNavigationItem<INavigationModel, INavigationItem>? root = null)
+	{
+		var model = CreateModel(topNav, currentUrl, root);
+
+		return await _SecondaryNav.Create(model).RenderAsync(cancellationToken: TestContext.Current.CancellationToken);
+	}
+
+	private async Task<string> RenderPagesNav(
+		TopNavRenderModel? topNav,
+		string currentUrl,
+		IRootNavigationItem<INavigationModel, INavigationItem>? root = null,
+		bool showVersionDropdown = false)
+	{
+		var model = CreateModel(topNav, currentUrl, root) with
+		{
+			NavigationHtml = "<ul id=\"nav-tree-test\"></ul>",
+			ShowVersionDropdown = showVersionDropdown,
+			AllVersionsUrl = "/docs/versions/",
+			CurrentVersion = "8.19",
+			VersionDropdownSerializedModel = "[]"
+		};
+
+		return await _PagesNav.Create(model).RenderAsync(cancellationToken: TestContext.Current.CancellationToken);
+	}
+
+	private GlobalLayoutViewModel CreateModel(
+		TopNavRenderModel? topNav,
+		string currentUrl,
+		IRootNavigationItem<INavigationModel, INavigationItem>? root = null)
 	{
 		var fileSystem = new MockFileSystem();
 		fileSystem.AddDirectory("/docs");
@@ -190,7 +231,7 @@ private async Task<string> Render(
 			StaticFileContentHashProvider = new StaticFileContentHashProvider(new EmbeddedOrPhysicalFileProvider(context)),
 		};
 
-		return await _SecondaryNav.Create(model).RenderAsync(cancellationToken: TestContext.Current.CancellationToken);
+		return model;
 	}
 
 	/// <summary>The secondary nav only reads <see cref="INavigationItem.Url"/> off the current page.</summary>

From e0fb81b52db05cf9cc27db892c3e5f90467ce1f8 Mon Sep 17 00:00:00 2001
From: Fabrizio Ferri Benedetti <fabri.ferribenedetti@elastic.co>
Date: Tue, 18 Aug 2026 17:03:13 +0200
Subject: [PATCH 4/5] Move mobile hamburger back left

Restore the mobile TOC trigger alignment now that version controls live inside the drawer.

Co-Authored-By: GPT-5.5 <noreply@openai.com>
---
 src/Elastic.Markdown/Layout/_TableOfContents.cshtml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Elastic.Markdown/Layout/_TableOfContents.cshtml b/src/Elastic.Markdown/Layout/_TableOfContents.cshtml
index 8a958a1af..5f0386bac 100644
--- a/src/Elastic.Markdown/Layout/_TableOfContents.cshtml
+++ b/src/Elastic.Markdown/Layout/_TableOfContents.cshtml
@@ -3,7 +3,7 @@
 @using Microsoft.AspNetCore.Html
 @inherits RazorSlice<Elastic.Markdown.MarkdownLayoutViewModel>
 <aside class="sidebar md:block w-full lg:max-w-65 order-1 lg:order-2">
-	<nav id="toc-nav" class="sidebar-nav lg:h-full flex flex-row-reverse lg:block items-center justify-between md:justify-start gap-4 simple-scrollbar">
+	<nav id="toc-nav" class="sidebar-nav lg:h-full flex lg:block items-center justify-start md:justify-start gap-4 simple-scrollbar">
 		@if (Model.ShowVersionDropdown)
 		{
 			<div class="mt-4 hidden md:block">

From a26d68c9af1a5a9a147a3bd26b4712e5e9865c7f Mon Sep 17 00:00:00 2001
From: Fabrizio Ferri Benedetti <fabri.ferribenedetti@elastic.co>
Date: Tue, 18 Aug 2026 17:37:48 +0200
Subject: [PATCH 5/5] Show mobile drawer on landing page

Render the mobile-only pages drawer trigger on the docs landing page so section and version controls remain reachable there.

Co-Authored-By: GPT-5.5 <noreply@openai.com>
---
 src/Elastic.Markdown/_Layout.cshtml | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/Elastic.Markdown/_Layout.cshtml b/src/Elastic.Markdown/_Layout.cshtml
index 679e71e91..1230e4176 100644
--- a/src/Elastic.Markdown/_Layout.cshtml
+++ b/src/Elastic.Markdown/_Layout.cshtml
@@ -87,6 +87,28 @@
 			</div>
 		</div>
 	}
+
+	private async Task RenderLanding()
+	{
+		<div class="relative">
+			<input type="checkbox" class="hidden" id="pages-nav-hamburger">
+			@if (!string.IsNullOrWhiteSpace(Model.NavigationHtml) || Model.TopNav is not null || Model.ShowVersionDropdown)
+			{
+				@* ReSharper disable once Html.IdNotResolved *@
+				<label role="button" class="absolute left-4 top-3 z-10 md:hidden cursor-pointer" for="pages-nav-hamburger">
+					<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+					     stroke="currentColor" class="size-6">
+						<path stroke-linecap="round" stroke-linejoin="round"
+						      d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12"/>
+					</svg>
+				</label>
+			}
+			@await RenderPartialAsync(_LandingPage.Create(Model))
+			<div class="md:hidden">
+				@await RenderPartialAsync(_PagesNav.Create(Model))
+			</div>
+		</div>
+	}
 }
 
 @if (RenderHeaderAndFooter)
@@ -108,7 +130,7 @@
 		await RenderPartialAsync(_NotFound.Create(Model));
 		break;
 	case MarkdownPageLayout.LandingPage:
-		await RenderPartialAsync(_LandingPage.Create(Model));
+		await RenderLanding();
 		break;
 	case MarkdownPageLayout.Archive:
 		await RenderPartialAsync(_Archive.Create(Model));