angular/components · error · Error

expected a reference to the parent menu

Error message

expected a reference to the parent menu

What it means

Nested CDK menu directives need a reference to their parent menu. throwMissingMenuReference is raised from _checkConfigured when a child menu item/group cannot inject its parent cdkMenu/cdkMenuBar reference. It ensures the menu hierarchy (for keyboard navigation and positioning) is intact.

Source

Thrown at src/cdk/menu/menu-errors.ts:22

 *
 * 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
 */

/**
 * Throws an exception when an instance of the PointerFocusTracker is not provided.
 * @docs-private
 */
export function throwMissingPointerFocusTracker() {
  throw Error('expected an instance of PointerFocusTracker to be provided');
}

/**
 * Throws an exception when a reference to the parent menu is not provided.
 * @docs-private
 */
export function throwMissingMenuReference() {
  throw Error('expected a reference to the parent menu');
}

View on GitHub (pinned to 0411926e7d)

Solutions

1. Wrap the item in a cdkMenu or cdkMenuBar ancestor so the parent reference is injectable.
2. Use cdkMenuTrigger's attached menu template (ng-template cdkMenu) so the submenu stays in the correct context.
3. If rendering via portal, pass ViewContainerRef/Injector from the menu context so dependency injection resolves the parent menu.
4. Verify the DOM ancestry in devtools: the item must be inside the element carrying cdkMenu/cdkMenuBar.

Example fix

// before
<ng-container *ngIf="show">
  <button cdkMenuItem>Item</button> <!-- outside cdkMenu -->
</ng-container>
// after
<div cdkMenu>
  <ng-container *ngIf="show">
    <button cdkMenuItem>Item</button>
  </ng-container>
</div>

const parentMenu = injector.get(CdkMenu, null);
if (!parentMenu) {
  throw new Error('Menu item requires a parent cdkMenu/cdkMenuBar');
}

function isInMenuTree(el: HTMLElement): boolean {
  return !!el.closest('[cdkMenu], [cdkMenuBar]');
}

try {
  this._checkConfigured();
} catch (e) {
  if ((e as Error).message.includes('parent menu')) {
    console.error('Nest this item within a cdkMenu/cdkMenuBar.');
  } else { throw e; }
}

When it happens

Trigger: Rendering cdkMenuItem or menu-group components outside any cdkMenu/cdkMenuBar ancestor; conditional templates (e.g. *ngIf, cdkOutlet) that detach the item from its parent menu context; dynamically created menu content that isn't within the menu's injector tree.

Common situations: Moving menu markup into a portal/overlay that loses the parent injector; a shared menu-item component reused outside menus; refactoring that removed the cdkMenu wrapper.

Related errors

• expected an instance of PointerFocusTracker to be provided
• Cannot attach component portal to outlet without an Applicat
• ListKeyManager constructed with a signal must receive an inj
• KeyManager items in typeahead mode must implement the `getLa
• CdkDropList could not find an element container matching the

AI-assisted analysis of angular/components@0411926e7d (2026-08-31). Data as JSON: /api/errors/38bd879549e5df0a. Report an issue: GitHub.