Angular 2 Material Customize md-menu

Question

I am new to Angular 2 Material and I am trying to customize the style of the md-menu component.

Answer 1

You can pass custom classes to menus.

Then you can target that class with global styles.

For your needs, unfortunately, you'll need to know some information about where your menu overlay is positioned, and hardcode some repositioning

.mat-menu-panel.my-full-width-menu {
  max-width: none;
  width: 100vw;
  margin-left: -8px;
  margin-top: 24px;
}

Plunker Demo

The right way to do this is to create a custom overlay component with material's OverlayModule (current in the material package, but soon to be moved to the cdk).