Looking to create a navigation menu that opens another menu alongside it.
I've successfully set up a material nav list with a menu, but I'm struggling to position the second menu to the right of the initial navigation list as per my design. I tried using margins on the menu elements without success
Here's the code snippet:
<mat-nav-list>
<button
mat-button
[matMenuTriggerFor]="menu"
aria-label="Example icon-button with a menu"
>
<span mat-line>Item 1</span>
</button>
<div>
<button
mat-button
[matMenuTriggerFor]="menu"
aria-label="Example icon-button with a menu"
>
<span mat-line>Item 2</span>
</button>
</div>
<div>
<button
mat-button
[matMenuTriggerFor]="menu"
aria-label="Example icon-button with a menu"
>
<span mat-line>Item 3</span>
</button>
</div>
<div>
<button
mat-button
[matMenuTriggerFor]="menu"
aria-label="Example icon-button with a menu"
>
<span mat-line>Item 4</span>
</button>
</div>
<mat-menu #menu="matMenu" class="sidemenu">
<button mat-menu-item>
<span>Subitem 1</span>
</button>
<button mat-menu-item>
<span>Subitem 2</span>
</button>
<button mat-menu-item>
<span>Subitem 3</span>
</button>
</mat-menu>
</mat-nav-list>