CODEWITHSUNDEEP
htmlcssangularangular-materialnavbar
Niek Jonkman
Niek Jonkman

Reputation: 1056

How to create a navbar similar to the Angular Material 2 website?

I am trying to learn Material in combinaton with Angular so that I can later apply the Material Design pattern to my applications. After browsing around I found Material2 for Angular and installed it on my machine through NPM. The website describes all the components it has and I first tried to start with the navigation components. After fiddling around a bit I found out that the components were not responsive. After some research I found out that flex layout could make the components work in combination with Material2. One thing I noticed on the Material2 website was that when I narrow the browser down to mobile device sizes, it would change the navbar (which has a few buttons) to this:

enter image description here

I marked the three buttons with a red box (Components, CDK, Guides). This is what I want to recreate, but as far as I know, there are no navbar components for Material2. Altough the navbar has Material2 buttons in it:

enter image description here

I was wondering how they made this, what do I need to have in order to do this? Can it be build in Material2 or should I use something else?

Thanks in advance.

Upvotes: 4

Views: 1117

Answers (2)

Shilpa Soni
Shilpa Soni

Reputation: 306

Install FlexLayout through npm in your project.

Steps to install FlexLayout:

npm install @angular/flex-layout –save

or with yarn

yarn add @angular/flex-layout

And if you do not want to use FlexLayout, you can use Bootstrap4 & material design, refer 'https://mdbootstrap.com/docs/angular/navigation/navbar/'

Upvotes: 0

Julien Ambos
Julien Ambos

Reputation: 2088

FlexLayout offers a Responsive API, which lets you define different layout properties based on the media query, e.g.:

<div fxLayout='column' class="zero">

  <div fxFlex="33" [fxFlex.md]="box1Width" class="one" ></div>
  <div fxFlex="33" [fxLayout]="direction" fxLayout.md="row" class="two">

    <div fxFlex="22"    fxFlex.md="10px" fxHide.lg class="two_one"></div>
    <div fxFlex="205px" fxFlex.md="65" class="two_two"></div>
    <div fxFlex="30px"  fxFlex.md="25"   fxShow [fxHide.md]="hideBox" class="two_three"></div>

  </div>
  <div fxFlex class="three"></div>

</div>

Upvotes: 1

Related Questions