diff --git a/src/product-switch.scss b/src/product-switch.scss
index b4e3acfda9..eeba75bec7 100644
--- a/src/product-switch.scss
+++ b/src/product-switch.scss
@@ -1,6 +1,7 @@
 @import "./new-settings";
 @import "./mixins";
 @import "./drag-and-drop";
+@import "./mixins/button/button-helper";
 
 /*!
 .fd-product-switch
@@ -55,6 +56,12 @@ $block: #{$fd-namespace}-product-switch;
       color: var(--sapShell_Active_TextColor);
       background-color: var(--sapShell_Active_Background);
     }
+
+    @include fd-focus() {
+      @include buttonFocus() {
+        outline-color: var(--sapContent_ContrastFocusColor);
+      }
+    }
   }
 
   &__list {
diff --git a/src/shellbar.scss b/src/shellbar.scss
index e2f2138cc3..168137e2e8 100644
--- a/src/shellbar.scss
+++ b/src/shellbar.scss
@@ -239,7 +239,7 @@ $block: #{$fd-namespace}-shellbar;
 
     @include fd-focus() {
       @include buttonFocus() {
-        border-color: var(--sapContent_ContrastFocusColor);
+        outline-color: var(--sapContent_ContrastFocusColor);
       }
     }
 
@@ -350,4 +350,33 @@ $block: #{$fd-namespace}-shellbar;
       display: inline-block;
     }
   }
+
+  &--side-nav {
+    padding: 0 1rem 0 0;
+
+    @include fd-rtl() {
+      padding: 0 0 0 1rem;
+    }
+
+    &.#{$block}--m,
+    &.#{$block}--l {
+      padding: 0 2rem 0 0;
+
+      @include fd-rtl() {
+        padding: 0 0 0 2rem;
+      }
+    }
+
+    &.#{$block}--xl {
+      padding: 0 3rem 0 0;
+
+      @include fd-rtl() {
+        padding: 0 0 0 3rem;
+      }
+    }
+  }
+
+  &__side-nav-control {
+    margin: 0 0.25rem;
+  }
 }
diff --git a/stories/shellbar/__snapshots__/shellbar.stories.storyshot b/stories/shellbar/__snapshots__/shellbar.stories.storyshot
index f4b39c3669..c19c33c4aa 100644
--- a/stories/shellbar/__snapshots__/shellbar.stories.storyshot
+++ b/stories/shellbar/__snapshots__/shellbar.stories.storyshot
@@ -2319,6 +2319,194 @@ exports[`Storyshots Components/Shellbar Product switch 1`] = `
   </div>
   
 
+</div>
+`;
+
+exports[`Storyshots Components/Shellbar Side Navigation 1`] = `
+<div
+  style="height:600px"
+>
+  
+    
+  <div
+    class="fd-shellbar fd-shellbar--side-nav"
+  >
+    
+        
+    <div
+      class="fd-shellbar__group fd-shellbar__group--product"
+    >
+      
+            
+      <button
+        aria-label="Side Nav control button"
+        class="fd-button fd-button--transparent fd-shellbar__button fd-shellbar__side-nav-control"
+      >
+        
+                
+        <i
+          class="sap-icon--menu2"
+        />
+        
+            
+      </button>
+      
+            
+      <span
+        class="fd-shellbar__logo"
+      >
+        <img
+          alt="SAP"
+          height="24"
+          src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png"
+          srcset="//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x, //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x, //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x"
+          width="48"
+        />
+      </span>
+      
+            
+      <span
+        class="fd-shellbar__title"
+      >
+        Corporate Portal
+      </span>
+      
+        
+    </div>
+    
+        
+    <div
+      class="fd-shellbar__group fd-shellbar__group--actions"
+    >
+      
+            
+      <div
+        class="fd-shellbar__action"
+      >
+        
+                
+        <div
+          class="fd-popover fd-popover--right"
+        >
+          
+                    
+          <div
+            class="fd-popover__control"
+          >
+            
+                        
+            <div
+              aria-controls="MKFAY276"
+              aria-expanded="false"
+              aria-haspopup="true"
+              class="fd-button fd-shellbar__button fd-user-menu__control"
+              onclick="onPopoverClick('MKFAY276')"
+              role="button"
+            >
+              
+                            
+              <span
+                aria-label="William Wallingham"
+                class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail fd-shellbar__avatar--circle"
+                style="background-image: url('assets/images/avatars/1.svg');"
+              >
+                
+                            
+              </span>
+              
+                        
+            </div>
+            
+                    
+          </div>
+          
+                    
+          <div
+            aria-hidden="true"
+            class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right"
+            id="MKFAY276"
+          >
+            
+                        
+            <nav
+              class="fd-menu"
+            >
+              
+                            
+              <ul
+                class="fd-menu__list fd-menu__list--no-shadow"
+              >
+                
+                                
+                <li
+                  class="fd-menu__item"
+                >
+                  
+                                    
+                  <a
+                    class="fd-menu__link"
+                    role="button"
+                  >
+                    
+                                        
+                    <span
+                      class="fd-menu__title"
+                    >
+                      Settings
+                    </span>
+                    
+                                    
+                  </a>
+                  
+                                
+                </li>
+                
+                                
+                <li
+                  class="fd-menu__item"
+                >
+                  
+                                    
+                  <a
+                    class="fd-menu__link"
+                    role="button"
+                  >
+                    
+                                        
+                    <span
+                      class="fd-menu__title"
+                    >
+                      Sign Out
+                    </span>
+                    
+                                    
+                  </a>
+                  
+                                
+                </li>
+                
+                            
+              </ul>
+              
+                        
+            </nav>
+            
+                    
+          </div>
+          
+                
+        </div>
+        
+            
+      </div>
+      
+        
+    </div>
+    
+    
+  </div>
+  
+
 </div>
 `;
 
diff --git a/stories/shellbar/shellbar.stories.js b/stories/shellbar/shellbar.stories.js
index e91e09dafa..2fb52271bb 100644
--- a/stories/shellbar/shellbar.stories.js
+++ b/stories/shellbar/shellbar.stories.js
@@ -711,3 +711,59 @@ Shellbar can be displayed with a product switch component, indicating to the use
     `
     }
 };
+
+export const sideNav = () => `<div style="height:600px">
+    <div class="fd-shellbar fd-shellbar--side-nav">
+        <div class="fd-shellbar__group fd-shellbar__group--product">
+            <button class="fd-button fd-button--transparent fd-shellbar__button fd-shellbar__side-nav-control" aria-label="Side Nav control button">
+                <i class="sap-icon--menu2"></i>
+            </button>
+            <span class="fd-shellbar__logo"><img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" srcset="//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x, //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x, //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x" width="48" height="24" alt="SAP"></span>
+            <span class="fd-shellbar__title">Corporate Portal</span>
+        </div>
+        <div class="fd-shellbar__group fd-shellbar__group--actions">
+            <div class="fd-shellbar__action">
+                <div class="fd-popover fd-popover--right">
+                    <div class="fd-popover__control">
+                        <div class="fd-button fd-shellbar__button fd-user-menu__control"
+                             onclick="onPopoverClick('MKFAY276')" aria-controls="MKFAY276" aria-expanded="false"
+                             aria-haspopup="true" role="button">
+                            <span
+                                class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail fd-shellbar__avatar--circle"
+                                style="background-image: url('assets/images/avatars/1.svg');"
+                                aria-label="William Wallingham">
+                            </span>
+                        </div>
+                    </div>
+                    <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right" aria-hidden="true"
+                         id="MKFAY276">
+                        <nav class="fd-menu">
+                            <ul class="fd-menu__list fd-menu__list--no-shadow">
+                                <li class="fd-menu__item">
+                                    <a role="button" class="fd-menu__link">
+                                        <span class="fd-menu__title">Settings</span>
+                                    </a>
+                                </li>
+                                <li class="fd-menu__item">
+                                    <a role="button" class="fd-menu__link">
+                                        <span class="fd-menu__title">Sign Out</span>
+                                    </a>
+                                </li>
+                            </ul>
+                        </nav>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+`;
+
+sideNav.storyName = 'Side Navigation';
+
+sideNav.parameters = {
+    docs: {
+        storyDescription: `Apply the <code>fd-shellbar--side-nav</code> modifier class to <code>fd-shellbar</code> when the Shellbar contains Side Navigation control. The button that is controlling the state of the Side Navigation (expanded, condensed, off-screen) has \`fd-shellbar__side-nav-control\` modifier class applied on it, together with \`fd-shellbar__button\` class. The Shellbar used with Side Navigation can also be optimised for different screens by appling <code>fd-shellbar--m</code>, <code>fd-shellbar--l</code> or <code>fd-shellbar--xl</code> modifier classes. In this case the responsive padding will only be applied on the right-hand side of the Shellbar.
+    `
+    }
+};