diff --git a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.html b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.html
index e3b0521ec5c..eb2d6910a36 100644
--- a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.html
+++ b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.html
@@ -13,7 +13,7 @@
     [class.igx-nav-drawer--disable-animation]="disableAnimation"
     (click)="close()" #overlay>
 </div>
-<aside role="navigation"
+<nav
     class="igx-nav-drawer__aside"
     [class.igx-nav-drawer__aside--collapsed]="!miniTemplate && !isOpen"
     [class.igx-nav-drawer__aside--mini]="miniTemplate && !isOpen"
@@ -23,5 +23,5 @@
     [class.igx-nav-drawer--disable-animation]="disableAnimation">
 
     <ng-container *ngTemplateOutlet="template || defaultItemsTemplate"></ng-container>
-</aside>
+</nav>
 <div class="igx-nav-drawer__style-dummy" #dummy></div>
diff --git a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts
index b39bda07be9..0396ac517ce 100644
--- a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts
@@ -203,7 +203,7 @@ describe('Navigation Drawer', () => {
             fixture.detectChanges();
 
             expect(fixture.componentInstance.navDrawer.hasAnimateWidth).toBeTruthy();
-            expect(fixture.debugElement.query((x) => x.nativeNode.nodeName === 'ASIDE').nativeElement.classList)
+            expect(fixture.debugElement.query(By.css('.igx-nav-drawer__aside')).nativeElement.classList)
                 .toContain('igx-nav-drawer__aside--mini');
         }).catch((reason) => Promise.reject(reason));
     }));
@@ -260,7 +260,7 @@ describe('Navigation Drawer', () => {
             fixture.detectChanges();
 
             expect(fixture.componentInstance.navDrawer.pin).toBeTruthy();
-            expect(fixture.debugElement.query((x) => x.nativeNode.nodeName === 'ASIDE').nativeElement.classList)
+            expect(fixture.debugElement.query(By.css('.igx-nav-drawer__aside')).nativeElement.classList)
                 .toContain('igx-nav-drawer__aside--pinned');
 
             expect(fixture.componentInstance.navDrawer.enableGestures).toBe(false);
@@ -289,7 +289,7 @@ describe('Navigation Drawer', () => {
                 fixture.detectChanges();
                 const windowHeight = window.innerHeight;
                 const container = fixture.debugElement.query(By.css('div')).nativeElement;
-                const navdrawer = fixture.debugElement.query(By.css('igx-nav-drawer > aside')).nativeElement;
+                const navdrawer = fixture.debugElement.query(By.css('igx-nav-drawer > .igx-nav-drawer__aside')).nativeElement;
 
                 fixture.componentInstance.pin = false;
                 fixture.detectChanges();
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 4c070c780a1..3edcebe19f9 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -5,49 +5,45 @@
         [(pin)]="drawerState.pin" [position]="drawerState.position">
 
         <ng-template igxDrawer>
-            <nav>
-                <div class="nav-header"></div>
+            <div class="nav-header"></div>
 
-                <!-- Components -->
-                <span igxDrawerItem [isHeader]="true">Components</span>
+            <!-- Components -->
+            <span igxDrawerItem [isHeader]="true">Components</span>
 
-                <span *ngFor="let item of componentLinks" igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{item.link}}">
-                    <igx-icon>{{item.icon}}</igx-icon>
-                    <span class="navdrawer-ellipsis">{{item.name}}</span>
-                </span>
+            <span *ngFor="let item of componentLinks" igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{item.link}}">
+                <igx-icon>{{item.icon}}</igx-icon>
+                <span class="navdrawer-ellipsis">{{item.name}}</span>
+            </span>
 
-                <!--Directives-->
-                <span igxDrawerItem [isHeader]="true">Directives</span>
+            <!--Directives-->
+            <span igxDrawerItem [isHeader]="true">Directives</span>
 
-                <span *ngFor="let item of directiveLinks" igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{item.link}}">
-                    <igx-icon>{{item.icon}}</igx-icon>
-                    <span class="navdrawer-ellipsis">{{item.name}}</span>
-                </span>
+            <span *ngFor="let item of directiveLinks" igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{item.link}}">
+                <igx-icon>{{item.icon}}</igx-icon>
+                <span class="navdrawer-ellipsis">{{item.name}}</span>
+            </span>
 
-                <!--Style guide-->
-                <span igxDrawerItem [isHeader]="true">Style</span>
+            <!--Style guide-->
+            <span igxDrawerItem [isHeader]="true">Style</span>
 
-                <span *ngFor="let item of styleLinks" igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{item.link}}">
-                    <igx-icon>{{item.icon}}</igx-icon>
-                    <span class="navdrawer-ellipsis">{{item.name}}</span>
-                </span>
-            </nav>
+            <span *ngFor="let item of styleLinks" igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{item.link}}">
+                <igx-icon>{{item.icon}}</igx-icon>
+                <span class="navdrawer-ellipsis">{{item.name}}</span>
+            </span>
         </ng-template>
 
         <ng-template *ngIf="drawerState.miniVariant" igxDrawerMini>
-            <nav>
-                <span *ngFor="let item of componentLinks" igxRipple igxDrawerItem routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
-                    <igx-icon>{{item.icon}}</igx-icon>
-                </span>
-
-                <span *ngFor="let item of directiveLinks" igxDrawerItem igxRipple routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
-                    <igx-icon>{{item.icon}}</igx-icon>
-                </span>
-
-                <span *ngFor="let item of styleLinks" igxDrawerItem igxRipple routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
-                    <igx-icon>{{item.icon}}</igx-icon>
-                </span>
-            </nav>
+            <span *ngFor="let item of componentLinks" igxRipple igxDrawerItem routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
+                <igx-icon>{{item.icon}}</igx-icon>
+            </span>
+
+            <span *ngFor="let item of directiveLinks" igxDrawerItem igxRipple routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
+                <igx-icon>{{item.icon}}</igx-icon>
+            </span>
+
+            <span *ngFor="let item of styleLinks" igxDrawerItem igxRipple routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
+                <igx-icon>{{item.icon}}</igx-icon>
+            </span>
         </ng-template>
     </igx-nav-drawer>