From cf40fb82e37699a0e6b59539bc166a33501fe25f Mon Sep 17 00:00:00 2001
From: Wagner Maciel <wagnermaciel@google.com>
Date: Mon, 22 Sep 2025 15:29:43 -0400
Subject: [PATCH] docs(cdk-experimental/menu): add menu demo page

---
 .ng-dev/commit-message.mts                      |  1 +
 src/dev-app/BUILD.bazel                         |  1 +
 src/dev-app/cdk-experimental-menu/BUILD.bazel   | 15 +++++++++++++++
 .../cdk-experimental-menu/cdk-menu-demo.css     |  0
 .../cdk-experimental-menu/cdk-menu-demo.html    |  1 +
 .../cdk-experimental-menu/cdk-menu-demo.ts      | 17 +++++++++++++++++
 src/dev-app/dev-app/dev-app-layout.ts           |  7 ++++---
 src/dev-app/routes.ts                           |  5 +++++
 8 files changed, 44 insertions(+), 3 deletions(-)
 create mode 100644 src/dev-app/cdk-experimental-menu/BUILD.bazel
 create mode 100644 src/dev-app/cdk-experimental-menu/cdk-menu-demo.css
 create mode 100644 src/dev-app/cdk-experimental-menu/cdk-menu-demo.html
 create mode 100644 src/dev-app/cdk-experimental-menu/cdk-menu-demo.ts

diff --git a/.ng-dev/commit-message.mts b/.ng-dev/commit-message.mts
index 314d1e3c36f0..2b9f9bbba50a 100644
--- a/.ng-dev/commit-message.mts
+++ b/.ng-dev/commit-message.mts
@@ -13,6 +13,7 @@ export const commitMessage: CommitMessageConfig = {
     'cdk-experimental/column-resize',
     'cdk-experimental/combobox',
     'cdk-experimental/listbox',
+    'cdk-experimental/menu',
     'cdk-experimental/popover-edit',
     'cdk-experimental/radio-group',
     'cdk-experimental/scrolling',
diff --git a/src/dev-app/BUILD.bazel b/src/dev-app/BUILD.bazel
index a8aba0abbe35..587a0c200587 100644
--- a/src/dev-app/BUILD.bazel
+++ b/src/dev-app/BUILD.bazel
@@ -36,6 +36,7 @@ ng_project(
         "//src/dev-app/cdk-experimental-accordion",
         "//src/dev-app/cdk-experimental-combobox",
         "//src/dev-app/cdk-experimental-listbox",
+        "//src/dev-app/cdk-experimental-menu",
         "//src/dev-app/cdk-experimental-radio-group",
         "//src/dev-app/cdk-experimental-tabs",
         "//src/dev-app/cdk-experimental-toolbar",
diff --git a/src/dev-app/cdk-experimental-menu/BUILD.bazel b/src/dev-app/cdk-experimental-menu/BUILD.bazel
new file mode 100644
index 000000000000..86c19d009c5d
--- /dev/null
+++ b/src/dev-app/cdk-experimental-menu/BUILD.bazel
@@ -0,0 +1,15 @@
+load("//tools:defaults.bzl", "ng_project")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_project(
+    name = "cdk-experimental-menu",
+    srcs = glob(["**/*.ts"]),
+    assets = [
+        "cdk-menu-demo.html",
+        ":cdk-menu-demo.css",
+    ],
+    deps = [
+        "//:node_modules/@angular/core",
+    ],
+)
diff --git a/src/dev-app/cdk-experimental-menu/cdk-menu-demo.css b/src/dev-app/cdk-experimental-menu/cdk-menu-demo.css
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/src/dev-app/cdk-experimental-menu/cdk-menu-demo.html b/src/dev-app/cdk-experimental-menu/cdk-menu-demo.html
new file mode 100644
index 000000000000..6878446d7f86
--- /dev/null
+++ b/src/dev-app/cdk-experimental-menu/cdk-menu-demo.html
@@ -0,0 +1 @@
+<p>cdk-experimental-menu coming soon!</p>
diff --git a/src/dev-app/cdk-experimental-menu/cdk-menu-demo.ts b/src/dev-app/cdk-experimental-menu/cdk-menu-demo.ts
new file mode 100644
index 000000000000..de11c3f27355
--- /dev/null
+++ b/src/dev-app/cdk-experimental-menu/cdk-menu-demo.ts
@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
+
+@Component({
+  templateUrl: 'cdk-menu-demo.html',
+  styleUrl: 'cdk-menu-demo.css',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CdkExperimentalMenuDemo {}
diff --git a/src/dev-app/dev-app/dev-app-layout.ts b/src/dev-app/dev-app/dev-app-layout.ts
index dcd3d2f2f2b8..461004ea2833 100644
--- a/src/dev-app/dev-app/dev-app-layout.ts
+++ b/src/dev-app/dev-app/dev-app-layout.ts
@@ -62,13 +62,14 @@ export class DevAppLayout {
   navItems = [
     {name: 'Examples', route: '/examples'},
     {name: 'CDK Dialog', route: '/cdk-dialog'},
+    {name: 'CDK Experimental Accordion', route: '/cdk-experimental-accordion'},
     {name: 'CDK Experimental Combobox', route: '/cdk-experimental-combobox'},
-    {name: 'CDK Experimental Radio Group', route: '/cdk-experimental-radio-group'},
     {name: 'CDK Experimental Listbox', route: '/cdk-experimental-listbox'},
+    {name: 'CDK Experimental Menu', route: '/cdk-experimental-menu'},
+    {name: 'CDK Experimental Radio Group', route: '/cdk-experimental-radio-group'},
     {name: 'CDK Experimental Tabs', route: '/cdk-experimental-tabs'},
-    {name: 'CDK Experimental Accordion', route: '/cdk-experimental-accordion'},
-    {name: 'CDK Experimental Tree', route: '/cdk-experimental-tree'},
     {name: 'CDK Experimental Toolbar', route: '/cdk-experimental-toolbar'},
+    {name: 'CDK Experimental Tree', route: '/cdk-experimental-tree'},
     {name: 'CDK Listbox', route: '/cdk-listbox'},
     {name: 'CDK Menu', route: '/cdk-menu'},
     {name: 'Autocomplete', route: '/autocomplete'},
diff --git a/src/dev-app/routes.ts b/src/dev-app/routes.ts
index 03fcf6a3aed8..1c93c7eee3dc 100644
--- a/src/dev-app/routes.ts
+++ b/src/dev-app/routes.ts
@@ -50,6 +50,11 @@ export const DEV_APP_ROUTES: Routes = [
     loadComponent: () =>
       import('./cdk-experimental-listbox/cdk-listbox-demo').then(m => m.CdkExperimentalListboxDemo),
   },
+  {
+    path: 'cdk-experimental-menu',
+    loadComponent: () =>
+      import('./cdk-experimental-menu/cdk-menu-demo').then(m => m.CdkExperimentalMenuDemo),
+  },
   {
     path: 'cdk-experimental-radio-group',
     loadComponent: () =>