bug(cdk-menu): cdkMenu is not positioned correctly if mat.core() is not added

[GeorgianStan]

Description

I'm trying to use the Angular CDK. From my understanding Angular CDK should be completly independent as it states here:

The Component Dev Kit (CDK) is a set of behavior primitives for building UI components

The problem is not the cdkMenu is not displayed correctly if mat.core() from Angular Material is not included.

Reproduction

StackBlitz

Steps to reproduce:

1. Click on Click me button (the menu is displayed correctly below the button).
2. Comment @include mat.core(); from styles.scss.
3. Click on Click me button.

Expected Behavior

The menu should be displayed in the same way, under the component.

Actual Behavior

It is displayed in the left edge.

Environment

• Angular: 15
• CDK/Material: 15

[aj-montoya]

I ran into the same issue. After inspecting the page for the menu examples, I could see that the menu was being added inside of an existing DOM element <div class="cdk-overlay-container"></div>. So I checked out CDK Overlay:

The overlay package provides a way to open floating panels on the screen.

Initial setup

The CDK overlays depend on a small set of structural styles to work correctly. If you're using Angular Material, these styles have been included together with the theme, otherwise if you're using the CDK on its own, you'll have to include the styles yourself. You can do so by importing the prebuilt styles in your global stylesheet:

@import '@angular/cdk/overlay-prebuilt.css';

This did the trick.

Could definitely be documented better; menu overview needs to mention this dependency.

[Paramesh98]

Hi, is there any update regarding is bug?. I'm facing the same issue. As I'm building an Independent component library, I have no way of using global styles. Is there any way of solving this issue without adding global styles.

[DavidLeonard77]

I ran into the same issue. After inspecting the page for the menu examples, I could see that the menu was being added inside of an existing DOM element <div class="cdk-overlay-container"></div>. So I checked out CDK Overlay:

The overlay package provides a way to open floating panels on the screen.

Initial setup

The CDK overlays depend on a small set of structural styles to work correctly. If you're using Angular Material, these styles have been included together with the theme, otherwise if you're using the CDK on its own, you'll have to include the styles yourself. You can do so by importing the prebuilt styles in your global stylesheet:
@import '@angular/cdk/overlay-prebuilt.css';

This did the trick.

Could definitely be documented better; menu overview needs to mention this dependency.

I agree this should be documented. Also, can it be confirmed this is the accepted way to import the overlay CSS (without a Material dependency)?

[guylan-dieu]

You have to use the overlay scss mixin from @angular/cdk to expect overlays working as expected.

Replace

@use '@angular/material' as mat;
@include mat.core();

by

@use '@angular/cdk' as cdk;
@include cdk.overlay();

So indeed Angular CDK is independant and not need Angular Material to be included.

Updated StackBlitz