How to place "mat-toolbar" on top of "mat-sidenav" Angular Material 5

Question

I'm writing here since I have a question about Mat Toolbar and Mat-sidenav from Angular Material. I'm trying to get the Sidenav to go under the toolbar and the toolbar always occupies the top part, something like this:

Example

Here´s my code:

<mat-sidenav-container class="sidenav-container" autosize>
  <mat-sidenav #drawer class="sidenav" fixedInViewport="true"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'side' : 'push'"
      [opened]="(isHandset$ | async)">
      <mat-toolbar class="fixed-header">
        <img class="logooTest" src="data:image/gif;base64,test"/>
      </mat-toolbar>
     <mat-nav-list>
     <mat-list-item>
    <a routerLink="/dashboard">Test</a>
        <mat-icon mat-list-icon>home</mat-icon>
        </mat-list-item>
        <mat-list-item>
          <a routerLink="/dashboard">Test</a>
          <mat-icon mat-list-icon>home</mat-icon>
          </mat-list-item>
          <mat-list-item>
          <a routerLink="/test">Test</a>
          <mat-icon mat-list-icon>tune</mat-icon>
          </mat-list-item>
            <mat-list-item>
            <a routerLink="/#">Test</a>
            <mat-icon mat-list-icon>settings</mat-icon>
            </mat-list-item>
            <mat-list-item>
            <a routerLink="/#">Test</a>
            <mat-icon mat-list-icon>layers</mat-icon>
            </mat-list-item>
            <mat-list-item (click)="showSubmenu = !showSubmenu" class="parent">
              <span class="full-width" *ngIf="isExpanded || isShowing">Test dropdown</span>
              <mat-icon mat-list-icon>flash_on</mat-icon>
              <mat-icon class="menu-button" [ngClass]="{'rotated' : showSubmenu}" *ngIf="isExpanded || isShowing">expand_more</mat-icon>
            </mat-list-item>
   <div class="submenu" [ngClass]="{'expanded' : showSubmenu}" *ngIf="isShowing || isExpanded">
          <mat-list-item>
              <a routerLink="/#">Test</a>
              </mat-list-item>
              <mat-list-item>
                <a routerLink="/#">Test</a>
                </mat-list-item>
        <h2 matSubheader><mat-icon>account_balance</mat-icon>  Test</h2>
    <mat-list-item (click)="showSubSubMenu = !showSubSubMenu" class="parent">
     <span class="full-width" *ngIf="isExpanded || isShowing">Test</span>
     <mat-icon class="menu-button" [ngClass]="{'rotated' : showSubSubMenu}" *ngIf="isExpanded || isShowing">expand_more</mat-icon>
    </mat-list-item>
    <div class="submenu" [ngClass]="{'expanded' : showSubSubMenu}" *ngIf="isShowing || isExpanded">
          <mat-list-item>
            <a routerLink="/test">Test</a>
            </mat-list-item>
            <mat-list-item>
              <a routerLink="/#">Test</a>
              </mat-list-item>
            <h2 matSubheader><mat-icon>card_travel</mat-icon> Test</h2>
            <mat-list-item>
              <a routerLink="/#">Test</a>
              </mat-list-item>
              <mat-list-item>
                <a routerLink="/#">Test</a>
                </mat-list-item>
        </div>

   </div>
  </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary" class="mat-elevation-z5">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
       <span class="spacer"></span>
       <div class="navigation">
        <a class="button" href="">
          <mat-icon class="logoutIcon">exit_to_app</mat-icon>
        <div class="logout"><span class="aligned-with-icon">Salir</span></div>
        </a>

      </div>
    </mat-toolbar>

  </mat-sidenav-content>
</mat-sidenav-container>

I'm using the version 5.6.0 of Angular and Angular Material. I tried using CSS and also changing the order of the structure of the code, but this last one simply gave me errors and more errors; preventing the application from running.

score 14 · Answer 1 · answered Dec 10 '18 at 18:04

14

Anything you put inside mat-sidenav-content appears beside the menu. The basic layout structure for toolbar above sidenav menu and content is:

<mat-toolbar>...</mat-toolbar>
<mat-sidenav-container>...</mat-sidenav-container>

Here's an example on StackBlitz.

answered Dec 10 '18 at 18:04

G. Tranter

16,766
1
48
68

Thanks for answering! I know, I have tried to move the toolbar part aside, but all the code is damaged when I move it (It gives error and it does not load directly). That's why I was asking how I could put it so that this does not happen. Thanks again. – S. A Dec 11 '18 at 08:15
Well maybe if you post your errors someone could solve that problem. – G. Tranter Dec 11 '18 at 15:09
@S.A you need to fix the errors first, and then use the tool bar as G.Tranter mentioned. this is the clean way to work. – Furqan S. Mahmoud Dec 14 '18 at 21:07
1

thanks foyr your answer, but I have the problem that my sidenav goes below my toolbar and i dont konw how to add padding top to view it completely – Hazem HASAN May 03 '19 at 13:02

score 8 · Answer 2 · answered Mar 25 '19 at 00:11

8

for me just change the html like G. Tranter and set the fixedInViewport in the mat-sidenav from true to false

answered Mar 25 '19 at 00:11

ananta radityawan

89
1
2

This is the go for solution for me – Kavinda Jayakody Aug 17 '20 at 19:53

score 4 · Answer 3 · edited Nov 20 '19 at 17:02

4

A very simple way to do this is to add z-index to 10 in your mat-toolbar. Here is the css for that.

.mat-toolbar-example{
  position: fixed;
  z-index:10;
}

<mat-toolbar class="mat-toolbar-example"></mat-toolbar>

edited Nov 20 '19 at 17:02

adiga

34,372
9
61
83

answered Nov 20 '19 at 16:39

Tejaswi Kasat

63
4

score 2 · Answer 4 · answered Jan 10 '20 at 06:11

2

.example-mat-toolbar {
    position: sticky;
    position: -webkit-sticky; /* For macOS/iOS Safari */
    top: 0; 
    z-index: 10;
}
.example-sidenav-container {
    position: relative;
    height: 100%;
    display: block;
    transform: inherit;
}

answered Jan 10 '20 at 06:11

sonnet1414

21
2

4

Code only answers are rarely helpful. Please comment your code or expound on why this is the solution to the question. – RyanNerd Jan 10 '20 at 11:41
While this suggestion works, now there is another problem, the toolbar and sidenav are fixed position on the webpage and do not follow the view. – Doodles Jan 20 '20 at 18:18
your code helped me a lot for other things haha thanks. – Brayan Loayza Feb 10 '20 at 21:10

score 1 · Answer 5 · answered May 16 '19 at 04:52

If you are using Angular 6 for your project you can easily generate a boilerplate for Mat-toolbar and Mat-sidenav by running the following command via cli:

ng generate @angular/material:materialNav --name myNav

Once you make the sidenav component visible, you should be see the following result

Mat Sidenav component

score 1 · Answer 6 · answered Jul 18 '22 at 19:21

Your pattern must be like this in the html:

<mat-toolbar color="primary">
   ...
</mat-toolbar>

<mat-sidenav-container>
  <mat-sidenav>
     ...
  </mat-sidenav>
  <mat-sidenav-content>
     ...
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

Then style it with your css like this:

.mat-toolbar {
  position: sticky;
  top: 0;
  z-index: 99;
}

make sure you z-index is about your other content that scrolls under it.

How to place "mat-toolbar" on top of "mat-sidenav" Angular Material 5

6 Answers6

Linked

Related