diff --git a/libs/react-components/src/lib/app-header/app-header.spec.tsx b/libs/react-components/src/lib/app-header/app-header.spec.tsx
index 4433fcd72..6f451a79e 100644
--- a/libs/react-components/src/lib/app-header/app-header.spec.tsx
+++ b/libs/react-components/src/lib/app-header/app-header.spec.tsx
@@ -10,4 +10,15 @@ describe("GoAAppHeader", () => {
     const header = baseElement.querySelector("goa-app-header");
     expect(header).toBeTruthy();
   });
+  it("should dispatch onMobileMenuClick if provided", () => {
+    const onMobileMenuClick = vi.fn();
+    const { baseElement } = render(
+      <GoAAppHeader heading="Test heading" url="test" onMenuClick={onMobileMenuClick} />
+    );
+
+    const header = baseElement.querySelector("goa-app-header");
+    expect(header).toBeTruthy();
+    header?.dispatchEvent(new Event("_menuClick"));
+    expect(onMobileMenuClick).toHaveBeenCalled();
+  })
 });
diff --git a/libs/react-components/src/lib/app-header/app-header.tsx b/libs/react-components/src/lib/app-header/app-header.tsx
index c6a5f13d2..05d3ef889 100644
--- a/libs/react-components/src/lib/app-header/app-header.tsx
+++ b/libs/react-components/src/lib/app-header/app-header.tsx
@@ -1,8 +1,12 @@
+import { useEffect, useRef } from "react";
+
 interface WCProps {
   heading?: string;
   url?: string;
   maxcontentwidth?: string;
   fullmenubreakpoint?: number;
+  hasmenuclickhandler?: boolean;
+  ref: React.RefObject<HTMLElement>;
   testid?: string;
 }
 
@@ -21,6 +25,7 @@ export interface GoAAppHeaderProps {
   maxContentWidth?: string;
   fullMenuBreakpoint?: number;
   children?: React.ReactNode;
+  onMenuClick?: () => void;
   testId?: string;
 }
 
@@ -31,14 +36,36 @@ export function GoAAppHeader({
   fullMenuBreakpoint,
   testId,
   children,
+  onMenuClick,
 }: GoAAppHeaderProps): JSX.Element {
+  const el = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    if (!el.current) {
+      return;
+    }
+    if (!onMenuClick) {
+      return;
+    }
+    const current = el.current;
+    const listener = () => {
+      onMenuClick();
+    }
+    current.addEventListener("_menuClick", listener);
+    return () => {
+      current.removeEventListener("_menuClick", listener);
+    }
+  }, [el, onMenuClick]);
+
   return (
     <goa-app-header
+      ref={el}
       heading={heading}
       url={url}
       fullmenubreakpoint={fullMenuBreakpoint}
       maxcontentwidth={maxContentWidth}
       testid={testId}
+      hasmenuclickhandler={!!onMenuClick}
     >
       {children}
     </goa-app-header>
diff --git a/libs/react-components/src/lib/side-menu-group/side-menu-group.spec.tsx b/libs/react-components/src/lib/side-menu-group/side-menu-group.spec.tsx
index 5ab343d07..7e6344564 100644
--- a/libs/react-components/src/lib/side-menu-group/side-menu-group.spec.tsx
+++ b/libs/react-components/src/lib/side-menu-group/side-menu-group.spec.tsx
@@ -10,4 +10,12 @@ describe("SideMenuGroup", () => {
     expect(el?.getAttribute("heading")).toBe("some header");
     expect(el?.getAttribute("testid")).toBe("foo");
   });
+  it("should render icon if provided", () => {
+    const { baseElement } = render(
+      <SideMenuGroup heading={"Some header"} testId={"foo"} icon={"accessibility"} />,
+    );
+
+    const el = baseElement.querySelector("goa-side-menu-group");
+    expect(el?.getAttribute("icon")).toBe("accessibility");
+  })
 });
diff --git a/libs/react-components/src/lib/three-column-layout/three-column-layout.spec.tsx b/libs/react-components/src/lib/three-column-layout/three-column-layout.spec.tsx
index 54e33dda7..ba23804d5 100644
--- a/libs/react-components/src/lib/three-column-layout/three-column-layout.spec.tsx
+++ b/libs/react-components/src/lib/three-column-layout/three-column-layout.spec.tsx
@@ -39,7 +39,7 @@ describe("ThreeColumnLayout", () => {
     expect(baseElement.innerHTML).toContain(
       "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat."
     );
-    expect(baseElement.innerHTML).toContain("<goa-app-header>");
+    expect(baseElement.querySelector("goa-app-header")).toBeTruthy();
     expect(baseElement.innerHTML).toContain("<goa-app-footer>");
     expect(baseElement.querySelectorAll("[slot=nav] a").length).toEqual(5);
 
diff --git a/libs/react-components/src/lib/two-column-layout/two-column-layout.spec.tsx b/libs/react-components/src/lib/two-column-layout/two-column-layout.spec.tsx
index 343fb7663..20a3bb803 100644
--- a/libs/react-components/src/lib/two-column-layout/two-column-layout.spec.tsx
+++ b/libs/react-components/src/lib/two-column-layout/two-column-layout.spec.tsx
@@ -34,7 +34,7 @@ describe("TwoColumnLayout", () => {
     expect(baseElement.innerHTML).toContain(
       "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat."
     );
-    expect(baseElement.innerHTML).toContain("<goa-app-header>");
+    expect(baseElement.querySelector("goa-app-header")).toBeTruthy();
     expect(baseElement.innerHTML).toContain("<goa-app-footer>");
     expect(baseElement.querySelectorAll("[slot=nav] a").length).toEqual(5);
   });
diff --git a/libs/web-components/src/components/app-header/AppHeader.svelte b/libs/web-components/src/components/app-header/AppHeader.svelte
index e9a7186a2..8ea1bb6d2 100644
--- a/libs/web-components/src/components/app-header/AppHeader.svelte
+++ b/libs/web-components/src/components/app-header/AppHeader.svelte
@@ -5,7 +5,7 @@
 <script lang="ts">
   import { onDestroy, onMount, tick } from "svelte";
   import { MOBILE_BP, TABLET_BP } from "../../common/breakpoints";
-  import { getSlottedChildren, styles } from "../../common/utils";
+  import { getSlottedChildren, styles, toBoolean } from "../../common/utils";
   import { isUrlMatch, getMatchedLink } from "../../common/urls";
   import { AppHeaderMenuProps } from "../app-header-menu/AppHeaderMenu.svelte";
 
@@ -15,6 +15,7 @@
   export let testid: string = "";
   export let maxcontentwidth = "";
   export let fullmenubreakpoint: number = TABLET_BP; // minimum window width to show all menu links
+  export let hasmenuclickhandler: string = "false"; // If this is yes, we will not expand menu when clicking a toggle button
 
   // Private
 
@@ -31,6 +32,7 @@
 
   let _appHeaderLinks: Element[] = [];
   let _appHeaderMenuItems: AppHeaderMenuProps[] = [];
+  let _menuButton: HTMLButtonElement;
 
   // Reactive
 
@@ -41,6 +43,7 @@
     _showToggleMenu = _desktop ? false : ((await hasChildren()) as boolean);
     onShowToggleMenuChange();
   })();
