article: Angular Material Menu: Nested Menu using Dynamic Data | Angular Material Dev

[giscus[bot]]

article: Angular Material Menu: Nested Menu using Dynamic Data | Angular Material Dev

Learn Material Design in Angular, Theming Angular Material Components and Developing your Angular application with Material Design like a pro.

https://angular-material.dev/articles/angular-material-menu-nested-menu-using-dynamic-data

[jtbullon7]

How could the elements within the menu be displayed when hovering the mouse cursor over them?

[shhdharmen]

You can listen to hover events and open the menu programmatically.

[pedroestabruxelles]

This breaks accessibility, the keyboard does not work anymore for sub items.
It would be nice if this would work, I'm doing something similar and was trying to find ways to fix the a11y issue.

[vard32]

Hello, Dharmen Shah!
What if the root Level Nodes are laid out horizontally, like the main menu?
What would the code look like?

[shhdharmen]

@vard32 I think it would be similar code. Because even in this example root menu items are not lazily loaded.

[vard32]

Hello, Dharmen Shah!
I managed to place the root Level Nodes in the horizontal menu, but when I click on the item, it is still duplicated in the drop-down menu :(
For example: "Fruits" placed like main menu item and popup menu item (

[shhdharmen]

@vard32 do you have stackblitz?

[vard32]

Unfortunately, no. But I think I've already figured it out myself. Thank you.