Add collapsible SiteWrapper header

lib/composite/header/index.jsx

@@ -41,7 +41,15 @@ function Logo({ homeUrl }) {
   );
 }
 
-function Header({ links, title, subtitle, navRight, fluidNav, homeUrl }) {
+function Header({
+  links,
+  title,
+  subtitle,
+  navRight,
+  fluidNav,
+  homeUrl,
+  collapseHeader = false,
+}) {
   const [showOverlayLinks, setShowOverlayLinks] = useState(false);
   const navContainerClass = gwMerge(
     "gw-w-full gw-mx-auto gw-px-4 gw-box-border",
@@ -72,14 +80,16 @@ function Header({ links, title, subtitle, navRight, fluidNav, homeUrl }) {
               </div>
             </div>
           </div>
-          <div className="gw-min-h-4 gw-py-2 sm:gw-py-0 gw-bg-nav-dark-gray sm:gw-bg-nav-gray">
-            <div className={navContainerClass}>
-              <div className="gw-flex gw-justify-between gw-items-center">
-                <span className="sm:gw-w-[94px] gw-shrink-0 "></span>
-                <Title title={title} subtitle={subtitle} />
+          {!collapseHeader && (
+            <div className="gw-min-h-4 gw-py-2 sm:gw-py-0 gw-bg-nav-dark-gray sm:gw-bg-nav-gray">
+              <div className={navContainerClass}>
+                <div className="gw-flex gw-justify-between gw-items-center">
+                  <span className="sm:gw-w-[94px] gw-shrink-0 "></span>
+                  <Title title={title} subtitle={subtitle} />
+                </div>
               </div>
             </div>
-          </div>
+          )}
         </div>
       </header>
       {showOverlayLinks ? (

lib/composite/site-wrapper/index.jsx

@@ -6,6 +6,7 @@ import DoDWarning from "./dod-warning";
 function SiteWrapper({
   children,
   navRight = undefined,
+  collapseHeader = false,
   showFooter = true,
   links,
   usaBanner = true,
@@ -44,7 +45,7 @@ function SiteWrapper({
   return (
     <div className="gw-grid gw-min-h-[100vh] gw-grid-rows-1fr-auto">
       <div>
-        {usaBanner && <USABanner fluidNav={fluidNav} />}
+        {usaBanner && !collapseHeader && <USABanner fluidNav={fluidNav} />}
         {msgBanner && msgBannerPosition === "top" ? msgBanner : null}
         <Header
           links={links}
@@ -53,6 +54,7 @@ function SiteWrapper({
           navRight={navRight}
           fluidNav={fluidNav}
           homeUrl={homeUrl}
+          collapseHeader={collapseHeader}
         />
 
         {msgBanner && msgBannerPosition === "bottom" ? msgBanner : null}

lib/composite/site-wrapper/index.test.jsx

@@ -0,0 +1,38 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import SiteWrapper from ".";
+
+const renderSiteWrapper = (props = {}) =>
+  renderToStaticMarkup(
+    <SiteWrapper
+      links={[{ id: "home", text: "Home", href: "/" }]}
+      title="Test site title"
+      subtitle="Test site subtitle"
+      navRight={<span>Account</span>}
+      showFooter={false}
+      {...props}
+    >
+      <main>Page content</main>
+    </SiteWrapper>,
+  );
+
+describe("SiteWrapper collapseHeader", () => {
+  it("renders the complete header by default", () => {
+    const markup = renderSiteWrapper();
+
+    expect(markup).toContain("header_banner_container");
+    expect(markup).toContain("Test site title");
+    expect(markup).toContain("Test site subtitle");
+  });
+
+  it("keeps navigation controls while hiding the expanded header content", () => {
+    const markup = renderSiteWrapper({ collapseHeader: true });
+
+    expect(markup).not.toContain("header_banner_container");
+    expect(markup).not.toContain("Test site title");
+    expect(markup).not.toContain("Test site subtitle");
+    expect(markup).toContain("Account");
+    expect(markup).toContain("Visit the homepage of this site");
+    expect(markup).toContain("Page content");
+  });
+});

src/app-pages/documentation/app-shell/site-wrapper.jsx

@@ -33,6 +33,12 @@ const siteWrapperProps = [
     default: "null",
     desc: "A custom component that will render to the right of the header links.",
   },
+  {
+    name: "collapseHeader",
+    type: "boolean",
+    default: "false",
+    desc: "If true, displays only the compact black navigation bar. The government website banner and the title and subtitle section are hidden.",
+  },
   {
     name: "usaBanner",
     type: "boolean",
@@ -237,6 +243,16 @@ function App() {
 
 export default App;
 `}
+        />
+        <Text className="gw-pt-3">
+          Set <Code>collapseHeader</Code> when a page needs more vertical space.
+          The compact state keeps the home link, navigation, custom controls,
+          and mobile menu available.
+        </Text>
+        <CodeExample
+          code={`<SiteWrapper links={links} collapseHeader>
+  <Route />
+</SiteWrapper>`}
         />
         <div className="gw-font-bold gw-text-lg gw-pt-6">
           Component API - <Code className="gw-p-2">{`<SiteWrapper />`}</Code>