Material: Collapsible horizontal navbar on mobile?

[demisx]

Hi. The project looks amazing. I am considering using it for our next product. However, I am having hard time locating some components that are available in Bootstrap. For example, how would I go about implementing the horizontal navbar that self-collapses at given mobile breakpoint? Similar to how your navbar works here https://material.angularjs.org/#/demo/material.components.toolbar when you resize the browser window. I've gone through demos, but couldn't locate this functionality. Thank you.

[EladBezalel]

Cant see the problem.. can you explain where you expect to see problems?

[demisx]

I am just not clear which md component from https://material.angularjs.org/#/ will give me a collapsible on mobile navbar.

[EladBezalel]

Basically, according the Material Design by Google, your navigation should be from a sidenav which works great on mobile!

If you still want to do what your asking you can try combine md-tabs with scroll-shrink toolbar

[demisx]

Thank you @EladBezalel. The layout of my site doesn't have a sidebar navigation in a desktop version by design (nothing I can do about it - this is a UX requirement). Only the horizontal navigation bar.

I don't mind all vertical navigation items (similar to md-tabs) collapse to a sidebar on mobile, though. Ideally, I would like to have this behavior https://fezvrasta.github.io/bootstrap-material-design/#navbar, but the nav items look like md-tabs. Do you still think combining md-tabs with scroll-shrink toolbar is the way to go? Sorry, I am new to material and have read the docs 2 times, but I still don't understand yet how this would produce the navbar I am looking for. Thank you so much for your help.

[EladBezalel]

You could try something like this

[demisx]

@EladBezalel I've tried it, but the buttons don't seem to collapse when I resize the browser down to a mobile viewport. Unless, I am missing something.

[EladBezalel]

Sadly you need to set height to md-content to make it work :\

I updated the plnkr you're welcome :)

[EladBezalel]

By the way - you can always ask in the Angular Material Forum

[demisx]

Thank you for sticking with me. The updated plunkr still doesn't collapse navigation items on mobile for me. Perhaps, I am not explaining this right. I'm attaching an image showing what kind of navbar I need to build with both, desktop and mobile versions (see below). Hopefully, that clarifies it. I will also post this on the AM forum. Thank you for the link--didn't know about this forum before. Maybe this is not something that cannot be done in Angular Material yet and I need to go back to Bootstrap again.

[EladBezalel]

Not a thing you should try to do in material design, you should read the specs here and understand if material is the design code you want to use.

[EladBezalel]

@ThomasBurleson please close.

[EladBezalel]

btw i suggest to read this

[demisx]

After reading Material Design docs one more time, I've realized that I am trying to build Bootstrap design with Material tools. I will need to redesign the entire navigation bar to follow the Material Design principles. Thank you @EladBezalel for helping me understand this.

[bastienJS]

@EladBezalel What I do not understand about material design then is why is this guy following google material design and he created something @demisx and I want: http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html

But why does angular material design not create something like the above?
I mean the link`s author follows material design by google?!
I look for a horizontal navbar which collapses at a small device and shows all links in a vertical menu then.

[EladBezalel]

@bastienJS @demisx, google material design spec has been updated two month ago with more components and specs, one of their changes was to define a proper way of menus,
as you can see here, this is what you're looking for

that components is called 'phase two of menu' as you can read in #78 which will be on 0.11.

the guy who themed bootstrap to 'material design' has succeeded in his vision of how this should be implemented.

[bastienJS]

@EladBezalel very cool! Ok 0.11 will be after Summer I guess in 3 months :P Anyway it looks promising if its the same as my pasted link I can wait :-)

[amritanjali]

I have same issue like @demisx , i want collaps my tabs in mobile view but i didn't find any way in angular material design . i am using angular material design in my project. please give some suggetion

[danger89]

It's indeed unbelievable that a simple collapsible responsive menu is so difficult to make with Angular 6 + Angular Materials 6 + Angular Flex Layout 6 (in 2018)... This example on Stackoverflow looks like the best attempt I saw so far.

My Stackblitz example, which is using Angular Material + Flex-layout.

[Splaktar]

@amritanjali http://gdg-x.github.io/boomerang/ demonstrates using the Transform Pattern to change from tabs on desktop to sidenav on mobile. The related source code can be found here. If you want to use the overflow pattern instead of the Transform Pattern, then you can do something similar to what is doing in the overflow example in the slides linked below.

@danger89 this repo and issue is for AngularJS Material, not Angular Material. That said, my presentation on Create Enterprise UIs That Your Users Will Love covers some of these patterns for Angular Material. The links to the StackBlitz examples are in the speaker notes.