I'm trying to create a navigation bar using Angular material 2 that collapses in small screens like mobile devices and tablets.
I was only able to find md-button
but not md-menu-bar
as was in Angular material.
It is an In-built responsive design.
Angular material also provides us navbar, which is nothing but collapsible side content. This type of site content can be used to show the menu of an application or different types of features available to the application.
To make the toolbar responsive, set the overflow input to true .
Here is what I used to build my responsive nav-bar
using Angular2+ Material 2 and flex-layout in angular-cli
app.
(Please visit Install Angular Material and Angular CDK)
1) Install flex-layout
npm install @angular/flex-layout -save
2) Include flex-layout in your app.module.ts
import {FlexLayoutModule} from "@angular/flex-layout";
3) Import
imports: [ BrowserModule, FormsModule, HttpModule, RoutingModule, FlexLayoutModule, MyOwnCustomMaterialModule // Please visit the link above "Install Angular Material and Angular CDK", and check (Step 3: Import the component modules). ],
app.component.html
<mat-toolbar color="primary"> <button mat-button routerLink="/"> <mat-icon>home</mat-icon> {{title}}</button> <!-- This fills the remaining space of the current row --> <span class="fill-remaining-space"></span> <div fxLayout="row" fxShow="false" fxShow.gt-sm> <button mat-button routerLink="/products">Products</button> <button mat-button routerLink="/dashboard">Dashboard</button> </div> <button mat-button [mat-menu-trigger-for]="menu" fxHide="false" fxHide.gt-sm> <mat-icon>menu</mat-icon> </button> </mat-toolbar> <mat-menu x-position="before" #menu="matMenu"> <button mat-menu-item routerLink="/products">Products</button> <button mat-menu-item routerLink="/dashboard">Dashboard</button> <!--<button mat-menu-item>Help</button>--> </mat-menu>
app.component.css
.fill-remaining-space { /*This fills the remaining space, by using flexbox. Every toolbar row uses a flexbox row layout. */ flex: 1 1 auto; }
Note: to test, resize your page.
take a look at flex-layout docs
Here is my favorite way of creating a responsive Navigation Bar in Angular. If you use Angular 6, make sure you use a version 6.1+
Working example on Stackblitz: https://stackblitz.com/edit/angular-v6xwte
Example on a smaller screen:
Example on a larger screen:
Here are precise steps how to do it:
1) Install necessary packages. Type in your terminal:
npm install --save @angular/material @angular/cdk @angular/animations npm install @angular/flex-layout --save
2) Import necessary modules in your app.module.ts
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { FlexLayoutModule } from '@angular/flex-layout'; import { MatIconModule, MatButtonModule, MatSidenavModule, MatToolbarModule } from '@angular/material';
Remember to add these modules to the imports array below.
3) Add Material Icons link to your index.html
The link must go before any Angular content.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
4) In your styles.css add an Angular theme and set margins to 0%
@import "~@angular/material/prebuilt-themes/indigo-pink.css"; body{ margin: 0%; }
5) Add toolbar HTML code in your app.component.html
<div style="height: 100vh;"> <mat-toolbar color="primary"> <div fxShow="true" fxHide.gt-sm="true"> <button mat-icon-button (click)="sidenav.toggle()"> <mat-icon>menu</mat-icon> </button> </div> <a mat-button class="companyName" routerLink="/"> <span>Site name</span> </a> <span class="example-spacer"></span> <div fxShow="true" fxHide.lt-md="true"> <a mat-button routerLink="/about-us">About us</a> <a mat-button routerLink="/prices">Prices</a> <a mat-button routerLink="/start-page">Start page</a> <a mat-button routerLink="/offer">Offer</a> <a mat-button routerLink="/contact">Contact</a> </div> </mat-toolbar> <mat-sidenav-container fxFlexFill class="example-container"> <mat-sidenav color="primary" #sidenav fxLayout="column" mode="over" opened="false" fxHide.gt-sm="true"> <div fxLayout="column"> <a mat-button routerLink="/about-us">About us</a> <a mat-button routerLink="/prices">Prices</a> <a mat-button routerLink="/start-page">Start page</a> <a mat-button routerLink="/offer">Offer</a> <a mat-button routerLink="/contact">Contact</a> </div> </mat-sidenav> <mat-sidenav-content fxFlexFill> Awesome content </mat-sidenav-content> </mat-sidenav-container> </div>
6) Style the toolbar in your app.component.css
.companyName{ font-size: 150%; } div { overflow: inherit; } a{ text-decoration: none; font-size: 110%; white-space: normal; } button{ font-size: 110%; min-width: min-content; } .example-icon { padding: 0 14px; } .example-spacer { flex: 1 1 auto; } .mat-sidenav-content{ font-size: 200%; text-align: center; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With