blume 2.0.1 → 2.0.3

package/src/components/layout/NavTabMenu.astro

@@ -0,0 +1,133 @@
+---
+// A header tab with dropdown `items` (`navigation.tabs[].items`). In the
+// header's tab bar (`variant="bar"`) it is the nav selectors' floating
+// `<details>` dropdown: the `<summary>` is the disclosure button (the browser
+// exposes its expanded state), the panel a list of links, and the shared
+// light-dismiss closes it on an outside press, Escape (focus returns to the
+// tab), or focus leaving it. In a navigation drawer (`variant="drawer"`) the
+// same items expand in place under the tab, like a sidebar group, open from
+// the start on the tab's own section. Both are server-rendered and the scripts
+// delegate from `document`, so client-router swaps need no re-init.
+import type { NavTab } from "../../core/types.ts";
+import Icon from "../Icon.astro";
+import { withMountedBase } from "../islands/base-path.ts";
+
+interface Props {
+  tab: NavTab;
+  /** The page's route, to mark the item it is on. */
+  route: string;
+  /** Whether the current route falls under this tab. */
+  active: boolean;
+  variant: "bar" | "drawer";
+}
+
+const { tab, route, active, variant } = Astro.props;
+const items = tab.items ?? [];
+// The tab itself is a button, not a page, so its "you are here" state is
+// `aria-current="true"` (current item of a set); an item is the page.
+const tabCurrent = active ? "true" : undefined;
+const itemCurrent = (path: string): "page" | undefined =>
+  path === route ? "page" : undefined;
+
+const barRowClass =
+  "flex w-full items-start gap-2.5 rounded-md px-2 py-1.5 text-start text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground aria-[current=page]:text-foreground";
+const drawerRowClass =
+  "flex items-center gap-2 rounded-[0.65rem] px-2.5 py-1.5 text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground aria-[current=page]:bg-muted aria-[current=page]:text-foreground";
+---
+
+{
+  variant === "bar" ? (
+    <details class="group relative" data-blume-dropdown>
+      <summary
+        aria-current={tabCurrent}
+        class="inline-flex cursor-pointer list-none items-center gap-1 rounded-full px-3 py-1.5 font-medium text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground aria-[current=true]:text-foreground [&::-webkit-details-marker]:hidden"
+      >
+        {tab.icon && (
+          <Icon class="me-0.5 shrink-0" name={tab.icon} size={14} />
+        )}
+        {tab.label}
+        <Icon
+          class="transition-transform group-open:rotate-180"
+          name="chevron-down"
+          size={14}
+        />
+      </summary>
+      <div
+        class="absolute start-0 z-50 mt-2 min-w-56 max-w-[calc(100vw-1rem)] rounded-blume border border-border bg-background p-1 shadow-xl"
+        data-blume-dropdown-panel
+      >
+        {items.map((item) => (
+          <a
+            aria-current={itemCurrent(item.path)}
+            class={barRowClass}
+            href={withMountedBase(item.path)}
+          >
+            {item.icon && <Icon class="mt-0.5" name={item.icon} size={16} />}
+            <span class="flex-1">
+              <span class="flex items-center gap-2">
+                {item.label}
+                {item.tag && (
+                  <span class="rounded-full bg-muted px-1.5 py-0.5 text-[0.65rem] text-muted-foreground">
+                    {item.tag}
+                  </span>
+                )}
+              </span>
+              {item.description && (
+                <span class="mt-0.5 block text-muted-foreground text-xs">
+                  {item.description}
+                </span>
+              )}
+            </span>
+          </a>
+        ))}
+      </div>
+    </details>
+  ) : (
+    <details class="group" open={active}>
+      <summary
+        aria-current={tabCurrent}
+        class="flex cursor-pointer list-none items-center gap-2 rounded-[0.65rem] px-2.5 py-1.5 font-medium text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground aria-[current=true]:text-foreground [&::-webkit-details-marker]:hidden"
+      >
+        {tab.icon && <Icon class="shrink-0" name={tab.icon} size={14} />}
+        <span class="flex-1 truncate">{tab.label}</span>
+        <Icon
+          class="shrink-0 transition-transform group-open:rotate-180"
+          name="chevron-down"
+          size={14}
+        />
+      </summary>
+      <ul class="m-0 ms-2.5 list-none space-y-px border-border border-s p-0 ps-2">
+        {items.map((item) => (
+          <li>
+            <a
+              aria-current={itemCurrent(item.path)}
+              class={drawerRowClass}
+              href={withMountedBase(item.path)}
+            >
+              {item.icon && (
+                <Icon class="shrink-0" name={item.icon} size={14} />
+              )}
+              <span class="flex-1 truncate">{item.label}</span>
+              {item.tag && (
+                <span class="shrink-0 rounded-full bg-muted px-1.5 py-0.5 text-[0.65rem] text-muted-foreground">
+                  {item.tag}
+                </span>
+              )}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </details>
+  )
+}
+
+<script>
+  import { installDropdownDismiss } from "../dropdown-dismiss.ts";
+  import { installDropdownClamp } from "./dropdown-clamp.ts";
+
+  // Outside-click / Escape / focus-out dismissal and viewport clamping for
+  // the header dropdown, shared with the nav selectors. The drawer variant
+  // opts into neither: it is an in-place disclosure, not a floating panel.
+  installDropdownDismiss();
+  installDropdownClamp();
+</script>

package/src/components/layout/NavTree.astro

@@ -4,7 +4,7 @@ import type { UIStrings } from "../../core/i18n-ui.ts";
 import type { NavNode } from "../../core/types.ts";
 import { methodColor } from "../colors.ts";
 import Icon from "../Icon.astro";
-import { withBase } from "../islands/base-path.ts";
+import { withBase, withMountedBase } from "../islands/base-path.ts";
 import Self from "./NavTree.astro";
 import NavTreeCache from "./NavTreeCache.astro";
 import NavTreeScript from "./NavTreeScript.astro";
@@ -79,6 +79,19 @@ const fragmentFor = (node: NavNode, id: string): string | undefined =>
 // blank — the PageActions pattern.
 const n = { ...EN_UI.nav, ...strings };
 
+/** The DOM id of a drill-in panel, which its drill button controls. */
+const navPanelId = (id: string): string => `blume-nav-panel-${id}`;
+
+/**
+ * A page row's href. A row backed by a page links a route Blume generates, so
+ * the deployment base always goes on — even over a route that starts with the
+ * base's own name. A config `href` link (no backing page) is authored, and
+ * keeps a base written by hand. Group rows link their index page the same way
+ * a backed page row does.
+ */
+const pageHref = (item: Extract<NavNode, { kind: "page" }>): string =>
+  item.pageId ? withMountedBase(item.route) : withBase(item.route);
+
 const badgeBase =
   "shrink-0 rounded-full px-1.5 py-0.5 font-medium text-[0.65rem] leading-none";
 // HTTP-method, AsyncAPI-action, and GraphQL operation-kind badges (from a
@@ -165,6 +178,7 @@ const initialId =
             data-nav-panel={panel.id}
             data-nav-src={src}
             hidden={panel.id !== initialId}
+            id={navPanelId(panel.id)}
           >
             {/* The title is the only sidebar link to the section's own page, so
                 a routed panel keeps it as a link; without a route the whole row
@@ -174,7 +188,7 @@ const initialId =
               <div class="mb-3 flex items-center gap-0.5">
                 <button
                   aria-label={n.back}
-                  class="-ml-1 flex shrink-0 items-center justify-center self-stretch rounded-[0.65rem] px-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+                  class="-ms-1 flex shrink-0 items-center justify-center self-stretch rounded-[0.65rem] px-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
                   data-nav-back={panel.parentId}
                   type="button"
                 >
@@ -187,7 +201,7 @@ const initialId =
                       : undefined
                   }
                   class="flex-1 truncate rounded-[0.65rem] px-1 py-1 font-semibold text-foreground text-sm transition-colors hover:bg-muted"
-                  href={withBase(panel.route)}
+                  href={withMountedBase(panel.route)}
                 >
                   {panel.label}
                 </a>
@@ -195,7 +209,7 @@ const initialId =
             ) : (
               <button
                 aria-label={`${n.back}: ${panel.label}`}
-                class="-ml-1 mb-3 flex w-full items-center gap-1.5 rounded-[0.65rem] p-1 text-left font-semibold text-foreground text-sm transition-colors hover:bg-muted"
+                class="-ms-1 mb-3 flex w-full items-center gap-1.5 rounded-[0.65rem] p-1 text-start font-semibold text-foreground text-sm transition-colors hover:bg-muted"
                 data-nav-back={panel.parentId}
                 type="button"
               >
@@ -253,7 +267,7 @@ const initialId =
                 <a
                   aria-current={current}
                   class="blume-nav-link truncate"
-                  href={withBase(item.route)}
+                  href={pageHref(item)}
                 >
                   {item.label}
                 </a>
@@ -265,7 +279,7 @@ const initialId =
               <a
                 aria-current={current}
                 class="blume-nav-link"
-                href={withBase(item.route)}
+                href={pageHref(item)}
               >
                 <span class="flex items-center gap-2">
                   {item.icon && (
@@ -293,11 +307,16 @@ const initialId =
         const spacing =
           index === 0 ? "mt-0" : display === "flat" ? "mt-6" : "mt-0.5";
 
-        // `page`: a single row that drills into this group's panel.
+        // `page`: a single row that drills into this group's panel. It
+        // controls that panel; NavTreeScript keeps `aria-expanded` in step
+        // with the panel shown (static markup, since cached subtrees and
+        // fragments can't carry per-page state).
         if (display === "page") {
           return (
             <li class={spacing}>
               <button
+                aria-controls={navPanelId(id)}
+                aria-expanded="false"
                 class="blume-nav-drill"
                 data-nav-to={id}
                 type="button"
@@ -339,7 +358,7 @@ const initialId =
                           : undefined
                       }
                       class="blume-nav-summary-link"
-                      href={withBase(item.route)}
+                      href={withMountedBase(item.route)}
                     >
                       {item.icon && (
                         <Icon
@@ -377,7 +396,7 @@ const initialId =
                   </span>
                 </summary>
                 <div
-                  class="space-y-0.5 border-border border-l pl-3"
+                  class="space-y-0.5 border-border border-s ps-3"
                   data-nav-src={open ? undefined : fragmentFor(item, id)}
                 >
                   {/* A closed group's children are deferred (fetched into this
@@ -423,7 +442,7 @@ const initialId =
                     isGroupRowCurrent(item, currentRoute) ? "page" : undefined
                   }
                   class="blume-nav-heading-link"
-                  href={withBase(item.route)}
+                  href={withMountedBase(item.route)}
                 >
                   {item.icon && (
                     <Icon
@@ -434,7 +453,7 @@ const initialId =
                   )}
                   <span class="truncate">{item.label}</span>
                   {item.badge && (
-                    <span class={`ml-auto ${badgeClassFor(item.badge)}`}>{item.badge}</span>
+                    <span class={`ms-auto ${badgeClassFor(item.badge)}`}>{item.badge}</span>
                   )}
                 </a>
               ) : (
@@ -448,7 +467,7 @@ const initialId =
                   )}
                   <span class="truncate">{item.label}</span>
                   {item.badge && (
-                    <span class={`ml-auto ${badgeClassFor(item.badge)}`}>{item.badge}</span>
+                    <span class={`ms-auto ${badgeClassFor(item.badge)}`}>{item.badge}</span>
                   )}
                 </>
               )}

package/src/components/layout/NavTreeCache.astro

@@ -4,7 +4,10 @@
 // once per group instead of once per page. Off in dev, where component edits
 // must show on the next request. The cached HTML references the page's icon
 // sprite (see icon-sprite.ts), so the symbols it used ride along and are
-// registered into whichever page reuses it.
+// registered into whichever page reuses it. A render with no sprite (the
+// `/blume-nav/` fragment route) inlines its icons instead, so it is cached
+// apart: sprite references reused there would point at symbols the page that
+// fetches the fragment may never have rendered.
 import type { NavNode } from "../../core/types.ts";
 import { iconSpriteFor, referencedIconSymbols } from "../icon-sprite.ts";
 import type { IconSymbol } from "../icon-sprite.ts";
@@ -19,7 +22,7 @@ const { node, variant } = Astro.props;
 const sprite = iconSpriteFor(Astro.locals);
 const { html, icons } = await cachedNavSubtree(
   node,
-  variant,
+  `${variant}|${sprite ? "sprite" : "inline"}`,
   async () => {
     const rendered = await Astro.slots.render("default");
     const used: [string, IconSymbol][] = [];

package/src/components/layout/NavTreeScript.astro

@@ -40,7 +40,12 @@
     return pending;
   };
 
-  /** Fill a deferred element from its fragment; a no-op once filled. */
+  /**
+   * Fill a deferred element from its fragment; a no-op once filled. The rows
+   * are appended, not swapped in: a drill-in panel keeps its own back row
+   * (the Back button and the section's title) above the deferred rows, and a
+   * collapsed group's slot is empty anyway.
+   */
   const fillDeferred = async (slot: HTMLElement): Promise<void> => {
     const src = slot.dataset.navSrc;
     if (!src) {
@@ -48,8 +53,12 @@
     }
     slot.setAttribute("aria-busy", "true");
     try {
-      slot.innerHTML = await loadFragment(src);
-      delete slot.dataset.navSrc;
+      const html = await loadFragment(src);
+      // Two opens racing on the same fetch fill it once.
+      if (slot.dataset.navSrc) {
+        slot.insertAdjacentHTML("beforeend", html);
+        delete slot.dataset.navSrc;
+      }
     } finally {
       slot.removeAttribute("aria-busy");
     }
@@ -179,21 +188,52 @@
       if (prev === next) {
         return;
       }
+      // The pressed drill or back button sits in the panel about to hide, so
+      // its focus has to move into the panel replacing it — left behind, the
+      // next Tab would leave the sidebar.
+      const hadFocus = prev?.contains(document.activeElement) ?? false;
       // Settle any in-flight slide before starting the next one.
       if (this.finishSlide) {
         this.finishSlide();
       }
       this.active = next;
       this.dataset.active = next.dataset.navPanel;
+      this.syncExpanded(next);
 
       if (!(animate && prev) || this.reduced()) {
         for (const panel of this.querySelectorAll<HTMLElement>("[data-nav-panel]")) {
           panel.hidden = panel !== next;
         }
-        return;
+      } else {
+        this.slide(prev, next, this.depth(next) > this.depth(prev));
       }
+      if (hadFocus && prev) {
+        this.focusInto(next, prev);
+      }
+    }
+
+    /** Each drill button is expanded exactly while the panel it opens shows. */
+    syncExpanded(shown: HTMLElement): void {
+      for (const drill of this.querySelectorAll("[data-nav-to]")) {
+        drill.setAttribute(
+          "aria-expanded",
+          String(drill.getAttribute("data-nav-to") === shown.dataset.navPanel)
+        );
+      }
+    }
 
-      this.slide(prev, next, this.depth(next) > this.depth(prev));
+    /**
+     * Focus `next` after leaving `prev`: going back, the drill button that
+     * opened `prev`; drilling in, the new panel's back button (its first
+     * control). `preventScroll` keeps the focus from scrolling the clipped
+     * container mid-slide.
+     */
+    focusInto(next: HTMLElement, prev: HTMLElement): void {
+      const target =
+        next.querySelector<HTMLElement>(
+          `[data-nav-to="${prev.dataset.navPanel}"]`
+        ) ?? next.querySelector<HTMLElement>("button, a[href]");
+      target?.focus({ preventScroll: true });
     }
 
     slide(out: HTMLElement, into: HTMLElement, forward: boolean): void {

package/src/components/layout/PageActions.astro

@@ -262,7 +262,7 @@ const menuRowClass =
 <script>
   import { copyDeferredText, copyText, flashLabel } from "../copy-feedback.ts";
   import { installDropdownDismiss } from "../dropdown-dismiss.ts";
-  import { prefixBase } from "../islands/base-path.ts";
+  import { mountBase } from "../islands/base-path.ts";
   import { rafThrottle } from "../raf-throttle.ts";
 
   const CHAT_URLS: Record<string, (q: string) => string> = {
@@ -390,9 +390,10 @@ hr { border: 0; border-top: 1px solid #ddd; margin: 2em 0; }`;
 
     // `data-md` is the base-less logical route; the raw-markdown endpoint is a
     // generated page route, so it's served under the deployment base like any
-    // other page. Prefix at emit time (the Search-island pattern).
+    // other page, even when it starts with the base's own name. Mount it at
+    // emit time (the Search-island pattern).
     const mdRoute = root.getAttribute("data-md") ?? "";
-    const md = prefixBase(import.meta.env.BASE_URL, mdRoute);
+    const md = mountBase(import.meta.env.BASE_URL, mdRoute);
     const copiedLabel = root.getAttribute("data-i18n-copied") || "Copied!";
     const copyFailedLabel =
       root.getAttribute("data-i18n-copy-failed") || "Copy failed";

package/src/components/layout/PageLayout.astro

@@ -38,7 +38,8 @@ import {
 } from "../../og/dimensions.ts";
 import { buildStructuredData } from "../../seo/jsonld.ts";
 import { normalizeXHandle } from "../../seo/x-handle.ts";
-import { stripBase, withBase } from "../islands/base-path.ts";
+import Icon from "../Icon.astro";
+import { stripBase, withBase, withMountedBase } from "../islands/base-path.ts";
 import { pageDirection, pageLocale } from "./page-locale.ts";
 import { searchLocaleFor } from "./search-locale.ts";
 import "blume:theme";
@@ -55,6 +56,7 @@ import {
 } from "./head-scripts.ts";
 import Header from "./Header.astro";
 import { currentTabForRoute } from "./nav-utils.ts";
+import NavTabMenu from "./NavTabMenu.astro";
 import WebMcp from "./WebMcp.astro";
 
 interface Props {
@@ -217,7 +219,7 @@ const activeTab = currentTabForRoute(navigation.tabs, route, navigation.root);
 // llms.txt index), and the homepage HTTP `Link` header already advertises it,
 // so the head is its HTML counterpart on hosts that can't set that header.
 // Advertising a mirror for any other custom route would 404.
-const markdownMirror = route === "/" ? withBase("/index.md") : null;
+const markdownMirror = route === "/" ? withMountedBase("/index.md") : null;
 
 // Derive canonical + og:image from the site URL the same way the catch-all does
 // for content pages, so a custom page gets both for free. The matching OG card
@@ -228,8 +230,9 @@ const markdownMirror = route === "/" ? withBase("/index.md") : null;
 const ogSlug = route === "/" ? "index" : route.slice(1);
 const ogCardGenerated = !Astro.routePattern.includes("[");
 // Absolute URLs carry the deployment base too (`site + base + route`), since the
-// page is served under it. `withBase` handles a root base as a no-op.
-const basedRoute = withBase(route);
+// page is served under it — even when the route starts with the base's own
+// name. `withMountedBase` handles a root base as a no-op.
+const basedRoute = withMountedBase(route);
 // The schema accepts a trailing-slash site URL (`https://docs.example.com/`);
 // strip it before joining with the root-relative route so canonical/og URLs
 // don't come out double-slashed — the catch-all strips it the same way.
@@ -251,7 +254,7 @@ const absolutizeOgImage = (value: string): string =>
 const resolvedOgImage = ogImage
   ? absolutizeOgImage(ogImage)
   : ogEnabled && ogCardGenerated && siteBase
-    ? `${siteBase}${encodeURI(withBase(`/og/${ogSlug}.png`))}`
+    ? `${siteBase}${encodeURI(withMountedBase(`/og/${ogSlug}.png`))}`
     : null;
 // Only the generated card has a known size and format, so its dimensions are
 // declared for crawlers; a user-supplied `ogImage` could be any image.
@@ -387,7 +390,7 @@ createIconSprite(Astro.locals);
     >
     {/* Every new-tab link's aria-describedby target (see core/new-tab.ts). */}
     <span hidden id={NEW_TAB_HINT_ID}>{navStrings.opensInNewTab}</span>
-    <Banner banner={banner} strings={strings.banner} />
+    <Banner banner={banner} locale={locale} strings={strings.banner} />
     <Header
       assistantEnabled={assistantEnabled}
       assistantStrings={strings.assistant}
@@ -426,13 +429,25 @@ createIconSprite(Astro.locals);
               <ul class="m-0 list-none p-0">
                 {navigation.tabs.map((tab) => (
                   <li>
-                    <a
-                      aria-current={tab === activeTab ? "page" : undefined}
-                      class="block rounded-[0.65rem] px-2.5 py-1.5 font-medium text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground aria-[current=page]:bg-muted aria-[current=page]:text-foreground"
-                      href={withBase(tab.href ?? tab.path)}
-                    >
-                      {tab.label}
-                    </a>
+                    {tab.items && tab.items.length > 0 ? (
+                      <NavTabMenu
+                        active={tab === activeTab}
+                        route={route}
+                        tab={tab}
+                        variant="drawer"
+                      />
+                    ) : (
+                      <a
+                        aria-current={tab === activeTab ? "page" : undefined}
+                        class="flex items-center gap-2 rounded-[0.65rem] px-2.5 py-1.5 font-medium text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground aria-[current=page]:bg-muted aria-[current=page]:text-foreground"
+                        href={withMountedBase(tab.href ?? tab.path)}
+                      >
+                        {tab.icon && (
+                          <Icon class="shrink-0" name={tab.icon} size={14} />
+                        )}
+                        <span class="flex-1 truncate">{tab.label}</span>
+                      </a>
+                    )}
                   </li>
                 ))}
               </ul>

package/src/components/layout/Pagination.astro

@@ -1,5 +1,5 @@
 ---
-import { withBase } from "../islands/base-path.ts";
+import { withMountedBase } from "../islands/base-path.ts";
 import { EN_UI } from "../../core/i18n-ui.ts";
 import type { UIStrings } from "../../core/i18n-ui.ts";
 import type { FlatPage } from "./nav-utils.ts";
@@ -31,7 +31,7 @@ const s = { ...EN_UI.page, ...strings };
       {prev ? (
         <a
           class="flex max-w-[48%] flex-1 items-center gap-2 rounded-blume border border-border px-4 py-3 text-foreground transition-colors hover:border-foreground"
-          href={withBase(prev.route)}
+          href={withMountedBase(prev.route)}
         >
           <Icon class="rtl:-scale-x-100" name="arrow-left" size={16} />
           <span class="min-w-0">
@@ -47,7 +47,7 @@ const s = { ...EN_UI.page, ...strings };
       {next && (
         <a
           class="ms-auto flex max-w-[48%] flex-1 items-center justify-end gap-2 rounded-blume border border-border px-4 py-3 text-end text-foreground transition-colors hover:border-foreground"
-          href={withBase(next.route)}
+          href={withMountedBase(next.route)}
         >
           <span class="min-w-0">
             <span class="block text-muted-foreground text-xs">

package/src/components/layout/ReferenceLayout.astro

@@ -146,18 +146,21 @@ createIconSprite(Astro.locals);
     >
     {/* Every new-tab link's aria-describedby target (see core/new-tab.ts). */}
     <span hidden id={NEW_TAB_HINT_ID}>{navStrings.opensInNewTab}</span>
-    <Banner banner={banner} strings={strings.banner} />
+    <Banner banner={banner} locale={locale} strings={strings.banner} />
     <Header
       assistantStrings={strings.assistant}
       hasDrawer={false}
       hasSidebar={false}
       locale={locale}
       logo={logo}
+      navStrings={navStrings}
       navigation={navigation}
       route={route}
       searchEnabled={searchEnabled}
       searchLocale={searchLocale}
+      searchStrings={strings.search}
       site={site}
+      switcherStrings={strings.languageSwitcher}
     />
     <div
       class="h-[calc(100dvh-4rem)] overflow-auto border-border border-t [&>[data-scalar-client]]:h-full"

package/src/components/layout/RootLayout.astro

@@ -39,7 +39,7 @@ import {
 } from "../../og/dimensions.ts";
 import { buildStructuredData, toIso } from "../../seo/jsonld.ts";
 import { normalizeXHandle } from "../../seo/x-handle.ts";
-import { withBase } from "../islands/base-path.ts";
+import { withBase, withMountedBase } from "../islands/base-path.ts";
 import { isExternalUrl } from "../../core/base-path.ts";
 import { NEW_TAB_HINT_ID, newTabAttrs } from "../../core/new-tab.ts";
 import Analytics from "./Analytics.astro";
@@ -66,6 +66,7 @@ import {
   navGroupIds,
   sidebarForRoute,
 } from "./nav-utils.ts";
+import NavTabMenu from "./NavTabMenu.astro";
 import NavTree from "./NavTree.astro";
 import { resolveSlot } from "./overrides.ts";
 import { pageDirection, pageLocale } from "./page-locale.ts";
@@ -400,12 +401,12 @@ const formattedLastModified =
 // not a content route and has none.
 const markdownMirror = isBare
   ? null
-  : withBase(page.route === "/" ? "/index.md" : `${page.route}.md`);
+  : withMountedBase(page.route === "/" ? "/index.md" : `${page.route}.md`);
 
 // The hosted MCP server's absolute URL, used by the page-actions install menu.
 // Needs a configured site to be useful, so the menu is hidden without one.
 const mcpUrl =
-  mcp && siteUrl ? new URL(withBase(mcp.route), siteUrl).href : null;
+  mcp && siteUrl ? new URL(withMountedBase(mcp.route), siteUrl).href : null;
 
 // Scope the sidebar (and the breadcrumbs/pagination derived from it) to the
 // active tab's section, so a multi-section site drills each tab into its own
@@ -539,7 +540,7 @@ createIconSprite(Astro.locals);
     {
       feeds?.map((feed) => (
         <link
-          href={withBase(feed.href)}
+          href={withMountedBase(feed.href)}
           rel="alternate"
           title={feed.title}
           type="application/rss+xml"
@@ -579,7 +580,7 @@ createIconSprite(Astro.locals);
     >
     {/* Every new-tab link's aria-describedby target (see core/new-tab.ts). */}
     <span hidden id={NEW_TAB_HINT_ID}>{navStrings.opensInNewTab}</span>
-    <Banner banner={banner} strings={strings.banner} />
+    <Banner banner={banner} locale={locale} strings={strings.banner} />
     <VersionBanner notice={versionNotice ?? null} />
     <HeaderSlot
       assistantEnabled={assistantEnabled}
@@ -677,13 +678,25 @@ createIconSprite(Astro.locals);
               <ul class="m-0 list-none p-0">
                 {navigation.tabs.map((tab) => (
                   <li>
-                    <a
-                      aria-current={tab === activeTab ? "page" : undefined}
-                      class="block rounded-[0.65rem] px-2.5 py-1.5 font-medium text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground aria-[current=page]:bg-muted aria-[current=page]:text-foreground"
-                      href={withBase(tab.href ?? tab.path)}
-                    >
-                      {tab.label}
-                    </a>
+                    {tab.items && tab.items.length > 0 ? (
+                      <NavTabMenu
+                        active={tab === activeTab}
+                        route={page.route}
+                        tab={tab}
+                        variant="drawer"
+                      />
+                    ) : (
+                      <a
+                        aria-current={tab === activeTab ? "page" : undefined}
+                        class="flex items-center gap-2 rounded-[0.65rem] px-2.5 py-1.5 font-medium text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground aria-[current=page]:bg-muted aria-[current=page]:text-foreground"
+                        href={withMountedBase(tab.href ?? tab.path)}
+                      >
+                        {tab.icon && (
+                          <Icon class="shrink-0" name={tab.icon} size={14} />
+                        )}
+                        <span class="flex-1 truncate">{tab.label}</span>
+                      </a>
+                    )}
                   </li>
                 ))}
               </ul>