Components: Multilevel sidebar vertical menu

[ipchaube]

Bug, feature request, or proposal:

Looking for Multilevel vertical menu but not sure how I can do it with mat tag. Please see if it can be available, if already available how I can do it.

What is the expected behavior?

Multilevel vertical menu(Collapsible and expendable)

What is the current behavior?

No options

What are the steps to reproduce?

Providing a StackBlitz/Plunker (or similar) is the best way to get the team to see your issue.

Plunker starter (using on @master): https://goo.gl/uDmqyY

StackBlitz starter (using latest npm release): https://goo.gl/wwnhMV

Using this doc https://material.angular.io/guide/getting-started

What is the use-case or motivation for changing an existing behavior?

Better user experience

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular-4 and following this link https://material.angular.io/guide/getting-started

Is there anything else we should know?

N/A

[jotatoledo]

You mean something like this? https://material.angular.io/components/menu/overview#nested-menu

[andrewseguin]

Please refer all troubleshooting questions to our community at StackOverflow, Angular Material mailing lists, Gitter, etc. We try to keep our issues here only open for bugs and feature requests.

[ipchaube]

Hi Jota,
I need similar but like tree and not a popup. Expand and collapse on click with icons.
Like https://jmouriz.github.io/angular-material-multilevel-menu/demo/demo.html

[Srikanthasv]

Hi All,
We also require similar kind of Multi level Vertical Menu with Toggle and collapse events. same like the below
https://jmouriz.github.io/angular-material-multilevel-menu/demo/demo.html

[gustavogsimas]

Hey guys,

Did you manage to make this?

[kylebake]

I put together a little example. It mimics (tries to at least) gmail's "mini" sidenav that is still visible when its collapsed. Stackblitz below.
https://stackblitz.com/edit/material-sidenav-example?file=app%2Fsidenav-autosize-example.html

It'd be nice if there was a more out of the box way to achieve this. We're trying to compare the effort into implementing material vs other component frameworks and stuff like Clarity is super appealing because they offer functionality like this with much less effort. For example:
https://vmware.github.io/clarity/documentation/v0.12/vertical-nav/basic-structure/charmander

[kubersingh]

PrimeNG may also help: https://www.primefaces.org/primeng/#/panelmenu

[alexmantaut]

Does something like this work? https://stackblitz.com/edit/dynamic-nested-sidenav-menu?file=app%2Fnav-item.ts (not my code, just a stackblitz I found)

[ashokona]

Hi @alexmantaut , your solution was too good, but how can make a the selected item active even if its a sub menu item.

[LoganDupont]

Hi @Splaktar , I found your example of the dynamic-nested-sidenav-menu over here. I was wondering if you have any idea how I can set the parent element class to expanded based on the active menu. So when I refresh the page the menu is expanded and I can see the active menu item.

[gxg10]

I would be interested in this issue. I expand and expand to go to my link but when i open the menu again the menu is again expandend. Has anyone figured it out how to to this regarding the https://stackblitz.com/edit/dynamic-nested-sidenav-menu example ? Kind regards

[Splaktar]

@alexmantaut @LoganDupont @gxg10 I've added that functionality to the first section (DevFestFL). It required defining a lot more routing information in the routing module and in the NavItem array. I only did it for that one section because the rest is just duplicate filler. It will obviously make more sense with your app's real nav structure.

Updated Stackblitz: https://stackblitz.com/edit/dynamic-nested-sidenav-menu?file=app%2Fapp-routing.module.ts

[gxg10]

@Splaktar I think i was misunderstood. I was looking for the following behaviour: i would browse through the first section, expanding another menu, going for example for a level 3 menu item: DevFestFL > Speakers > Michael Prentice > Create Enterprise UIs. When i click Create Enterprise UIs the menu would close , routing me to my page but when i would open the menu again the menu would be in the original position(unexpanded). Now it points me what menu i clicked. Kind regards

[BastiOfBerlin]

@Splaktar Great work! I'd love to see this as a ready-to-use npm package <3

[Splaktar]

@gxg10 https://stackblitz.com/edit/dynamic-nested-sidenav-menu-reset-on-nav?file=app%2Fmenu-list-item%2Fmenu-list-item.component.ts seems to do what you are asking. I don't really recommend it as a general UI/UX pattern, but if you need it for some specific reason, then go for it 😄

The only real change is this

 ngOnInit() {
    this.navService.currentUrl.subscribe((url: string) => {
      this.expanded = false;
      this.ariaExpanded = false;
    });
  }

[Splaktar]

@BastiOfBerlin I'm glad that you found it helpful. I've started moving the patterns that I've presented over to a library in my spare time, but so far I've only got the Responsive Button Bar. I'll try to make the dynamic nested sidenav my next priority, but I'm also happy to accept and assist with community contributions.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}