+  $: _hasMenuClickHandler = toBoolean(hasmenuclickhandler);
 
   // Hooks
 
@@ -58,6 +61,11 @@
   const toggleMenu = () => (_showMenu = !_showMenu);
   const hideMenu = () => (_showMenu = false);
 
+  const dispatchMenuClick = () => {
+    if (_hasMenuClickHandler) {
+      _menuButton.dispatchEvent(new CustomEvent("_menuClick", { composed: true, bubbles: true }));
+    }
+  }
   function getChildren() {
     if (!_slotParentEl) return;
 
@@ -202,9 +210,11 @@
     <!-- Menu button for mobile -->
     {#if _showToggleMenu && _mobile}
       <div class="menu-toggle-area">
-        <button on:click={toggleMenu} data-testid="menu-toggle">
+        <button on:click={_hasMenuClickHandler ? dispatchMenuClick : toggleMenu} data-testid="menu-toggle" bind:this={_menuButton}>
           Menu
-          <goa-icon type={_showMenu ? "chevron-up" : "chevron-down"} mt="1" />
+          {#if !_hasMenuClickHandler}
+            <goa-icon type={_showMenu ? "chevron-up" : "chevron-down"} mt="1" />
+          {/if}
         </button>
       </div>
     {/if}
@@ -229,9 +239,11 @@
           style={styles("height: 100%")}
           class="menu-toggle-area"
         >
-          <button on:click={toggleMenu} data-testid="menu-toggle">
+          <button on:click={_hasMenuClickHandler ? dispatchMenuClick : toggleMenu} data-testid="menu-toggle" bind:this={_menuButton}>
             Menu
-            <goa-icon type={_showMenu ? "chevron-up" : "chevron-down"} mt="1" />
+            {#if !_hasMenuClickHandler}
+             <goa-icon type={_showMenu ? "chevron-up" : "chevron-down"} mt="1" />
+            {/if}
           </button>
         </div>
 
@@ -255,7 +267,7 @@
     {/if}
 
     <!-- Mobile and desktop slot content -->
-    {#if (_showMenu && _mobile) || _desktop}
+    {#if (_showMenu && _mobile && !_hasMenuClickHandler) || _desktop}
       <div bind:this={_slotParentEl} data-testid="slot" class="content-area">
         <slot />
       </div>
diff --git a/package-lock.json b/package-lock.json
index 7ef5aa626..ab4d7dd10 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,7 +27,7 @@
         "zone.js": "0.14.3"
       },
       "devDependencies": {
-        "@abgov/design-tokens": "^1.4.0",
+        "@abgov/design-tokens": "^1.4.1",
         "@abgov/nx-release": "8.0.0",
         "@angular-devkit/build-angular": "18.2.8",
         "@angular-devkit/core": "18.1.4",
@@ -98,9 +98,9 @@
       }
     },
     "node_modules/@abgov/design-tokens": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@abgov/design-tokens/-/design-tokens-1.4.0.tgz",
-      "integrity": "sha512-J15RqUvRDvpqQ2zVAUn3Kcky47Rzt+tYO6AFuEu556DzDgGyEQenpquj2KZB7xxexgkZekNMjKqgBPiykgPHpQ==",
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@abgov/design-tokens/-/design-tokens-1.4.1.tgz",
+      "integrity": "sha512-GDXvX2+yiYBHJsJOw/eKwehvVXCSYIdWI0RjDlLBaizpEoiMUWRcN1OeS2PVK7fm/WtceB46WKn5qxyQgRT+Qg==",
       "dev": true,
       "dependencies": {
         "style-dictionary": "^3.7.1"
diff --git a/package.json b/package.json
index 85253be10..9986bbf59 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
   },
   "private": true,
   "devDependencies": {
-    "@abgov/design-tokens": "^1.4.0",
+    "@abgov/design-tokens": "^1.4.1",
     "@abgov/nx-release": "8.0.0",
     "@angular-devkit/build-angular": "18.2.8",
     "@angular-devkit/core": "18.1.4",