Material-design-lite: Any solution for multi leveel dropdown menu/nav bar?

[sidHitesh7]

[kybarg]

@sidHitesh7 Material Design is meant to be simple and user friendly, so everyone could be free to use all you app/website features. That is why you won't find any multi level navigation menus at MD specs. If you want to do it anyway, you should use third party extensions.

And as it isn't an issue, so you better ask on StackOverflow and use the material-design-lite tag.

[Garbee]

Not by default. You can do this and adhere to Material Design, I have an implementation myself I'm attempting to make a component out of, at least for the drawer. This isn't something we are taking on internally since there are numerous ways to achieve it and we don't want to be over-opinionated on how developers build their sites and applications.

Warning: The component I'm working on requires a Sass pipeline atm and is not production ready (existing code is even out of date from what I'm using on a project.) Use at your own risk. However it does serve as a good example right now of how to implement your own component.

[sidHitesh7]

@Garbee Thanks for help

[innerpeace0]

@kybarg said:

you won't find any multi level navigation menus at MD specs

The sixth example here says:

a menu can also cascade.

and shows an example of a multi level dropdown menu.

Although the example is not a navmenu, no exception was said that a navmenu can't also cascade, and multi level navmenus are a common web UI. Couldn't something similar to this example be used for a navmenu?

[Garbee]

This is not something the core team is interested in taking on at the moment. We would rather developers make their own decisions in this case for the time being.

Also, cascading menus are not dropdown navigation menus, they are entirely separated.

Please stop mentioning on numerous issues that "X is a common UI component." MDL is not a framework to handle every case for you. We provide a good sample of base components and you can work from that.

[frankandrobot]

I know it's 1 year later @Garbee and @sidHitesh7 .... but a "Cascading navigation drawer" is one of the things explicitly recommended by material design

You would think that MDL would provide that use case. I mean it's not terribly difficult to implement this yourself, but if it's part of the official guidelines, then you start expecting it in the framework.

[Garbee]

expecting it in the framework

MDL isn't a framework. It is a lightweight set of components to jump-start you into getting a Material Design site. It isn't meant to cover every nook and cranny of the specification.

Also as far as I know there is no "cascading navigation drawer" recommendation. That isn't even touched in the spec last I read it. If you mean multi-level dropdowns, then yes they are recommended but we aren't currently taking this on as we are rewriting for V2. We can address added functionality once that is completed.

[petersgiles]

Cascading navigation drawer is mentioned here https://material.google.com/patterns/navigation.html#navigation-patterns

I'd love some help creating one and some of the other navigation patterns on this page. Navigation is really tough to implement quickly and the justifications outlined by google about when to use the patterns are compelling.

[Garbee]

Yup, they added cascading stuff recently. We will take a look at that when building V2 but it may be something we add in post-stable.

[MichaelScottBurke]

Cascading navigation drawer is now in MD guidelines, however both the screenshots and spec are vague. Is this intended to replace the content of the nav drawer (with the expanded levels) replace the main content until a child level is selected or horizontally widen the nav drawer... any live examples or further explanation would be greatly appreciated.