diff --git a/src/aria/menu/BUILD.bazel b/src/aria/menu/BUILD.bazel
index 8d77abf0b0e3..64d3f2e60123 100644
--- a/src/aria/menu/BUILD.bazel
+++ b/src/aria/menu/BUILD.bazel
@@ -11,6 +11,7 @@ ng_project(
     ),
     deps = [
         "//:node_modules/@angular/core",
+        "//src/aria/deferred-content",
         "//src/aria/private",
         "//src/cdk/a11y",
         "//src/cdk/bidi",
diff --git a/src/aria/menu/index.ts b/src/aria/menu/index.ts
index 135a0a300210..baacdeadfc02 100644
--- a/src/aria/menu/index.ts
+++ b/src/aria/menu/index.ts
@@ -6,4 +6,4 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-export {Menu, MenuBar, MenuItem, MenuTrigger} from './menu';
+export {Menu, MenuBar, MenuContent, MenuItem, MenuTrigger} from './menu';
diff --git a/src/aria/menu/menu.spec.ts b/src/aria/menu/menu.spec.ts
index 9ed1e34e958f..8e799347c103 100644
--- a/src/aria/menu/menu.spec.ts
+++ b/src/aria/menu/menu.spec.ts
@@ -151,49 +151,49 @@ describe('Standalone Menu Pattern', () => {
 
     it('should select an item on click', () => {
       const banana = getItem('Banana');
-      spyOn(fixture.componentInstance, 'onSubmit');
+      spyOn(fixture.componentInstance, 'onSelect');
 
       click(banana!);
-      expect(fixture.componentInstance.onSubmit).toHaveBeenCalledWith('Banana');
+      expect(fixture.componentInstance.onSelect).toHaveBeenCalledWith('Banana');
     });
 
     it('should select an item on enter', () => {
       const banana = getItem('Banana');
-      spyOn(fixture.componentInstance, 'onSubmit');
+      spyOn(fixture.componentInstance, 'onSelect');
 
       keydown(document.activeElement!, 'ArrowDown'); // Move focus to Banana
       expect(document.activeElement).toBe(banana);
 
       keydown(banana!, 'Enter');
-      expect(fixture.componentInstance.onSubmit).toHaveBeenCalledWith('Banana');
+      expect(fixture.componentInstance.onSelect).toHaveBeenCalledWith('Banana');
     });
 
     it('should select an item on space', () => {
       const banana = getItem('Banana');
-      spyOn(fixture.componentInstance, 'onSubmit');
+      spyOn(fixture.componentInstance, 'onSelect');
 
       keydown(document.activeElement!, 'ArrowDown'); // Move focus to Banana
       expect(document.activeElement).toBe(banana);
 
       keydown(banana!, ' ');
-      expect(fixture.componentInstance.onSubmit).toHaveBeenCalledWith('Banana');
+      expect(fixture.componentInstance.onSelect).toHaveBeenCalledWith('Banana');
     });
 
     it('should not select a disabled item', () => {
       const cherry = getItem('Cherry');
-      spyOn(fixture.componentInstance, 'onSubmit');
+      spyOn(fixture.componentInstance, 'onSelect');
 
       click(cherry!);
-      expect(fixture.componentInstance.onSubmit).not.toHaveBeenCalled();
+      expect(fixture.componentInstance.onSelect).not.toHaveBeenCalled();
 
       keydown(document.activeElement!, 'End');
       expect(document.activeElement).toBe(cherry);
 
       keydown(cherry!, 'Enter');
-      expect(fixture.componentInstance.onSubmit).not.toHaveBeenCalled();
+      expect(fixture.componentInstance.onSelect).not.toHaveBeenCalled();
 
       keydown(cherry!, ' ');
-      expect(fixture.componentInstance.onSubmit).not.toHaveBeenCalled();
+      expect(fixture.componentInstance.onSelect).not.toHaveBeenCalled();
     });
   });
 
@@ -316,18 +316,18 @@ describe('Standalone Menu Pattern', () => {
     }));
 
     it('should close on selecting an item on click', () => {
-      spyOn(fixture.componentInstance, 'onSubmit');
+      spyOn(fixture.componentInstance, 'onSelect');
       click(getItem('Berries')!); // open submenu
       expect(isSubmenuExpanded()).toBe(true);
 
       click(getItem('Blueberry')!);
 
-      expect(fixture.componentInstance.onSubmit).toHaveBeenCalledWith('Blueberry');
+      expect(fixture.componentInstance.onSelect).toHaveBeenCalledWith('Blueberry');
       expect(isSubmenuExpanded()).toBe(false);
     });
 
     it('should close on selecting an item on enter', () => {
-      spyOn(fixture.componentInstance, 'onSubmit');
+      spyOn(fixture.componentInstance, 'onSelect');
       const apple = getItem('Apple');
       const banana = getItem('Banana');
       const berries = getItem('Berries');
@@ -341,12 +341,12 @@ describe('Standalone Menu Pattern', () => {
 
       keydown(blueberry!, 'Enter');
 
-      expect(fixture.componentInstance.onSubmit).toHaveBeenCalledWith('Blueberry');
+      expect(fixture.componentInstance.onSelect).toHaveBeenCalledWith('Blueberry');
       expect(isSubmenuExpanded()).toBe(false);
     });
 
     it('should close on selecting an item on space', () => {
-      spyOn(fixture.componentInstance, 'onSubmit');
+      spyOn(fixture.componentInstance, 'onSelect');
       const apple = getItem('Apple');
       const banana = getItem('Banana');
       const berries = getItem('Berries');
@@ -360,7 +360,7 @@ describe('Standalone Menu Pattern', () => {
 
       keydown(blueberry!, ' ');
 
-      expect(fixture.componentInstance.onSubmit).toHaveBeenCalledWith('Blueberry');
+      expect(fixture.componentInstance.onSelect).toHaveBeenCalledWith('Blueberry');
       expect(isSubmenuExpanded()).toBe(false);
     });
 
@@ -877,12 +877,12 @@ describe('Menu Bar Pattern', () => {
 
 @Component({
   template: `
-<div ngMenu (onSubmit)="onSubmit($event)">
+<div ngMenu (onSelect)="onSelect($event)">
   <div ngMenuItem value='Apple' searchTerm='Apple'>Apple</div>
   <div ngMenuItem value='Banana' searchTerm='Banana'>Banana</div>
-  <div ngMenuItem value='Berries' searchTerm='Berries' #berriesItem="ngMenuItem" [submenu]="berriesMenu">Berries</div>
+  <div ngMenuItem value='Berries' searchTerm='Berries' [submenu]="berriesMenu">Berries</div>
 
-  <div ngMenu [parent]="berriesItem" #berriesMenu="ngMenu">
+  <div ngMenu #berriesMenu="ngMenu">
     <div ngMenuItem value='Blueberry' searchTerm='Blueberry'>Blueberry</div>
     <div ngMenuItem value='Blackberry' searchTerm='Blackberry'>Blackberry</div>
     <div ngMenuItem value='Strawberry' searchTerm='Strawberry'>Strawberry</div>
@@ -894,19 +894,19 @@ describe('Menu Bar Pattern', () => {
   imports: [Menu, MenuItem],
 })
 class StandaloneMenuExample {
-  onSubmit(value: string) {}
+  onSelect(value: string) {}
 }
 
 @Component({
   template: `
-<button ngMenuTrigger #menuTrigger="ngMenuTrigger" [submenu]="menu">Open menu</button>
+<button ngMenuTrigger [menu]="menu">Open menu</button>
 
-<div ngMenu #menu="ngMenu" [parent]="menuTrigger">
+<div ngMenu #menu="ngMenu">
   <div ngMenuItem value='Apple' searchTerm='Apple'>Apple</div>
   <div ngMenuItem value='Banana' searchTerm='Banana'>Banana</div>
-  <div ngMenuItem value='Berries' searchTerm='Berries' #berriesItem="ngMenuItem" [submenu]="berriesMenu">Berries</div>
+  <div ngMenuItem value='Berries' searchTerm='Berries' [submenu]="berriesMenu">Berries</div>
 
-  <div ngMenu [parent]="berriesItem" #berriesMenu="ngMenu">
+  <div ngMenu #berriesMenu="ngMenu">
     <div ngMenuItem value='Blueberry' searchTerm='Blueberry'>Blueberry</div>
     <div ngMenuItem value='Blackberry' searchTerm='Blackberry'>Blackberry</div>
     <div ngMenuItem value='Strawberry' searchTerm='Strawberry'>Strawberry</div>
@@ -923,24 +923,24 @@ class MenuTriggerExample {}
   template: `
 <div ngMenuBar>
   <div ngMenuItem value='File' searchTerm='File'>File</div>
-  <div ngMenuItem value='Edit' searchTerm='Edit' [submenu]="editMenu" #editItem="ngMenuItem">Edit</div>
+  <div ngMenuItem value='Edit' searchTerm='Edit' [submenu]="editMenu">Edit</div>
 
-  <div ngMenu [parent]="editItem" #editMenu="ngMenu">
+  <div ngMenu #editMenu="ngMenu">
     <div ngMenuItem value='Undo' searchTerm='Undo'>Undo</div>
     <div ngMenuItem value='Redo' searchTerm='Redo'>Redo</div>
   </div>
 
-  <div ngMenuItem #viewItem="ngMenuItem" [submenu]="viewMenu" value='View' searchTerm='View'>View</div>
+  <div ngMenuItem [submenu]="viewMenu" value='View' searchTerm='View'>View</div>
 
-  <div ngMenu [parent]="viewItem" #viewMenu="ngMenu">
+  <div ngMenu #viewMenu="ngMenu">
     <div ngMenuItem value='Zoom In' searchTerm='Zoom In'>Zoom In</div>
     <div ngMenuItem value='Zoom Out' searchTerm='Zoom Out'>Zoom Out</div>
     <div ngMenuItem value='Full Screen' searchTerm='Full Screen'>Full Screen</div>
   </div>
 
-  <div ngMenuItem #helpItem="ngMenuItem" [submenu]="helpMenu" value='Help' searchTerm='Help'>Help</div>
+  <div ngMenuItem [submenu]="helpMenu" value='Help' searchTerm='Help'>Help</div>
 
-  <div ngMenu [parent]="helpItem" #helpMenu="ngMenu">
+  <div ngMenu #helpMenu="ngMenu">
     <div ngMenuItem value='Documentation' searchTerm='Documentation'>Documentation</div>
     <div ngMenuItem value='About' searchTerm='About'>About</div>
   </div>
diff --git a/src/aria/menu/menu.ts b/src/aria/menu/menu.ts
index 882206b6d8d6..b1ead192bec0 100644
--- a/src/aria/menu/menu.ts
+++ b/src/aria/menu/menu.ts
@@ -11,6 +11,7 @@ import {
   computed,
   contentChildren,
   Directive,
+  effect,
   ElementRef,
   inject,
   input,
@@ -29,6 +30,7 @@ import {
 } from '@angular/aria/private';
 import {toSignal} from '@angular/core/rxjs-interop';
 import {Directionality} from '@angular/cdk/bidi';
+import {DeferredContent, DeferredContentAware} from '@angular/aria/deferred-content';
 
 /**
  * A trigger for a menu.
@@ -44,7 +46,7 @@ import {Directionality} from '@angular/cdk/bidi';
     '[attr.tabindex]': '_pattern.tabindex()',
     '[attr.aria-haspopup]': '_pattern.hasPopup()',
     '[attr.aria-expanded]': '_pattern.expanded()',
-    '[attr.aria-controls]': '_pattern.submenu()?.id()',
+    '[attr.aria-controls]': '_pattern.menu()?.id()',
     '(click)': '_pattern.onClick()',
     '(keydown)': '_pattern.onKeydown($event)',
     '(focusout)': '_pattern.onFocusOut($event)',
@@ -59,18 +61,18 @@ export class MenuTrigger<V> {
 
   // TODO(wagnermaciel): See we can remove the need to pass in a submenu.
 
-  /** The submenu associated with the menu trigger. */
-  submenu = input<Menu<V> | undefined>(undefined);
-
-  /** A callback function triggered when a menu item is selected. */
-  onSubmit = output<V>();
+  /** The menu associated with the trigger. */
+  menu = input<Menu<V> | undefined>(undefined);
 
   /** The menu trigger ui pattern instance. */
-  readonly _pattern: MenuTriggerPattern<V> = new MenuTriggerPattern({
-    onSubmit: (value: V) => this.onSubmit.emit(value),
+  _pattern: MenuTriggerPattern<V> = new MenuTriggerPattern({
     element: computed(() => this._elementRef.nativeElement),
-    submenu: computed(() => this.submenu()?._pattern),
+    menu: computed(() => this.menu()?._pattern),
   });
+
+  constructor() {
+    effect(() => this.menu()?.parent.set(this));
+  }
 }
 
 /**
@@ -104,8 +106,17 @@ export class MenuTrigger<V> {
     '(focusin)': '_pattern.onFocusIn()',
     '(click)': '_pattern.onClick($event)',
   },
+  hostDirectives: [
+    {
+      directive: DeferredContentAware,
+      inputs: ['preserveContent'],
+    },
+  ],
 })
 export class Menu<V> {
+  /** The DeferredContentAware host directive. */
+  private readonly _deferredContentAware = inject(DeferredContentAware, {optional: true});
+
   /** The menu items contained in the menu. */
   readonly _allItems = contentChildren<MenuItem<V>>(MenuItem, {descendants: true});
 
@@ -128,9 +139,6 @@ export class Menu<V> {
     initialValue: this._directionality.value,
   });
 
-  /** The submenu associated with the menu. */
-  readonly submenu = input<Menu<V> | undefined>(undefined);
-
   /** The unique ID of the menu. */
   readonly id = input<string>(Math.random().toString(36).substring(2, 10));
 
@@ -141,7 +149,7 @@ export class Menu<V> {
   readonly typeaheadDelay = input<number>(0.5); // Picked arbitrarily.
 
   /** A reference to the parent menu item or menu trigger. */
-  readonly parent = input<MenuTrigger<V> | MenuItem<V>>();
+  readonly parent = signal<MenuTrigger<V> | MenuItem<V> | undefined>(undefined);
 
   /** The menu ui pattern instance. */
   readonly _pattern: MenuPattern<V>;
@@ -159,7 +167,7 @@ export class Menu<V> {
   isVisible = computed(() => this._pattern.isVisible());
 
   /** A callback function triggered when a menu item is selected. */
-  onSubmit = output<V>();
+  onSelect = output<V>();
 
   constructor() {
     this._pattern = new MenuPattern({
@@ -172,7 +180,11 @@ export class Menu<V> {
       selectionMode: () => 'explicit',
       activeItem: signal(undefined),
       element: computed(() => this._elementRef.nativeElement),
-      onSubmit: (value: V) => this.onSubmit.emit(value),
+      onSelect: (value: V) => this.onSelect.emit(value),
+    });
+
+    afterRenderEffect(() => {
+      this._deferredContentAware?.contentVisible.set(this._pattern.isVisible());
     });
 
     // TODO(wagnermaciel): This is a redundancy needed for if the user uses display: none to hide
@@ -271,7 +283,7 @@ export class MenuBar<V> {
   readonly items = signal<MenuItemPattern<V>[]>([]);
 
   /** A callback function triggered when a menu item is selected. */
-  onSubmit = output<V>();
+  onSelect = output<V>();
 
   constructor() {
     this._pattern = new MenuBarPattern({
@@ -281,7 +293,7 @@ export class MenuBar<V> {
       focusMode: () => 'roving',
       orientation: () => 'horizontal',
       selectionMode: () => 'explicit',
-      onSubmit: (value: V) => this.onSubmit.emit(value),
+      onSelect: (value: V) => this.onSelect.emit(value),
       activeItem: signal(undefined),
       element: computed(() => this._elementRef.nativeElement),
     });
@@ -360,4 +372,16 @@ export class MenuItem<V> {
     parent: computed(() => this.parent?._pattern),
     submenu: computed(() => this.submenu()?._pattern),
   });
+
+  constructor() {
+    effect(() => this.submenu()?.parent.set(this));
+  }
 }
+
+/** Defers the rendering of the menu content. */
+@Directive({
+  selector: 'ng-template[ngMenuContent]',
+  exportAs: 'ngMenuContent',
+  hostDirectives: [DeferredContent],
+})
+export class MenuContent {}
diff --git a/src/aria/private/menu/menu.spec.ts b/src/aria/private/menu/menu.spec.ts
index 689af41216f0..bfce2d3b161a 100644
--- a/src/aria/private/menu/menu.spec.ts
+++ b/src/aria/private/menu/menu.spec.ts
@@ -42,7 +42,7 @@ function getMenuTriggerPattern() {
   const submenu = signal<MenuPattern<string> | undefined>(undefined);
   const trigger = new MenuTriggerPattern<string>({
     element,
-    submenu,
+    menu: submenu,
   });
   return trigger;
 }
@@ -123,10 +123,14 @@ function getMenuPattern(
     }),
   );
 
-  if (parent) {
+  if (parent instanceof MenuTriggerPattern) {
+    (parent.menu as WritableSignal<MenuPattern<string>>).set(menu);
+    parent.inputs.element()?.appendChild(menu.inputs.element()!);
+  } else if (parent instanceof MenuItemPattern) {
     (parent.submenu as WritableSignal<MenuPattern<string>>).set(menu);
     parent.inputs.element()?.appendChild(menu.inputs.element()!);
   }
+
   menu.inputs.activeItem.set(items()[0]);
   return menu;
 }
@@ -240,43 +244,43 @@ describe('Standalone Menu Pattern', () => {
   describe('Selection', () => {
     it('should select an item on click', () => {
       const items = menu.inputs.items();
-      menu.inputs.onSubmit = jasmine.createSpy('onSubmit');
+      menu.inputs.onSelect = jasmine.createSpy('onSelect');
       menu.onClick(clickMenuItem(items, 1));
-      expect(menu.inputs.onSubmit).toHaveBeenCalledWith('b');
+      expect(menu.inputs.onSelect).toHaveBeenCalledWith('b');
     });
 
     it('should select an item on enter', () => {
       const items = menu.inputs.items();
       menu.inputs.activeItem.set(items[1]);
-      menu.inputs.onSubmit = jasmine.createSpy('onSubmit');
+      menu.inputs.onSelect = jasmine.createSpy('onSelect');
 
       menu.onKeydown(enter());
-      expect(menu.inputs.onSubmit).toHaveBeenCalledWith('b');
+      expect(menu.inputs.onSelect).toHaveBeenCalledWith('b');
     });
 
     it('should select an item on space', () => {
       const items = menu.inputs.items();
       menu.inputs.activeItem.set(items[1]);
-      menu.inputs.onSubmit = jasmine.createSpy('onSubmit');
+      menu.inputs.onSelect = jasmine.createSpy('onSelect');
 
       menu.onKeydown(space());
-      expect(menu.inputs.onSubmit).toHaveBeenCalledWith('b');
+      expect(menu.inputs.onSelect).toHaveBeenCalledWith('b');
     });
 
     it('should not select a disabled item', () => {
       const items = menu.inputs.items() as TestMenuItem[];
       items[1].disabled.set(true);
       menu.inputs.activeItem.set(items[1]);
-      menu.inputs.onSubmit = jasmine.createSpy('onSubmit');
+      menu.inputs.onSelect = jasmine.createSpy('onSelect');
 
       menu.onClick(clickMenuItem(items, 1));
-      expect(menu.inputs.onSubmit).not.toHaveBeenCalled();
+      expect(menu.inputs.onSelect).not.toHaveBeenCalled();
 
       menu.onKeydown(enter());
-      expect(menu.inputs.onSubmit).not.toHaveBeenCalled();
+      expect(menu.inputs.onSelect).not.toHaveBeenCalled();
 
       menu.onKeydown(space());
-      expect(menu.inputs.onSubmit).not.toHaveBeenCalled();
+      expect(menu.inputs.onSelect).not.toHaveBeenCalled();
     });
   });
 
diff --git a/src/aria/private/menu/menu.ts b/src/aria/private/menu/menu.ts
index 08f2e96167de..e49dfa1e5dbc 100644
--- a/src/aria/private/menu/menu.ts
+++ b/src/aria/private/menu/menu.ts
@@ -17,7 +17,7 @@ export interface MenuBarInputs<V> extends Omit<ListInputs<MenuItemPattern<V>, V>
   items: SignalLike<MenuItemPattern<V>[]>;
 
   /** Callback function triggered when a menu item is selected. */
-  onSubmit?: (value: V) => void;
+  onSelect?: (value: V) => void;
 }
 
 /** The inputs for the MenuPattern class. */
@@ -33,7 +33,7 @@ export interface MenuInputs<V>
   parent: SignalLike<MenuTriggerPattern<V> | MenuItemPattern<V> | undefined>;
 
   /** Callback function triggered when a menu item is selected. */
-  onSubmit?: (value: V) => void;
+  onSelect?: (value: V) => void;
 }
 
 /** The inputs for the MenuTriggerPattern class. */
@@ -41,11 +41,8 @@ export interface MenuTriggerInputs<V> {
   /** A reference to the menu trigger element. */
   element: SignalLike<HTMLElement | undefined>;
 
-  /** A reference to the submenu associated with the menu trigger. */
-  submenu: SignalLike<MenuPattern<V> | undefined>;
-
-  /** Callback function triggered when a menu item is selected. */
-  onSubmit?: (value: V) => void;
+  /** A reference to the menu associated with the trigger. */
+  menu: SignalLike<MenuPattern<V> | undefined>;
 }
 
 /** The inputs for the MenuItemPattern class. */
@@ -308,14 +305,18 @@ export class MenuPattern<V> {
       const isMenuBar = root instanceof MenuBarPattern;
       const isMenuTrigger = root instanceof MenuTriggerPattern;
 
-      if (!item.submenu() && (isMenuTrigger || isMenuBar)) {
+      if (!item.submenu() && isMenuTrigger) {
         root.close({refocus: true});
-        root?.inputs.onSubmit?.(item.value());
+      }
+
+      if (!item.submenu() && isMenuBar) {
+        root.close();
+        root?.inputs.onSelect?.(item.value());
       }
 
       if (!item.submenu() && isMenu) {
         root.inputs.activeItem()?.close({refocus: true});
-        root?.inputs.onSubmit?.(item.value());
+        root?.inputs.onSelect?.(item.value());
       }
     }
   }
@@ -511,11 +512,11 @@ export class MenuTriggerPattern<V> {
   /** Whether the menu trigger has a popup. */
   hasPopup = () => true;
 
-  /** The submenu associated with the trigger. */
-  submenu: SignalLike<MenuPattern<V> | undefined>;
+  /** The menu associated with the trigger. */
+  menu: SignalLike<MenuPattern<V> | undefined>;
 
   /** The tabindex of the menu trigger. */
-  tabindex = computed(() => (this.expanded() && this.submenu()?.inputs.activeItem() ? -1 : 0));
+  tabindex = computed(() => (this.expanded() && this.menu()?.inputs.activeItem() ? -1 : 0));
 
   /** Handles keyboard events for the menu trigger. */
   keydownManager = computed(() => {
@@ -528,7 +529,7 @@ export class MenuTriggerPattern<V> {
   });
 
   constructor(readonly inputs: MenuTriggerInputs<V>) {
-    this.submenu = this.inputs.submenu;
+    this.menu = this.inputs.menu;
   }
 
   /** Handles keyboard events for the menu trigger. */
@@ -549,7 +550,7 @@ export class MenuTriggerPattern<V> {
     if (
       this.expanded() &&
       !element?.contains(relatedTarget) &&
-      !this.inputs.submenu()?.inputs.element()?.contains(relatedTarget)
+      !this.inputs.menu()?.inputs.element()?.contains(relatedTarget)
     ) {
       this.close();
     }
@@ -560,22 +561,22 @@ export class MenuTriggerPattern<V> {
     this.expanded.set(true);
 
     if (opts?.first) {
-      this.inputs.submenu()?.first();
+      this.inputs.menu()?.first();
     } else if (opts?.last) {
-      this.inputs.submenu()?.last();
+      this.inputs.menu()?.last();
     }
   }
 
   /** Closes the menu. */
   close(opts: {refocus?: boolean} = {}) {
     this.expanded.set(false);
-    this.submenu()?.listBehavior.unfocus();
+    this.menu()?.listBehavior.unfocus();
 
     if (opts.refocus) {
       this.inputs.element()?.focus();
     }
 
-    let menuitems = this.inputs.submenu()?.inputs.items() ?? [];
+    let menuitems = this.inputs.menu()?.inputs.items() ?? [];
 
     while (menuitems.length) {
       const menuitem = menuitems.pop();
diff --git a/src/components-examples/aria/menu/menu-bar/menu-bar-example.html b/src/components-examples/aria/menu/menu-bar/menu-bar-example.html
index 5b772ddf3e91..6d2f4406768b 100644
--- a/src/components-examples/aria/menu/menu-bar/menu-bar-example.html
+++ b/src/components-examples/aria/menu/menu-bar/menu-bar-example.html
@@ -1,300 +1,329 @@
-<div menu-bar>
-  <div menu-bar-item value="File" [submenu]="fileMenu" #fileItem="ngMenuItem">File</div>
-
-  <div menu [parent]="fileItem" #fileMenu="ngMenu">
-    <div menu-item value="New">
-      <span menu-item-icon>article</span>
-      <span menu-item-text>New</span>
-      <span menu-item-shortcut>⌘N</span>
-    </div>
-
-    <div menu-item value="Open">
-      <span menu-item-icon>folder</span>
-      <span menu-item-text>Open</span>
-      <span menu-item-shortcut>⌘O</span>
-    </div>
-
-    <div menu-item value="Make a copy">
-      <span menu-item-icon>file_copy</span>
-      <span menu-item-text>Make a copy</span>
-    </div>
-
-    <div role="separator" class="example-menu-item-separator"></div>
-
-    <div menu-item value="Share" #shareItem="ngMenuItem" [submenu]="shareMenu">
-      <span menu-item-icon>person_add</span>
-      <span menu-item-text>Share</span>
-      <span menu-item-icon class="example-arrow">arrow_right</span>
-    </div>
-
-    <div menu [parent]="shareItem" #shareMenu="ngMenu">
-      <div menu-item value="Share with others">
-        <span menu-item-icon>person_add</span>
-        <span menu-item-text>Share with others</span>
-      </div>
-
-      <div menu-item value="Publish to web">
-        <span menu-item-icon>public</span>
-        <span menu-item-text>Publish to web</span>
-      </div>
-    </div>
-
-    <div menu-item value="Download">
-      <span menu-item-icon>download</span>
-      <span menu-item-text>Download</span>
-    </div>
-
-    <div menu-item value="Print">
-      <span menu-item-icon>print</span>
-      <span menu-item-text>Print</span>
-    </div>
-
-    <div role="separator" class="example-menu-item-separator"></div>
-
-    <div menu-item value="Rename">
-      <span menu-item-icon>edit</span>
-      <span menu-item-text>Rename</span>
-    </div>
-
-    <div menu-item value="Delete">
-      <span menu-item-icon>delete</span>
-      <span menu-item-text>Move to trash</span>
-    </div>
-  </div>
+<div ng-menu-bar>
+  <div ng-menu-bar-item value="File" [submenu]="fileMenu">File</div>
+
+  <div ng-menu #fileMenu="ngMenu">
+    <ng-template ngMenuContent>
+      <div ng-menu-item value="New">
+        <span ng-menu-item-icon>article</span>
+        <span ng-menu-item-text>New</span>
+        <span ng-menu-item-shortcut>⌘N</span>
+      </div>
 
-  <div menu-bar-item value="Edit" #editItem="ngMenuItem" [submenu]="editMenu">Edit</div>
-
-  <div menu [parent]="editItem" #editMenu="ngMenu">
-    <div menu-item value="Undo">
-      <span menu-item-icon>undo</span>
-      <span menu-item-text>Undo</span>
-      <span menu-item-shortcut>⌘Z</span>
-    </div>
-
-    <div menu-item value="Redo">
-      <span menu-item-icon>redo</span>
-      <span menu-item-text>Redo</span>
-      <span menu-item-shortcut>⌘Y</span>
-    </div>
-
-    <div role="separator" class="example-menu-item-separator"></div>
-
-    <div menu-item value="Cut">
-      <span menu-item-icon>content_cut</span>
-      <span menu-item-text>Cut</span>
-      <span menu-item-shortcut>⌘X</span>
-    </div>
-
-    <div menu-item value="Copy">
-      <span menu-item-icon>content_copy</span>
-      <span menu-item-text>Copy</span>
-      <span menu-item-shortcut>⌘C</span>
-    </div>
-
-    <div menu-item value="Paste">
-      <span menu-item-icon>content_paste</span>
-      <span menu-item-text>Paste</span>
-      <span menu-item-shortcut>⌘V</span>
-    </div>
-
-    <div role="separator" class="example-menu-item-separator"></div>
-
-    <div menu-item value="Find and replace">
-      <span menu-item-icon>find_replace</span>
-      <span menu-item-text>Find and replace</span>
-      <span menu-item-shortcut>⇧⌘H</span>
-    </div>
-  </div>
+      <div ng-menu-item value="Open">
+        <span ng-menu-item-icon>folder</span>
+        <span ng-menu-item-text>Open</span>
+        <span ng-menu-item-shortcut>⌘O</span>
+      </div>
 
-  <div menu-bar-item value="View" #viewItem="ngMenuItem" [submenu]="viewMenu">View</div>
+      <div ng-menu-item value="Make a copy">
+        <span ng-menu-item-icon>file_copy</span>
+        <span ng-menu-item-text>Make a copy</span>
+      </div>
 
-  <div menu [parent]="viewItem" #viewMenu="ngMenu">
-    <div menu-item value="Show print layout" [disabled]="true">
-      <span menu-item-icon>check</span>
-      <span menu-item-text>Show print layout</span>
-    </div>
+      <div role="separator" class="example-menu-item-separator"></div>
+
+      <div ng-menu-item value="Share" [submenu]="shareMenu">
+        <span ng-menu-item-icon>person_add</span>
+        <span ng-menu-item-text>Share</span>
+        <span ng-menu-item-icon class="example-arrow">arrow_right</span>
+      </div>
 
-    <div menu-item value="Show ruler" [disabled]="true">
-      <span menu-item-icon>check</span>
-      <span menu-item-text>Show ruler</span>
-    </div>
+      <div ng-menu #shareMenu="ngMenu">
+        <ng-template ngMenuContent>
+          <div ng-menu-item value="Share with others">
+            <span ng-menu-item-icon>person_add</span>
+            <span ng-menu-item-text>Share with others</span>
+          </div>
+
+          <div ng-menu-item value="Publish to web">
+            <span ng-menu-item-icon>public</span>
+            <span ng-menu-item-text>Publish to web</span>
+          </div>
+        </ng-template>
+      </div>
 
-    <div role="separator" class="example-menu-item-separator"></div>
+      <div ng-menu-item value="Download">
+        <span ng-menu-item-icon>download</span>
+        <span ng-menu-item-text>Download</span>
+      </div>
 
-    <div menu-item value="Zoom in">
-      <span menu-item-text>Zoom in</span>
-      <span menu-item-shortcut>⌘+</span>
-    </div>
+      <div ng-menu-item value="Print">
+        <span ng-menu-item-icon>print</span>
+        <span ng-menu-item-text>Print</span>
+      </div>
 
-    <div menu-item value="Zoom out">
-      <span menu-item-text>Zoom out</span>
-      <span menu-item-shortcut>⌘-</span>
-    </div>
+      <div role="separator" class="example-menu-item-separator"></div>
 
-    <div role="separator" class="example-menu-item-separator"></div>
+      <div ng-menu-item value="Rename">
+        <span ng-menu-item-icon>edit</span>
+        <span ng-menu-item-text>Rename</span>
+      </div>
 
-    <div menu-item value="Full screen">
-      <span menu-item-text>Full screen</span>
-    </div>
+      <div ng-menu-item value="Delete">
+        <span ng-menu-item-icon>delete</span>
+        <span ng-menu-item-text>Move to trash</span>
+      </div>
+    </ng-template>
   </div>
 
-  <div menu-bar-item value="Insert" [submenu]="insertMenu" #insertItem="ngMenuItem">Insert</div>
+  <div ng-menu-bar-item value="Edit" [submenu]="editMenu">Edit</div>
 
-  <div menu [parent]="insertItem" #insertMenu="ngMenu">
-    <div menu-item value="Image" #imageItem="ngMenuItem" [submenu]="imageMenu">
-      <span menu-item-icon>image</span>
-      <span menu-item-text>Image</span>
-      <span menu-item-icon class="example-arrow">arrow_right</span>
-    </div>
+  <div ng-menu #editMenu="ngMenu">
+    <ng-template ngMenuContent>
+      <div ng-menu-item value="Undo">
+        <span ng-menu-item-icon>undo</span>
+        <span ng-menu-item-text>Undo</span>
+        <span ng-menu-item-shortcut>⌘Z</span>
+      </div>
 
-    <div menu [parent]="imageItem" #imageMenu="ngMenu">
-      <div menu-item value="Upload from computer">
-        <span menu-item-icon>upload</span>
-        <span menu-item-text>Upload from computer</span>
+      <div ng-menu-item value="Redo">
+        <span ng-menu-item-icon>redo</span>
+        <span ng-menu-item-text>Redo</span>
+        <span ng-menu-item-shortcut>⌘Y</span>
       </div>
 
-      <div menu-item value="Search the web">
-        <span menu-item-icon>search</span>
-        <span menu-item-text>Search the web</span>
+      <div role="separator" class="example-menu-item-separator"></div>
+
+      <div ng-menu-item value="Cut">
+        <span ng-menu-item-icon>content_cut</span>
+        <span ng-menu-item-text>Cut</span>
+        <span ng-menu-item-shortcut>⌘X</span>
       </div>
 
-      <div menu-item value="By URL">
-        <span menu-item-icon>link</span>
-        <span menu-item-text>By URL</span>
+      <div ng-menu-item value="Copy">
+        <span ng-menu-item-icon>content_copy</span>
+        <span ng-menu-item-text>Copy</span>
+        <span ng-menu-item-shortcut>⌘C</span>
       </div>
-    </div>
 
-    <div menu-item value="Table">
-      <span menu-item-icon>table_chart</span>
-      <span menu-item-text>Table</span>
-    </div>
+      <div ng-menu-item value="Paste">
+        <span ng-menu-item-icon>content_paste</span>
+        <span ng-menu-item-text>Paste</span>
+        <span ng-menu-item-shortcut>⌘V</span>
+      </div>
 
-    <div menu-item value="Chart" #chartItem="ngMenuItem" [submenu]="chartMenu">
-      <span menu-item-icon>insert_chart</span>
-      <span menu-item-text>Chart</span>
-      <span menu-item-icon class="example-arrow">arrow_right</span>
-    </div>
+      <div role="separator" class="example-menu-item-separator"></div>
 
-    <div menu [parent]="chartItem" #chartMenu="ngMenu">
-      <div menu-item value="Bar">
-        <span menu-item-icon>bar_chart</span>
-        <span menu-item-text>Bar</span>
+      <div ng-menu-item value="Find and replace">
+        <span ng-menu-item-icon>find_replace</span>
+        <span ng-menu-item-text>Find and replace</span>
+        <span ng-menu-item-shortcut>⇧⌘H</span>
       </div>
+    </ng-template>
+  </div>
 
-      <div menu-item value="Column">
-        <span menu-item-icon>insert_chart</span>
-        <span menu-item-text>Column</span>
-      </div>
+  <div ng-menu-bar-item value="View" [submenu]="viewMenu">View</div>
 
-      <div menu-item value="Line">
-        <span menu-item-icon>show_chart</span>
-        <span menu-item-text>Line</span>
+  <div ng-menu #viewMenu="ngMenu">
+    <ng-template ngMenuContent>
+      <div ng-menu-item value="Show print layout" [disabled]="true">
+        <span ng-menu-item-icon>check</span>
+        <span ng-menu-item-text>Show print layout</span>
       </div>
 
-      <div menu-item value="Pie">
-        <span menu-item-icon>pie_chart</span>
-        <span menu-item-text>Pie</span>
+      <div ng-menu-item value="Show ruler" [disabled]="true">
+        <span ng-menu-item-icon>check</span>
+        <span ng-menu-item-text>Show ruler</span>
       </div>
-    </div>
-
-    <div menu-item value="Horizontal line">
-      <span menu-item-icon>horizontal_rule</span>
-      <span menu-item-text>Horizontal line</span>
-    </div>
-  </div>
 
-  <div menu-bar-item value="Format" [submenu]="formatMenu" #formatItem="ngMenuItem">Format</div>
+      <div role="separator" class="example-menu-item-separator"></div>
 
-  <div menu [parent]="formatItem" #formatMenu="ngMenu">
-    <div menu-item value="Text" [submenu]="textMenu" #textItem="ngMenuItem">
-      <span menu-item-icon>format_bold</span>
-      <span menu-item-text>Text</span>
-      <span menu-item-icon class="example-arrow">arrow_right</span>
-    </div>
+      <div ng-menu-item value="Zoom in">
+        <span ng-menu-item-text>Zoom in</span>
+        <span ng-menu-item-shortcut>⌘+</span>
+      </div>
 
-    <div menu #textMenu="ngMenu" [parent]="textItem">
-      <div menu-item value="Bold">
-        <span menu-item-icon>format_bold</span>
-        <span menu-item-text>Bold</span>
-        <span menu-item-shortcut>⌘B</span>
+      <div ng-menu-item value="Zoom out">
+        <span ng-menu-item-text>Zoom out</span>
+        <span ng-menu-item-shortcut>⌘-</span>
       </div>
 
-      <div menu-item value="Italic">
-        <span menu-item-icon>format_italic</span>
-        <span menu-item-text>Italic</span>
-        <span menu-item-shortcut>⌘I</span>
+      <div role="separator" class="example-menu-item-separator"></div>
+
+      <div ng-menu-item value="Full screen">
+        <span ng-menu-item-text>Full screen</span>
       </div>
+    </ng-template>
+  </div>
+
+  <div ng-menu-bar-item value="Insert" [submenu]="insertMenu">Insert</div>
 
-      <div menu-item value="Underline">
-        <span menu-item-icon>format_underlined</span>
-        <span menu-item-text>Underline</span>
-        <span menu-item-shortcut>⌘U</span>
+  <div ng-menu #insertMenu="ngMenu">
+    <ng-template ngMenuContent>
+      <div ng-menu-item value="Image" [submenu]="imageMenu">
+        <span ng-menu-item-icon>image</span>
+        <span ng-menu-item-text>Image</span>
+        <span ng-menu-item-icon class="example-arrow">arrow_right</span>
       </div>
 
-      <div menu-item value="Strikethrough">
-        <span menu-item-icon>strikethrough_s</span>
-        <span menu-item-text>Strikethrough</span>
-        <span menu-item-shortcut>⇧⌘X</span>
+      <div ng-menu #imageMenu="ngMenu">
+        <ng-template ngMenuContent>
+          <div ng-menu-item value="Upload from computer">
+            <span ng-menu-item-icon>upload</span>
+            <span ng-menu-item-text>Upload from computer</span>
+          </div>
+
+          <div ng-menu-item value="Search the web">
+            <span ng-menu-item-icon>search</span>
+            <span ng-menu-item-text>Search the web</span>
+          </div>
+
+          <div ng-menu-item value="By URL">
+            <span ng-menu-item-icon>link</span>
+            <span ng-menu-item-text>By URL</span>
+          </div>
+        </ng-template>
       </div>
 
-      <div role="separator" class="example-menu-item-separator"></div>
+      <div ng-menu-item value="Table">
+        <span ng-menu-item-icon>table_chart</span>
+        <span ng-menu-item-text>Table</span>
+      </div>
 
-      <div menu-item value="Size" [submenu]="sizeMenu" #sizeItem="ngMenuItem">
-        <span menu-item-text>Size</span>
-        <span menu-item-icon class="example-arrow">arrow_right</span>
+      <div ng-menu-item value="Chart" [submenu]="chartMenu">
+        <span ng-menu-item-icon>insert_chart</span>
+        <span ng-menu-item-text>Chart</span>
+        <span ng-menu-item-icon class="example-arrow">arrow_right</span>
       </div>
 
-      <div menu #sizeMenu="ngMenu" [parent]="sizeItem">
-        <div menu-item value="Increase font size">
-          <span menu-item-text>Increase font size</span>
-          <span menu-item-shortcut>⇧⌘.</span>
-        </div>
+      <div ng-menu #chartMenu="ngMenu">
+        <ng-template ngMenuContent>
+          <div ng-menu-item value="Bar">
+            <span ng-menu-item-icon>bar_chart</span>
+            <span ng-menu-item-text>Bar</span>
+          </div>
+
+          <div ng-menu-item value="Column">
+            <span ng-menu-item-icon>insert_chart</span>
+            <span ng-menu-item-text>Column</span>
+          </div>
+
+          <div ng-menu-item value="Line">
+            <span ng-menu-item-icon>show_chart</span>
+            <span ng-menu-item-text>Line</span>
+          </div>
+
+          <div ng-menu-item value="Pie">
+            <span ng-menu-item-icon>pie_chart</span>
+            <span ng-menu-item-text>Pie</span>
+          </div>
+        </ng-template>
+      </div>
 
-        <div menu-item value="Decrease font size">
-          <span menu-item-text>Decrease font size</span>
-          <span menu-item-shortcut>⇧⌘,</span>
-        </div>
+      <div ng-menu-item value="Horizontal line">
+        <span ng-menu-item-icon>horizontal_rule</span>
+        <span ng-menu-item-text>Horizontal line</span>
       </div>
-    </div>
+    </ng-template>
+  </div>
 
-    <div menu-item value="Paragraph styles" [submenu]="paragraphMenu" #paragraphItem="ngMenuItem">
-      <span menu-item-icon>format_align_justify</span>
-      <span menu-item-text>Paragraph styles</span>
-      <span menu-item-icon class="example-arrow">arrow_right</span>
-    </div>
+  <div ng-menu-bar-item value="Format" [submenu]="formatMenu">Format</div>
 
-    <div menu #paragraphMenu="ngMenu" [parent]="paragraphItem">
-      <div menu-item value="Normal text">Normal text</div>
-      <div menu-item value="Heading 1">Heading 1</div>
-      <div menu-item value="Heading 2">Heading 2</div>
-    </div>
+  <div ng-menu #formatMenu="ngMenu">
+    <ng-template ngMenuContent>
+      <div ng-menu-item value="Text" [submenu]="textMenu">
+        <span ng-menu-item-icon>format_bold</span>
+        <span ng-menu-item-text>Text</span>
+        <span ng-menu-item-icon class="example-arrow">arrow_right</span>
+      </div>
 
-    <div menu-item [submenu]="alignMenu" value="Align & indent" #alignItem="ngMenuItem">
-      <span menu-item-icon>format_indent_increase</span>
-      <span menu-item-text>Align & indent</span>
-      <span menu-item-icon class="example-arrow">arrow_right</span>
-    </div>
+      <div ng-menu #textMenu="ngMenu">
+        <ng-template ngMenuContent>
+          <div ng-menu-item value="Bold">
+            <span ng-menu-item-icon>format_bold</span>
+            <span ng-menu-item-text>Bold</span>
+            <span ng-menu-item-shortcut>⌘B</span>
+          </div>
+
+          <div ng-menu-item value="Italic">
+            <span ng-menu-item-icon>format_italic</span>
+            <span ng-menu-item-text>Italic</span>
+            <span ng-menu-item-shortcut>⌘I</span>
+          </div>
+
+          <div ng-menu-item value="Underline">
+            <span ng-menu-item-icon>format_underlined</span>
+            <span ng-menu-item-text>Underline</span>
+            <span ng-menu-item-shortcut>⌘U</span>
+          </div>
+
+          <div ng-menu-item value="Strikethrough">
+            <span ng-menu-item-icon>strikethrough_s</span>
+            <span ng-menu-item-text>Strikethrough</span>
+            <span ng-menu-item-shortcut>⇧⌘X</span>
+          </div>
+
+          <div role="separator" class="example-menu-item-separator"></div>
+
+          <div ng-menu-item value="Size" [submenu]="sizeMenu">
+            <span ng-menu-item-text>Size</span>
+            <span ng-menu-item-icon class="example-arrow">arrow_right</span>
+          </div>
+
+          <div ng-menu #sizeMenu="ngMenu">
+            <ng-template ngMenuContent>
+              <div ng-menu-item value="Increase font size">
+                <span ng-menu-item-text>Increase font size</span>
+                <span ng-menu-item-shortcut>⇧⌘.</span>
+              </div>
+
+              <div ng-menu-item value="Decrease font size">
+                <span ng-menu-item-text>Decrease font size</span>
+                <span ng-menu-item-shortcut>⇧⌘,</span>
+              </div>
+            </ng-template>
+          </div>
+        </ng-template>
+      </div>
 
-    <div menu #alignMenu="ngMenu" [parent]="alignItem">
-      <div menu-item value="Align left">
-        <span menu-item-icon>format_align_left</span>
-        <span menu-item-text>Align left</span>
+      <div
+        ng-menu-item
+        value="Paragraph styles"
+        [submenu]="paragraphMenu"
+       
+      >
+        <span ng-menu-item-icon>format_align_justify</span>
+        <span ng-menu-item-text>Paragraph styles</span>
+        <span ng-menu-item-icon class="example-arrow">arrow_right</span>
       </div>
 
-      <div menu-item value="Align center">
-        <span menu-item-icon>format_align_center</span>
-        <span menu-item-text>Align center</span>
+      <div ng-menu #paragraphMenu="ngMenu">
+        <ng-template ngMenuContent>
+          <div ng-menu-item value="Normal text">Normal text</div>
+          <div ng-menu-item value="Heading 1">Heading 1</div>
+          <div ng-menu-item value="Heading 2">Heading 2</div>
+        </ng-template>
       </div>
 
-      <div menu-item value="Align right">
-        <span menu-item-icon>format_align_right</span>
-        <span menu-item-text>Align right</span>
+      <div ng-menu-item [submenu]="alignMenu" value="Align & indent">
+        <span ng-menu-item-icon>format_indent_increase</span>
+        <span ng-menu-item-text>Align & indent</span>
+        <span ng-menu-item-icon class="example-arrow">arrow_right</span>
       </div>
 
-      <div menu-item value="Justify">
-        <span menu-item-icon>format_align_justify</span>
-        <span menu-item-text>Justify</span>
+      <div ng-menu #alignMenu="ngMenu">
+        <ng-template ngMenuContent>
+          <div ng-menu-item value="Align left">
+            <span ng-menu-item-icon>format_align_left</span>
+            <span ng-menu-item-text>Align left</span>
+          </div>
+
+          <div ng-menu-item value="Align center">
+            <span ng-menu-item-icon>format_align_center</span>
+            <span ng-menu-item-text>Align center</span>
+          </div>
+
+          <div ng-menu-item value="Align right">
+            <span ng-menu-item-icon>format_align_right</span>
+            <span ng-menu-item-text>Align right</span>
+          </div>
+
+          <div ng-menu-item value="Justify">
+            <span ng-menu-item-icon>format_align_justify</span>
+            <span ng-menu-item-text>Justify</span>
+          </div>
+        </ng-template>
       </div>
-    </div>
+    </ng-template>
   </div>
 </div>
diff --git a/src/components-examples/aria/menu/menu-bar/menu-bar-example.ts b/src/components-examples/aria/menu/menu-bar/menu-bar-example.ts
index fd3aa5768f7d..912d2eed22ba 100644
--- a/src/components-examples/aria/menu/menu-bar/menu-bar-example.ts
+++ b/src/components-examples/aria/menu/menu-bar/menu-bar-example.ts
@@ -8,6 +8,7 @@ import {
   SimpleMenuItemShortcut,
   SimpleMenuItemText,
 } from '../simple-menu';
+import {MenuContent} from '@angular/aria/menu';
 
 /** @title Menu bar example. */
 @Component({
@@ -24,6 +25,7 @@ import {
     SimpleMenuItemIcon,
     SimpleMenuItemText,
     SimpleMenuItemShortcut,
+    MenuContent,
   ],
 })
 export class MenuBarExample {}
diff --git a/src/components-examples/aria/menu/menu-context/menu-context-example.html b/src/components-examples/aria/menu/menu-context/menu-context-example.html
index 7505025ffd42..cf2ee2fea501 100644
--- a/src/components-examples/aria/menu/menu-context/menu-context-example.html
+++ b/src/components-examples/aria/menu/menu-context/menu-context-example.html
@@ -3,39 +3,43 @@
 </div>
 
 <div
-  menu
+  ng-menu
   #contextMenu
   (click)="close($event)"
   (focusout)="close($event)"
   class="example-context-menu"
 >
-  <div menu-item value="Cut">
-    <span menu-item-icon>content_cut</span>
-    <span menu-item-text>Cut</span>
-    <span menu-item-shortcut>⌘X</span>
-  </div>
-
-  <div menu-item value="Copy">
-    <span menu-item-icon>content_copy</span>
-    <span menu-item-text>Copy</span>
-    <span menu-item-shortcut>⌘C</span>
-  </div>
+  <ng-template ngMenuContent>
+    <div ng-menu-item value="Cut">
+      <span ng-menu-item-icon>content_cut</span>
+      <span ng-menu-item-text>Cut</span>
+      <span ng-menu-item-shortcut>⌘X</span>
+    </div>
 
-  <div menu-item value="Paste" [submenu]="pasteMenu" #pasteItem="ngMenuItem">
-    <span menu-item-icon>content_paste</span>
-    <span menu-item-text>Paste</span>
-    <span menu-item-icon class="example-arrow">arrow_right</span>
-  </div>
+    <div ng-menu-item value="Copy">
+      <span ng-menu-item-icon>content_copy</span>
+      <span ng-menu-item-text>Copy</span>
+      <span ng-menu-item-shortcut>⌘C</span>
+    </div>
 
-  <div menu #pasteMenu="ngMenu" [parent]="pasteItem">
-    <div menu-item value="Paste as plain text">
-      <span menu-item-text>Paste as plain text</span>
-      <span menu-item-shortcut>⌘⇧V</span>
+    <div ng-menu-item value="Paste" [submenu]="pasteMenu">
+      <span ng-menu-item-icon>content_paste</span>
+      <span ng-menu-item-text>Paste</span>
+      <span ng-menu-item-icon class="example-arrow">arrow_right</span>
     </div>
 
-    <div menu-item value="Paste without formatting">
-      <span menu-item-text>Paste without formatting</span>
-      <span menu-item-shortcut>⌘⇧V</span>
+    <div ng-menu #pasteMenu="ngMenu">
+      <ng-template ngMenuContent>
+        <div ng-menu-item value="Paste as plain text">
+          <span ng-menu-item-text>Paste as plain text</span>
+          <span ng-menu-item-shortcut>⌘⇧V</span>
+        </div>
+
+        <div ng-menu-item value="Paste without formatting">
+          <span ng-menu-item-text>Paste without formatting</span>
+          <span ng-menu-item-shortcut>⌘⇧V</span>
+        </div>
+      </ng-template>
     </div>
-  </div>
+  </ng-template>
 </div>
diff --git a/src/components-examples/aria/menu/menu-context/menu-context-example.ts b/src/components-examples/aria/menu/menu-context/menu-context-example.ts
index ecc94334ecee..8e5c07bdae5a 100644
--- a/src/components-examples/aria/menu/menu-context/menu-context-example.ts
+++ b/src/components-examples/aria/menu/menu-context/menu-context-example.ts
@@ -1,5 +1,5 @@
 import {Component, viewChild} from '@angular/core';
-import {Menu} from '@angular/aria/menu';
+import {Menu, MenuContent} from '@angular/aria/menu';
 import {
   SimpleMenu,
   SimpleMenuItem,
@@ -21,6 +21,7 @@ import {
     SimpleMenuItemText,
     SimpleMenuItemIcon,
     SimpleMenuItemShortcut,
+    MenuContent,
   ],
 })
 export class MenuContextExample {
diff --git a/src/components-examples/aria/menu/menu-standalone/menu-standalone-example.html b/src/components-examples/aria/menu/menu-standalone/menu-standalone-example.html
index 6a3419830193..ad7fd866e21b 100644
--- a/src/components-examples/aria/menu/menu-standalone/menu-standalone-example.html
+++ b/src/components-examples/aria/menu/menu-standalone/menu-standalone-example.html
@@ -1,61 +1,65 @@
 <div ngMenu class="example-menu">
-  <span id="security-label" class="example-menu-heading">SECURITY</span>
+  <ng-template ngMenuContent>
+    <span id="security-label" class="example-menu-heading">SECURITY</span>
 
-  <div role="group" aria-labelledby="security-label">
-    <div menu-item value="Change password">
-      <span menu-item-icon>lock_open</span>
-      <span menu-item-text>Change password</span>
-    </div>
-
-    <div menu-item value="Two-factor authentication">
-      <span menu-item-icon>security_key</span>
-      <span menu-item-text>Two-factor authentication</span>
-    </div>
-
-    <div menu-item value="Reset" [submenu]="updateMenu" #updateItem="ngMenuItem">
-      <span menu-item-icon>refresh</span>
-      <span menu-item-text>Reset</span>
-      <span menu-item-icon class="example-arrow">arrow_right</span>
-    </div>
+    <div role="group" aria-labelledby="security-label">
+      <div ng-menu-item value="Change password">
+        <span ng-menu-item-icon>lock_open</span>
+        <span ng-menu-item-text>Change password</span>
+      </div>
 
-    <div menu #updateMenu="ngMenu" [parent]="updateItem">
-      <div menu-item value="Email address">
-        <span menu-item-icon>email</span>
-        <span menu-item-text>Email address</span>
+      <div ng-menu-item value="Two-factor authentication">
+        <span ng-menu-item-icon>security_key</span>
+        <span ng-menu-item-text>Two-factor authentication</span>
       </div>
 
-      <div menu-item value="Phone number">
-        <span menu-item-icon>phone</span>
-        <span menu-item-text>Phone number</span>
+      <div ng-menu-item value="Reset" [submenu]="updateMenu">
+        <span ng-menu-item-icon>refresh</span>
+        <span ng-menu-item-text>Reset</span>
+        <span ng-menu-item-icon class="example-arrow">arrow_right</span>
       </div>
 
-      <div menu-item value="Password">
-        <span menu-item-icon>vpn_key</span>
-        <span menu-item-text>Password</span>
+      <div ng-menu #updateMenu="ngMenu">
+        <ng-template ngMenuContent>
+          <div ng-menu-item value="Email address">
+            <span ng-menu-item-icon>email</span>
+            <span ng-menu-item-text>Email address</span>
+          </div>
+
+          <div ng-menu-item value="Phone number">
+            <span ng-menu-item-icon>phone</span>
+            <span ng-menu-item-text>Phone number</span>
+          </div>
+
+          <div ng-menu-item value="Password">
+            <span ng-menu-item-icon>vpn_key</span>
+            <span ng-menu-item-text>Password</span>
+          </div>
+        </ng-template>
       </div>
     </div>
-  </div>
 
-  <div role="separator" class="example-menu-item-separator"></div>
+    <div role="separator" class="example-menu-item-separator"></div>
 
-  <span id="help-label" class="example-menu-heading">HELP</span>
+    <span id="help-label" class="example-menu-heading">HELP</span>
 
-  <div role="group" aria-labelledby="help-label">
-    <div menu-item value="Support">
-      <span menu-item-icon>help</span>
-      <span menu-item-text>Support</span>
-    </div>
+    <div role="group" aria-labelledby="help-label">
+      <div ng-menu-item value="Support">
+        <span ng-menu-item-icon>help</span>
+        <span ng-menu-item-text>Support</span>
+      </div>
 
-    <div menu-item value="Feedback">
-      <span menu-item-icon>feedback</span>
-      <span menu-item-text>Feedback</span>
+      <div ng-menu-item value="Feedback">
+        <span ng-menu-item-icon>feedback</span>
+        <span ng-menu-item-text>Feedback</span>
+      </div>
     </div>
-  </div>
 
-  <div role="separator" class="example-menu-item-separator"></div>
+    <div role="separator" class="example-menu-item-separator"></div>
 
-  <div menu-item value="Logout">
-    <span menu-item-icon>logout</span>
-    <span menu-item-text>Logout</span>
-  </div>
+    <div ng-menu-item value="Logout">
+      <span ng-menu-item-icon>logout</span>
+      <span ng-menu-item-text>Logout</span>
+    </div>
+  </ng-template>
 </div>
diff --git a/src/components-examples/aria/menu/menu-standalone/menu-standalone-example.ts b/src/components-examples/aria/menu/menu-standalone/menu-standalone-example.ts
index e2c12304b18a..f720e1c4a8e6 100644
--- a/src/components-examples/aria/menu/menu-standalone/menu-standalone-example.ts
+++ b/src/components-examples/aria/menu/menu-standalone/menu-standalone-example.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {Menu} from '@angular/aria/menu';
+import {Menu, MenuContent} from '@angular/aria/menu';
 import {SimpleMenu, SimpleMenuItem, SimpleMenuItemIcon, SimpleMenuItemText} from '../simple-menu';
 
 /**
@@ -11,6 +11,6 @@ import {SimpleMenu, SimpleMenuItem, SimpleMenuItemIcon, SimpleMenuItemText} from
   templateUrl: 'menu-standalone-example.html',
   styleUrl: '../menu-example.css',
   standalone: true,
-  imports: [Menu, SimpleMenu, SimpleMenuItem, SimpleMenuItemIcon, SimpleMenuItemText],
+  imports: [Menu, MenuContent, SimpleMenu, SimpleMenuItem, SimpleMenuItemIcon, SimpleMenuItemText],
 })
 export class MenuStandaloneExample {}
diff --git a/src/components-examples/aria/menu/menu-trigger/menu-trigger-example.html b/src/components-examples/aria/menu/menu-trigger/menu-trigger-example.html
index 4c857c37e6ca..686b5d81b85e 100644
--- a/src/components-examples/aria/menu/menu-trigger/menu-trigger-example.html
+++ b/src/components-examples/aria/menu/menu-trigger/menu-trigger-example.html
@@ -1,63 +1,66 @@
 <button
   ngMenuTrigger
-  [submenu]="formatMenu"
+  [menu]="formatMenu"
   aria-label="Open menu"
-  #trigger="ngMenuTrigger"
   class="example-menu-trigger"
 >
   <span aria-hidden="true" class="material-symbols-outlined">more_vert</span>
 </button>
 
-<div menu [parent]="trigger" #formatMenu="ngMenu">
-  <div menu-item value="Mark as read">
-    <span menu-item-icon>mark_email_read</span>
-    <span menu-item-text>Mark as read</span>
-  </div>
-
-  <div menu-item value="Snooze">
-    <span menu-item-icon>snooze</span>
-    <span menu-item-text>Snooze</span>
-  </div>
-
-  <div role="separator" aria-orientation="horizontal" class="example-menu-item-separator"></div>
-
-  <div menu-item value="Categorize" #categorizeItem="ngMenuItem" [submenu]=" categorizeMenu">
-    <span menu-item-icon>category</span>
-    <span menu-item-text>Categorize</span>
-    <span menu-item-icon class="example-arrow">arrow_right</span>
-  </div>
-
-  <div menu [parent]="categorizeItem" #categorizeMenu="ngMenu">
-    <div menu-item value="Mark as important">
-      <span menu-item-icon>label_important</span>
-      <span menu-item-text>Mark as important</span>
+<div ng-menu #formatMenu="ngMenu">
+  <ng-template ngMenuContent>
+    <div ng-menu-item value="Mark as read">
+      <span ng-menu-item-icon>mark_email_read</span>
+      <span ng-menu-item-text>Mark as read</span>
     </div>
 
-    <div menu-item value="Star">
-      <span menu-item-icon>star</span>
-      <span menu-item-text>Star</span>
+    <div ng-menu-item value="Snooze">
+      <span ng-menu-item-icon>snooze</span>
+      <span ng-menu-item-text>Snooze</span>
     </div>
 
-    <div menu-item value="Label">
-      <span menu-item-icon>label</span>
-      <span menu-item-text>Label</span>
+    <div role="separator" aria-orientation="horizontal" class="example-menu-item-separator"></div>
+
+    <div ng-menu-item value="Categorize" [submenu]=" categorizeMenu">
+      <span ng-menu-item-icon>category</span>
+      <span ng-menu-item-text>Categorize</span>
+      <span ng-menu-item-icon class="example-arrow">arrow_right</span>
+    </div>
+
+    <div ng-menu #categorizeMenu="ngMenu">
+      <ng-template ngMenuContent>
+        <div ng-menu-item value="Mark as important">
+          <span ng-menu-item-icon>label_important</span>
+          <span ng-menu-item-text>Mark as important</span>
+        </div>
+
+        <div ng-menu-item value="Star">
+          <span ng-menu-item-icon>star</span>
+          <span ng-menu-item-text>Star</span>
+        </div>
+
+        <div ng-menu-item value="Label">
+          <span ng-menu-item-icon>label</span>
+          <span ng-menu-item-text>Label</span>
+        </div>
+      </ng-template>
     </div>
-  </div>
 
-  <div role="separator" aria-orientation="horizontal" class="example-menu-item-separator"></div>
+    <div role="separator" aria-orientation="horizontal" class="example-menu-item-separator"></div>
 
-  <div menu-item value="Archive">
-    <span menu-item-icon>archive</span>
-    <span menu-item-text>Archive</span>
-  </div>
+    <div ng-menu-item value="Archive">
+      <span ng-menu-item-icon>archive</span>
+      <span ng-menu-item-text>Archive</span>
+    </div>
 
-  <div menu-item value="Report spam">
-    <span menu-item-icon>report</span>
-    <span menu-item-text>Report spam</span>
-  </div>
+    <div ng-menu-item value="Report spam">
+      <span ng-menu-item-icon>report</span>
+      <span ng-menu-item-text>Report spam</span>
+    </div>
 
-  <div menu-item value="Delete">
-    <span menu-item-icon>delete</span>
-    <span menu-item-text>Delete</span>
-  </div>
+    <div ng-menu-item value="Delete">
+      <span ng-menu-item-icon>delete</span>
+      <span ng-menu-item-text>Delete</span>
+    </div>
+  </ng-template>
 </div>
diff --git a/src/components-examples/aria/menu/menu-trigger/menu-trigger-example.ts b/src/components-examples/aria/menu/menu-trigger/menu-trigger-example.ts
index 0cf84e867441..b4acbdacae88 100644
--- a/src/components-examples/aria/menu/menu-trigger/menu-trigger-example.ts
+++ b/src/components-examples/aria/menu/menu-trigger/menu-trigger-example.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MenuTrigger} from '@angular/aria/menu';
+import {MenuTrigger, MenuContent} from '@angular/aria/menu';
 import {SimpleMenu, SimpleMenuItem, SimpleMenuItemIcon, SimpleMenuItemText} from '../simple-menu';
 
 /** @title Menu trigger example. */
@@ -9,6 +9,13 @@ import {SimpleMenu, SimpleMenuItem, SimpleMenuItemIcon, SimpleMenuItemText} from
   templateUrl: 'menu-trigger-example.html',
   styleUrl: '../menu-example.css',
   standalone: true,
-  imports: [SimpleMenu, SimpleMenuItem, SimpleMenuItemIcon, SimpleMenuItemText, MenuTrigger],
+  imports: [
+    MenuContent,
+    MenuTrigger,
+    SimpleMenu,
+    SimpleMenuItem,
+    SimpleMenuItemIcon,
+    SimpleMenuItemText,
+  ],
 })
 export class MenuTriggerExample {}
diff --git a/src/components-examples/aria/menu/simple-menu.ts b/src/components-examples/aria/menu/simple-menu.ts
index 17af13190dfc..d00a0651854b 100644
--- a/src/components-examples/aria/menu/simple-menu.ts
+++ b/src/components-examples/aria/menu/simple-menu.ts
@@ -2,8 +2,8 @@ import {Menu, MenuBar, MenuItem, MenuTrigger} from '@angular/aria/menu';
 import {afterRenderEffect, Directive, effect, inject} from '@angular/core';
 
 @Directive({
-  selector: '[menu]',
-  hostDirectives: [{directive: Menu, inputs: ['parent']}],
+  selector: '[ng-menu]',
+  hostDirectives: [{directive: Menu}],
   host: {
     class: 'example-menu',
     popover: 'manual',
@@ -49,14 +49,14 @@ export class SimpleMenu {
 }
 
 @Directive({
-  selector: '[menu-bar]',
+  selector: '[ng-menu-bar]',
   hostDirectives: [{directive: MenuBar}],
   host: {class: 'example-menu-bar'},
 })
 export class SimpleMenuBar {}
 
 @Directive({
-  selector: '[menu-bar-item]',
+  selector: '[ng-menu-bar-item]',
   hostDirectives: [{directive: MenuItem, inputs: ['value', 'submenu']}],
   host: {class: 'example-menu-bar-item'},
 })
@@ -69,7 +69,7 @@ export class SimpleMenuBarItem {
 }
 
 @Directive({
-  selector: '[menu-item]',
+  selector: '[ng-menu-item]',
   hostDirectives: [{directive: MenuItem, inputs: ['value', 'disabled', 'submenu']}],
   host: {class: 'example-menu-item'},
 })
@@ -82,7 +82,7 @@ export class SimpleMenuItem {
 }
 
 @Directive({
-  selector: '[menu-item-icon]',
+  selector: '[ng-menu-item-icon]',
   host: {
     'aria-hidden': 'true',
     class: 'example-icon material-symbols-outlined',
@@ -91,13 +91,13 @@ export class SimpleMenuItem {
 export class SimpleMenuItemIcon {}
 
 @Directive({
-  selector: '[menu-item-text]',
+  selector: '[ng-menu-item-text]',
   host: {class: 'example-menu-item-text'},
 })
 export class SimpleMenuItemText {}
 
 @Directive({
-  selector: '[menu-item-shortcut]',
+  selector: '[ng-menu-item-shortcut]',
   host: {
     'aria-hidden': 'true',
     class: 'example-menu-item-shortcut',