Angular material nav schematics breakpoint

Question

I'm trying to use the @angular/material:nav schematics found in Angular material guide.

ng generate @angular/material:nav <component-name>

In the template, the sidenav shows up on large screen devices then turns into a hamburger menu when it's less than 960px.

960px or more

less than 960px

Does anyone know how this is set? For example I want the hamburger menu on large screen devices?

Thanks!

Answer 1

The breakpoints are specified in the Breakpoints constant:

export const Breakpoints = {
  XSmall: '(max-width: 599.99px)',
  Small: '(min-width: 600px) and (max-width: 959.99px)',
  Medium: '(min-width: 960px) and (max-width: 1279.99px)',
  Large: '(min-width: 1280px) and (max-width: 1919.99px)',
  XLarge: '(min-width: 1920px)',

  Handset: '(max-width: 599.99px) and (orientation: portrait), ' +
           '(max-width: 959.99px) and (orientation: landscape)',
  Tablet: '(min-width: 600px) and (max-width: 839.99px) and (orientation: portrait), ' +
          '(min-width: 960px) and (max-width: 1279.99px) and (orientation: landscape)',
  Web: '(min-width: 840px) and (orientation: portrait), ' +
       '(min-width: 1280px) and (orientation: landscape)',

  HandsetPortrait: '(max-width: 599.99px) and (orientation: portrait)',
  TabletPortrait: '(min-width: 600px) and (max-width: 839.99px) and (orientation: portrait)',
  WebPortrait: '(min-width: 840px) and (orientation: portrait)',

  HandsetLandscape: '(max-width: 959.99px) and (orientation: landscape)',
  TabletLandscape: '(min-width: 960px) and (max-width: 1279.99px) and (orientation: landscape)',
  WebLandscape: '(min-width: 1280px) and (orientation: landscape)',
};

Now you can change or customize the breakpoints. For example:

isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)

isTablet$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Tablet)