Monday, November 28, 2022
Angular6Bootstrap 4

Custom Sidenav in Angular

Custom Sidenav in Angular - The Rich Post


Hello to all, welcome to In this post, i will tell you, how to make Custom Sidenav in Angular?

I am just add basic sidenav in my Angular 6 application and this is very useful. 

This is very basic example without using any library. This is pure custom code.

Here is the working and tested example code:


1. Very First, I added below code into my application app.component.html file:
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" (click)="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
<div class="jumbotron text-center">
  <h1>Custom SlideNav In Angular</h1>
<div class="container">
<button type="button" class="btn btn-primary" (click)="openNav()">Open Slide Nav</button><br><br>


2. After it, you need to add below code into yours app.component.ts file:
import {Component} from '@angular/core';
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  openNav() {
    document.getElementById("mySidenav").style.width = "250px";

  closeNav() {
    document.getElementById("mySidenav").style.width = "0";


3. In this end style is must so you need to add this code into app.component.css file:
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;

.sidenav a:hover {
    color: #f1f1f1;

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}

 If you have any query related to this then do comment below or ask question.

Happy Coding.

the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 8, Angular 9, Angular 10, Angular 11, Angular12, Angular 13, Angular 14, Angular 15, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.