Put traingle on top of mat menu

Question

I have my menu as follows. how i can put a triangle upwards to my dropdown menu.

  <button mat-icon-button [matMenuTriggerFor]="appMenu">
    <mat-icon>arrow_drop_down</mat-icon>
  </button>

  <mat-menu #appMenu="matMenu">
    <button mat-menu-item [matMenuTriggerFor]="subMenu"><span translate="">header.menu.language</span></button>
  </mat-menu>

  <mat-menu #subMenu="matMenu">
    <button mat-menu-item *ngFor="let language of languages" (click)="setLanguage(language)">{{ language }}</button>
  </mat-menu>

Current look

I want

i added the following css and than enclosed mat-menu inside the div with the css but not working.

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;

  border-bottom: 5px solid black;
}

score 1 · Answer 1 · answered Nov 11 '19 at 09:31

Update the code

.submenu                            { position: relative;}
.submenu:after                      { position: absolute; content: ''; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid black; left: 20px; bottom: 110%; }

<button mat-icon-button [matMenuTriggerFor]="appMenu">
    <mat-icon>arrow_drop_down</mat-icon>
  </button>

  <mat-menu #appMenu="matMenu">
    <button mat-menu-item [matMenuTriggerFor]="subMenu" class="submenu"><span translate="">header.menu.language</span></button>
  </mat-menu>

  <mat-menu #subMenu="matMenu">
    <button mat-menu-item *ngFor="let language of languages" (click)="setLanguage(language)" class="submenu" >{{ language }}</button>
  </mat-menu>

score 0 · Answer 2 · answered Nov 11 '19 at 10:02

Actually you can make that triangle but the point is mat-menu open on random position according to the view-port height so if you add that point and when you resize window or on tab or on small mac devices it open upward and your point is meaning less in that case. In short you cant bound mat-menu to open every time at bottom so that the arrow point up as you desire.

The best solution is try to use mat-menu with default styles.

score 0 · Answer 3 · answered Nov 11 '22 at 10:24

It can be done as follow:

General solution:

::ng-deep .cdk-overlay-container {
    max-width: none !important;
    margin-top: 5px;

    &::after {
        top: -5px;
        left: 20px;
        width: 0;
        height: 0;
        content: '';
        position: absolute;
        border-left: 0.7rem solid transparent;
        border-right: 0.7rem solid transparent;
        border-bottom: 0.7rem solid white;
    }
}

Solution for mat-menu with specific class: here tse-menu is the class of the menu on which I apply the traingle

::ng-deep .cdk-overlay-container .tse-menu {
    max-width: none !important;
    margin-top: 5px;

    &::after {
        top: -5px;
        left: 20px;
        width: 0;
        height: 0;
        content: '';
        position: absolute;
        border-left: 0.7rem solid transparent;
        border-right: 0.7rem solid transparent;
        border-bottom: 0.7rem solid white;
    }
}

Put traingle on top of mat menu

3 Answers3