diff --git a/en/components/navdrawer.md b/en/components/navdrawer.md
index 08b36626d7..2a861d5f30 100644
--- a/en/components/navdrawer.md
+++ b/en/components/navdrawer.md
@@ -69,13 +69,11 @@ import { IGX_NAVIGATION_DRAWER_DIRECTIVES, IgxRippleDirective, IgxIconComponent
     <div class="content-wrap">
         <igx-nav-drawer [isOpen]="true">
             <ng-template igxDrawer>
-                <nav>
-                    <span igxDrawerItem [isHeader]="true">Components</span>
-                    <span *ngFor="let item of navItems" igxDrawerItem [active]="item.text === selected" igxRipple (click)="navigate(item)">
-                        <igx-icon fontSet="material">{{ item.name }}</igx-icon>
-                        <span>{{ item.text }}</span>
-                    </span>
-                </nav>
+                <span igxDrawerItem [isHeader]="true">Components</span>
+                <span *ngFor="let item of navItems" igxDrawerItem [active]="item.text === selected" igxRipple (click)="navigate(item)">
+                    <igx-icon fontSet="material">{{ item.name }}</igx-icon>
+                    <span>{{ item.text }}</span>
+                </span>
             </ng-template>
         </igx-nav-drawer>
         <main>
@@ -117,14 +115,12 @@ The [`igxRipple`](ripple.md) directive completes the look and feel:
 <div class="content-wrap">
   <igx-nav-drawer id="navigation" #drawer [isOpen]="true">
     <ng-template igxDrawer>
-      <nav>
         <span igxDrawerItem [isHeader]="true">Components</span>
         <span *ngFor="let item of navItems" igxDrawerItem [active]="item.text === selected"
         igxRipple (click)="navigate(item)">
           <igx-icon fontSet="material">{{ item.name }}</igx-icon>
           <span>{{ item.text }}</span>
         </span>
-      </nav>
     </ng-template>
   </igx-nav-drawer>
   <main>
@@ -334,15 +330,13 @@ export class AppComponent {
 
 <!-- ... -->
 <ng-template igxDrawer>
-    <nav>
-        <span igxDrawerItem [isHeader]="true">Components</span>
+    <span igxDrawerItem [isHeader]="true">Components</span>
 
-        <span *ngFor="let item of componentLinks" routerLink="{{item.link}}"
-            routerLinkActive #rla="routerLinkActive"
-            igxDrawerItem igxRipple [active]="rla.isActive">
-                {{item.name}}
-        </span>
-    </nav>
+    <span *ngFor="let item of componentLinks" routerLink="{{item.link}}"
+        routerLinkActive #rla="routerLinkActive"
+        igxDrawerItem igxRipple [active]="rla.isActive">
+            {{item.name}}
+    </span>
 </ng-template>
 <!-- ... -->
 ```
diff --git a/jp/components/navdrawer.md b/jp/components/navdrawer.md
index 9afb7b977d..32dd703ed2 100644
--- a/jp/components/navdrawer.md
+++ b/jp/components/navdrawer.md
@@ -69,13 +69,11 @@ import { IGX_NAVIGATION_DRAWER_DIRECTIVES, IgxRippleDirective, IgxIconComponent
     <div class="content-wrap">
         <igx-nav-drawer [isOpen]="true">
             <ng-template igxDrawer>
-                <nav>
-                    <span igxDrawerItem [isHeader]="true">Components</span>
-                    <span *ngFor="let item of navItems" igxDrawerItem [active]="item.text === selected" igxRipple (click)="navigate(item)">
-                        <igx-icon fontSet="material">{{ item.name }}</igx-icon>
-                        <span>{{ item.text }}</span>
-                    </span>
-                </nav>
+                <span igxDrawerItem [isHeader]="true">Components</span>
+                <span *ngFor="let item of navItems" igxDrawerItem [active]="item.text === selected" igxRipple (click)="navigate(item)">
+                    <igx-icon fontSet="material">{{ item.name }}</igx-icon>
+                    <span>{{ item.text }}</span>
+                </span>
             </ng-template>
         </igx-nav-drawer>
         <main>
@@ -117,14 +115,12 @@ Drawer のコンテンツを igxDrawer ディレクティブでデコレート
 <div class="content-wrap">
   <igx-nav-drawer id="navigation" #drawer [isOpen]="true">
     <ng-template igxDrawer>
-      <nav>
         <span igxDrawerItem [isHeader]="true">Components</span>
         <span *ngFor="let item of navItems" igxDrawerItem [active]="item.text === selected"
         igxRipple (click)="navigate(item)">
           <igx-icon fontSet="material">{{ item.name }}</igx-icon>
           <span>{{ item.text }}</span>
         </span>
-      </nav>
     </ng-template>
   </igx-nav-drawer>
   <main>
@@ -333,15 +329,13 @@ export class AppComponent {
 
 <!-- ... -->
 <ng-template igxDrawer>
-    <nav>
-        <span igxDrawerItem [isHeader]="true">Components</span>
+    <span igxDrawerItem [isHeader]="true">Components</span>
 
-        <span *ngFor="let item of componentLinks" routerLink="{{item.link}}"
-            routerLinkActive #rla="routerLinkActive"
-            igxDrawerItem igxRipple [active]="rla.isActive">
-                {{item.name}}
-        </span>
-    </nav>
+    <span *ngFor="let item of componentLinks" routerLink="{{item.link}}"
+        routerLinkActive #rla="routerLinkActive"
+        igxDrawerItem igxRipple [active]="rla.isActive">
+            {{item.name}}
+    </span>
 </ng-template>
 <!-- ... -->
 ```
diff --git a/kr/components/navdrawer.md b/kr/components/navdrawer.md
index bbccddf141..384b80ea15 100644
--- a/kr/components/navdrawer.md
+++ b/kr/components/navdrawer.md
@@ -51,7 +51,6 @@ While any content can be provided in the template, the [`igxDrawerItem`]({enviro
 <div class="content-wrap">
   <igx-nav-drawer id="navigation" #drawer [isOpen]="true">
     <ng-template igxDrawer>
-      <nav>
         <span igxDrawerItem [isHeader]="true"> Email Account </span>
         <span igxDrawerItem igxRipple> Inbox </span>
         <span igxDrawerItem igxRipple [active]="true"> Drafts </span>
@@ -59,7 +58,6 @@ While any content can be provided in the template, the [`igxDrawerItem`]({enviro
         <span igxDrawerItem [isHeader]="true"> Folders </span>
         <span igxDrawerItem igxRipple> Deleted </span>
         <span igxDrawerItem igxRipple> Archive </span>
-      </nav>
     </ng-template>
   </igx-nav-drawer>
   <main>
@@ -237,13 +235,11 @@ One way to tie in the active state is to directly use the [`routerLinkActive`](h
 ```html
 <!-- ... -->
 <ng-template igxDrawer>
-    <nav>
-        <span *ngFor="let item of componentLinks" routerLink="{{item.link}}"
-            igxDrawerItem igxRipple 
-            routerLinkActive="igx-nav-drawer__item--active" >
-                {{item.name}}
-        </span>
-    </nav>
+    <span *ngFor="let item of componentLinks" routerLink="{{item.link}}"
+        igxDrawerItem igxRipple 
+        routerLinkActive="igx-nav-drawer__item--active" >
+            {{item.name}}
+    </span>
 </ng-template>
 <!-- ... -->
 ```
@@ -251,13 +247,11 @@ This approach, of course, does not affect the actual directive active state and
 ```html
 <!-- ... -->
 <ng-template igxDrawer>
-    <nav>
-        <span *ngFor="let item of componentLinks" routerLink="{{item.link}}"
-            routerLinkActive #rla="routerLinkActive"
-            igxDrawerItem igxRipple [active]="rla.isActive">
-                {{item.name}}
-        </span>
-    </nav>
+    <span *ngFor="let item of componentLinks" routerLink="{{item.link}}"
+        routerLinkActive #rla="routerLinkActive"
+        igxDrawerItem igxRipple [active]="rla.isActive">
+            {{item.name}}
+    </span>
 </ng-template>
 <!-- ... -->
 ```