angularangular-materialsidenavnon-scrolling

Angular Material Non-scrollable sidenav


I am working on Angular Material sidenav. How can I have a side navigation that does not scroll but remain static when scroll down the main page?

<mat-drawer-container>
    <mat-drawer mode="side" opened position="end">My drawer content</mat-drawer>
    <mat-drawer-content>Main content</mat-drawer-content>
</mat-drawer-container>

Solution

  • In your CSS, your sidenav should be "fixed" :

    <mat-drawer-container>
        <mat-drawer class="sidenav-fixed" mode="side" opened position="end">My drawer content</mat-drawer>
        <mat-drawer-content>Main content</mat-drawer-content>
    </mat-drawer-container>
    

    styles.css/sccs :

    .sidenav-fixed {
    position:fixed;
    }