diff --git a/templates/docs/examples/patterns/side-navigation/docs.html b/templates/docs/examples/patterns/side-navigation/docs.html
index 9d2350ca9a..d639135e92 100644
--- a/templates/docs/examples/patterns/side-navigation/docs.html
+++ b/templates/docs/examples/patterns/side-navigation/docs.html
@@ -16,7 +16,7 @@
       <a class="p-side-navigation__link" href="#">Explore MAAS</a>
     </li>
     <li class="p-side-navigation__item ">
-      <a class="p-side-navigation__link" href="#">Quick start</a>
+      <a class="p-side-navigation__link" href="#">Quick start<span class="p-side-navigation__status"><span class="p-label--new">New</span></span></a>
     </li>
   </ul>
   <ul class="p-side-navigation__list">
@@ -66,7 +66,7 @@
           <a class="p-side-navigation__link" href="#">Upgrade from 2.3 to 2.4</a>
         </li>
         <li class="p-side-navigation__item ">
-          <a class="p-side-navigation__link" href="#">Upgrade from 1.9 to 2.x</a>
+          <a class="p-side-navigation__link" href="#">Upgrade from 1.9 to 2.x<span class="p-side-navigation__status"><i class="p-icon--warning"></i></span></a>
         </li>
       </ul>
     </li>
diff --git a/templates/docs/patterns/navigation.md b/templates/docs/patterns/navigation.md
index c0369cbc51..28c76fe5e9 100644
--- a/templates/docs/patterns/navigation.md
+++ b/templates/docs/patterns/navigation.md
@@ -71,6 +71,8 @@ It allows grouping the links into navigation sections and nesting them up to thr
 
 Current page in the side navigation should be highlighted by adding `is-active` class to the corresponding `p-side-navigation__link` element.
 
+Use `p-side-navigation__status` inside `p-side-navigation__link` elements to add status labels or icons on right side of navigation items.
+
 <a href="/docs/examples/patterns/side-navigation/docs" class="js-example">
 View example of the side navigation pattern
 </a>