diff --git a/src/lib/components/layout/__snapshots__/Layout.component.test.js.snap b/src/lib/components/layout/__snapshots__/Layout.component.test.js.snap
index a5806a1193..f21e73cf6d 100644
--- a/src/lib/components/layout/__snapshots__/Layout.component.test.js.snap
+++ b/src/lib/components/layout/__snapshots__/Layout.component.test.js.snap
@@ -11,7 +11,7 @@ exports[`Storyshots Layout Sidebar docked 1`] = `
       className="sc-jTzLTM drTWqF"
     >
       <div
-        className="sc-cSHVUG hQKQAr"
+        className="sc-cSHVUG iBdEdM"
         onClick={[Function]}
       >
         <button
@@ -45,7 +45,7 @@ exports[`Storyshots Layout Sidebar docked 1`] = `
         </button>
       </div>
       <div
-        className="sc-cSHVUG hQKQAr"
+        className="sc-cSHVUG iBdEdM"
       >
         <div
           className="sc-chPdSV cpBXOe sc-logo"
@@ -120,7 +120,7 @@ exports[`Storyshots Layout Sidebar docked 1`] = `
         </div>
       </div>
       <div
-        className="sc-cSHVUG hQKQAr"
+        className="sc-cSHVUG iBdEdM"
       >
         <h1
           className="sc-kAzzGY dSCoqg"
@@ -129,14 +129,11 @@ exports[`Storyshots Layout Sidebar docked 1`] = `
         </h1>
       </div>
     </div>
-    <div
-      className="sc-fjdhpX gQmaqJ"
-    />
     <div
       className="sc-jTzLTM drTWqF"
     >
       <div
-        className="sc-cSHVUG hQKQAr"
+        className="sc-cSHVUG iBdEdM"
       >
         <div
           className="sc-htoDjs iIbcxe sc-dropdown"
@@ -148,7 +145,6 @@ exports[`Storyshots Layout Sidebar docked 1`] = `
             onFocus={[Function]}
             size="larger"
             tabIndex="0"
-            title="EN"
           >
             <span
               className="sc-ifAKCX joVDVz"
@@ -161,14 +157,10 @@ exports[`Storyshots Layout Sidebar docked 1`] = `
             <span
               className="sc-EHOje boinrg sc-trigger-text"
             >
-              EN
+              FR
             </span>
           </div>
         </div>
-      </div>
-      <div
-        className="sc-cSHVUG hQKQAr"
-      >
         <div
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
@@ -179,7 +171,6 @@ exports[`Storyshots Layout Sidebar docked 1`] = `
             onFocus={[Function]}
             size="larger"
             tabIndex="0"
-            title="Scality Apps"
           >
             <span
               className="sc-ifAKCX bccMeP"
@@ -191,10 +182,6 @@ exports[`Storyshots Layout Sidebar docked 1`] = `
             </span>
           </div>
         </div>
-      </div>
-      <div
-        className="sc-cSHVUG hQKQAr"
-      >
         <div
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
@@ -205,7 +192,6 @@ exports[`Storyshots Layout Sidebar docked 1`] = `
             onFocus={[Function]}
             size="larger"
             tabIndex="0"
-            title="Help"
           >
             <span
               className="sc-ifAKCX bccMeP"
@@ -217,10 +203,6 @@ exports[`Storyshots Layout Sidebar docked 1`] = `
             </span>
           </div>
         </div>
-      </div>
-      <div
-        className="sc-cSHVUG hQKQAr"
-      >
         <div
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
@@ -231,7 +213,6 @@ exports[`Storyshots Layout Sidebar docked 1`] = `
             onFocus={[Function]}
             size="larger"
             tabIndex="0"
-            title="Carlito"
           >
             <span
               className="sc-ifAKCX joVDVz"
@@ -446,7 +427,7 @@ exports[`Storyshots Layout Sidebar expanded 1`] = `
       className="sc-jTzLTM drTWqF"
     >
       <div
-        className="sc-cSHVUG hQKQAr"
+        className="sc-cSHVUG iBdEdM"
         onClick={[Function]}
       >
         <button
@@ -480,7 +461,7 @@ exports[`Storyshots Layout Sidebar expanded 1`] = `
         </button>
       </div>
       <div
-        className="sc-cSHVUG hQKQAr"
+        className="sc-cSHVUG iBdEdM"
       >
         <div
           className="sc-chPdSV cpBXOe sc-logo"
@@ -555,7 +536,7 @@ exports[`Storyshots Layout Sidebar expanded 1`] = `
         </div>
       </div>
       <div
-        className="sc-cSHVUG hQKQAr"
+        className="sc-cSHVUG iBdEdM"
       >
         <h1
           className="sc-kAzzGY dSCoqg"
@@ -564,14 +545,11 @@ exports[`Storyshots Layout Sidebar expanded 1`] = `
         </h1>
       </div>
     </div>
-    <div
-      className="sc-fjdhpX gQmaqJ"
-    />
     <div
       className="sc-jTzLTM drTWqF"
     >
       <div
-        className="sc-cSHVUG hQKQAr"
+        className="sc-cSHVUG iBdEdM"
       >
         <div
           className="sc-htoDjs iIbcxe sc-dropdown"
@@ -583,7 +561,6 @@ exports[`Storyshots Layout Sidebar expanded 1`] = `
             onFocus={[Function]}
             size="larger"
             tabIndex="0"
-            title="EN"
           >
             <span
               className="sc-ifAKCX joVDVz"
@@ -596,14 +573,10 @@ exports[`Storyshots Layout Sidebar expanded 1`] = `
             <span
               className="sc-EHOje boinrg sc-trigger-text"
             >
-              EN
+              FR
             </span>
           </div>
         </div>
-      </div>
-      <div
-        className="sc-cSHVUG hQKQAr"
-      >
         <div
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
@@ -614,7 +587,6 @@ exports[`Storyshots Layout Sidebar expanded 1`] = `
             onFocus={[Function]}
             size="larger"
             tabIndex="0"
-            title="Scality Apps"
           >
             <span
               className="sc-ifAKCX bccMeP"
@@ -626,10 +598,6 @@ exports[`Storyshots Layout Sidebar expanded 1`] = `
             </span>
           </div>
         </div>
-      </div>
-      <div
-        className="sc-cSHVUG hQKQAr"
-      >
         <div
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
@@ -640,7 +608,6 @@ exports[`Storyshots Layout Sidebar expanded 1`] = `
             onFocus={[Function]}
             size="larger"
             tabIndex="0"
-            title="Help"
           >
             <span
               className="sc-ifAKCX bccMeP"
@@ -652,10 +619,6 @@ exports[`Storyshots Layout Sidebar expanded 1`] = `
             </span>
           </div>
         </div>
-      </div>
-      <div
-        className="sc-cSHVUG hQKQAr"
-      >
         <div
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
@@ -666,7 +629,6 @@ exports[`Storyshots Layout Sidebar expanded 1`] = `
             onFocus={[Function]}
             size="larger"
             tabIndex="0"
-            title="Carlito"
           >
             <span
               className="sc-ifAKCX joVDVz"
diff --git a/src/lib/components/navbar/Navbar.component.js b/src/lib/components/navbar/Navbar.component.js
index 638b16e116..fbce6ec031 100644
--- a/src/lib/components/navbar/Navbar.component.js
+++ b/src/lib/components/navbar/Navbar.component.js
@@ -9,11 +9,12 @@ import * as defaultTheme from "../../style/theme";
 import { mergeTheme } from "../../utils";
 import type { Item } from "../dropdown/Dropdown.component";
 
-type Items = Array<Item>;
-type User = {
-  name: string,
-  actions: Items
+type Action = {
+  type: string,
+  items?: Array<Item>
 };
+
+type Actions = Array<Action>;
 type Tab = {
   title: string,
   selected?: boolean,
@@ -22,13 +23,9 @@ type Tab = {
 
 export type Props = {
   onToggleClick?: () => void,
-  toggleVisible?: boolean,
+  rightActions: Actions,
   productName?: string,
-  applications?: Items,
-  help?: Items,
-  user?: User,
   logo?: Node,
-  languages?: Items,
   tabs?: Array<Tab>
 };
 
@@ -95,14 +92,16 @@ const NavbarMenuItem = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  .sc-dropdown {
+    .trigger {
+      height: ${defaultTheme.navbarHeight};
+      font-size: ${defaultTheme.fontSize.base};
+    }
+  }
 
-  button {
+  .sc-button {
     margin: 0;
     border-radius: 0;
-    height: ${defaultTheme.navbarHeight};
-    width: ${defaultTheme.navbarItemWidth};
-  }
-  .trigger {
     height: ${defaultTheme.navbarHeight};
     font-size: ${defaultTheme.fontSize.base};
   }
@@ -125,27 +124,35 @@ const LogoContainer = styled.div`
   }
 `;
 
+const getActionRenderer = ({ type, items = null, ...rest }) => {
+  if (type === "dropdown") {
+    return items ? (
+      <Dropdown
+        size="larger"
+        variant="base"
+        items={items}
+        caret={false}
+        {...rest}
+      />
+    ) : null;
+  } else if (type === "button") {
+    return <Button size="larger" variant="base" {...rest} />;
+  }
+  return null;
+};
+
 function NavBar({
   onToggleClick,
-  toggleVisible,
   productName,
-  applications,
-  help,
-  user,
   logo,
   tabs = [],
-  languages = [],
+  rightActions = [],
   ...rest
 }: Props) {
-  const filterLanguage = languages.filter(language => !language.selected);
-  const currentLanguage = languages.find(
-    language => language.selected === true
-  );
-
   return (
     <NavbarContainer className="sc-navbar" {...rest}>
       <NavbarMenu>
-        {toggleVisible && (
+        {onToggleClick && (
           <NavbarMenuItem onClick={onToggleClick}>
             <Button
               size="larger"
@@ -166,66 +173,22 @@ function NavBar({
           </NavbarMenuItem>
         )}
       </NavbarMenu>
-      <NavbarTabs>
-        {tabs.length > 0 &&
-          tabs.map(({ title, selected, onClick }) => (
+      {tabs.length ? (
+        <NavbarTabs>
+          {tabs.map(({ title, selected, onClick }) => (
             <TabItems onClick={onClick} selected={selected}>
               <span>{title}</span>
             </TabItems>
           ))}
-      </NavbarTabs>
-      <NavbarMenu>
-        {languages.length > 0 && (
+        </NavbarTabs>
+      ) : null}
+      {rightActions.length ? (
+        <NavbarMenu>
           <NavbarMenuItem>
-            <Dropdown
-              size="larger"
-              variant="base"
-              items={filterLanguage}
-              icon={<i className="fas fa-globe" />}
-              title={currentLanguage ? currentLanguage.name : languages[0].name}
-              caret={false}
-              text={currentLanguage ? currentLanguage.name : languages[0].name}
-            />
+            {rightActions.map(action => getActionRenderer(action))}
           </NavbarMenuItem>
-        )}
-        {applications && (
-          <NavbarMenuItem>
-            <Dropdown
-              size="larger"
-              variant="base"
-              items={applications}
-              icon={<i className="fas fa-th" />}
-              title="Scality Apps"
-              caret={false}
-            />
-          </NavbarMenuItem>
-        )}
-        {help && (
-          <NavbarMenuItem>
-            <Dropdown
-              size="larger"
-              variant="base"
-              items={help}
-              icon={<i className="fas fa-question-circle" />}
-              title="Help"
-              caret={false}
-            />
-          </NavbarMenuItem>
-        )}
-        {user && (
-          <NavbarMenuItem>
-            <Dropdown
-              variant="base"
-              items={user.actions}
-              icon={<i className="fas fa-user" />}
-              title={user.name}
-              text={user.name}
-              size="larger"
-              caret={false}
-            />
-          </NavbarMenuItem>
-        )}
-      </NavbarMenu>
+        </NavbarMenu>
+      ) : null}
     </NavbarContainer>
   );
 }
diff --git a/src/lib/components/navbar/__snapshots__/Navbar.component.test.js.snap b/src/lib/components/navbar/__snapshots__/Navbar.component.test.js.snap
index 8f6fb6155d..0ae5da8cff 100644
--- a/src/lib/components/navbar/__snapshots__/Navbar.component.test.js.snap
+++ b/src/lib/components/navbar/__snapshots__/Navbar.component.test.js.snap
@@ -12,7 +12,7 @@ exports[`Storyshots Navbar Default 1`] = `
       className="sc-jTzLTM drTWqF"
     >
       <div
-        className="sc-cSHVUG hQKQAr"
+        className="sc-cSHVUG iBdEdM"
         onClick={[Function]}
       >
         <button
@@ -46,7 +46,7 @@ exports[`Storyshots Navbar Default 1`] = `
         </button>
       </div>
       <div
-        className="sc-cSHVUG hQKQAr"
+        className="sc-cSHVUG iBdEdM"
       >
         <div
           className="sc-chPdSV cpBXOe sc-logo"
@@ -121,7 +121,7 @@ exports[`Storyshots Navbar Default 1`] = `
         </div>
       </div>
       <div
-        className="sc-cSHVUG hQKQAr"
+        className="sc-cSHVUG iBdEdM"
       >
         <h1
           className="sc-kAzzGY dSCoqg"
@@ -183,7 +183,7 @@ exports[`Storyshots Navbar Default 1`] = `
       className="sc-jTzLTM drTWqF"
     >
       <div
-        className="sc-cSHVUG hQKQAr"
+        className="sc-cSHVUG iBdEdM"
       >
         <div
           className="sc-htoDjs iIbcxe sc-dropdown"
@@ -195,7 +195,6 @@ exports[`Storyshots Navbar Default 1`] = `
             onFocus={[Function]}
             size="larger"
             tabIndex="0"
-            title="EN"
           >
             <span
               className="sc-ifAKCX joVDVz"
@@ -208,14 +207,10 @@ exports[`Storyshots Navbar Default 1`] = `
             <span
               className="sc-EHOje boinrg sc-trigger-text"
             >
-              EN
+              FR
             </span>
           </div>
         </div>
-      </div>
-      <div
-        className="sc-cSHVUG hQKQAr"
-      >
         <div
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
@@ -226,7 +221,6 @@ exports[`Storyshots Navbar Default 1`] = `
             onFocus={[Function]}
             size="larger"
             tabIndex="0"
-            title="Scality Apps"
           >
             <span
               className="sc-ifAKCX bccMeP"
@@ -238,10 +232,6 @@ exports[`Storyshots Navbar Default 1`] = `
             </span>
           </div>
         </div>
-      </div>
-      <div
-        className="sc-cSHVUG hQKQAr"
-      >
         <div
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
@@ -252,7 +242,6 @@ exports[`Storyshots Navbar Default 1`] = `
             onFocus={[Function]}
             size="larger"
             tabIndex="0"
-            title="Help"
           >
             <span
               className="sc-ifAKCX bccMeP"
@@ -264,10 +253,36 @@ exports[`Storyshots Navbar Default 1`] = `
             </span>
           </div>
         </div>
-      </div>
-      <div
-        className="sc-cSHVUG hQKQAr"
-      >
+        <button
+          className="sc-bxivhb rkToF sc-button"
+          disabled={false}
+          onClick={[Function]}
+          size="larger"
+          title=""
+          type="button"
+        >
+          <span
+            className="sc-bZQynM iMWVsx"
+          >
+            <span
+              className="sc-button-text"
+            >
+              <span
+                className="sc-ifAKCX bccMeP"
+                size="larger"
+              >
+                <i
+                  className="fas fa-sun"
+                />
+              </span>
+              <span
+                className="sc-EHOje boinrg"
+              >
+                
+              </span>
+            </span>
+          </span>
+        </button>
         <div
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
@@ -278,7 +293,6 @@ exports[`Storyshots Navbar Default 1`] = `
             onFocus={[Function]}
             size="larger"
             tabIndex="0"
-            title="Carlito"
           >
             <span
               className="sc-ifAKCX joVDVz"
@@ -308,7 +322,7 @@ exports[`Storyshots Navbar Default 1`] = `
       className="sc-jTzLTM drTWqF"
     >
       <div
-        className="sc-cSHVUG hQKQAr"
+        className="sc-cSHVUG iBdEdM"
       >
         <div
           className="sc-chPdSV cpBXOe sc-logo"
@@ -383,7 +397,7 @@ exports[`Storyshots Navbar Default 1`] = `
         </div>
       </div>
       <div
-        className="sc-cSHVUG hQKQAr"
+        className="sc-cSHVUG iBdEdM"
       >
         <h1
           className="sc-kAzzGY dSCoqg"
@@ -445,7 +459,7 @@ exports[`Storyshots Navbar Default 1`] = `
       className="sc-jTzLTM drTWqF"
     >
       <div
-        className="sc-cSHVUG hQKQAr"
+        className="sc-cSHVUG iBdEdM"
       >
         <div
           className="sc-htoDjs iIbcxe sc-dropdown"
@@ -457,7 +471,6 @@ exports[`Storyshots Navbar Default 1`] = `
             onFocus={[Function]}
             size="larger"
             tabIndex="0"
-            title="EN"
           >
             <span
               className="sc-ifAKCX joVDVz"
@@ -470,14 +483,10 @@ exports[`Storyshots Navbar Default 1`] = `
             <span
               className="sc-EHOje boinrg sc-trigger-text"
             >
-              EN
+              FR
             </span>
           </div>
         </div>
-      </div>
-      <div
-        className="sc-cSHVUG hQKQAr"
-      >
         <div
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
@@ -488,7 +497,6 @@ exports[`Storyshots Navbar Default 1`] = `
             onFocus={[Function]}
             size="larger"
             tabIndex="0"
-            title="Scality Apps"
           >
             <span
               className="sc-ifAKCX bccMeP"
@@ -500,10 +508,6 @@ exports[`Storyshots Navbar Default 1`] = `
             </span>
           </div>
         </div>
-      </div>
-      <div
-        className="sc-cSHVUG hQKQAr"
-      >
         <div
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
@@ -514,7 +518,6 @@ exports[`Storyshots Navbar Default 1`] = `
             onFocus={[Function]}
             size="larger"
             tabIndex="0"
-            title="Help"
           >
             <span
               className="sc-ifAKCX bccMeP"
@@ -526,10 +529,36 @@ exports[`Storyshots Navbar Default 1`] = `
             </span>
           </div>
         </div>
-      </div>
-      <div
-        className="sc-cSHVUG hQKQAr"
-      >
+        <button
+          className="sc-bxivhb rkToF sc-button"
+          disabled={false}
+          onClick={[Function]}
+          size="larger"
+          title=""
+          type="button"
+        >
+          <span
+            className="sc-bZQynM iMWVsx"
+          >
+            <span
+              className="sc-button-text"
+            >
+              <span
+                className="sc-ifAKCX bccMeP"
+                size="larger"
+              >
+                <i
+                  className="fas fa-sun"
+                />
+              </span>
+              <span
+                className="sc-EHOje boinrg"
+              >
+                
+              </span>
+            </span>
+          </span>
+        </button>
         <div
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
@@ -540,7 +569,6 @@ exports[`Storyshots Navbar Default 1`] = `
             onFocus={[Function]}
             size="larger"
             tabIndex="0"
-            title="Carlito"
           >
             <span
               className="sc-ifAKCX joVDVz"
@@ -570,7 +598,7 @@ exports[`Storyshots Navbar Default 1`] = `
       className="sc-jTzLTM drTWqF"
     >
       <div
-        className="sc-cSHVUG hQKQAr"
+        className="sc-cSHVUG iBdEdM"
         onClick={[Function]}
       >
         <button
@@ -604,7 +632,7 @@ exports[`Storyshots Navbar Default 1`] = `
         </button>
       </div>
       <div
-        className="sc-cSHVUG hQKQAr"
+        className="sc-cSHVUG iBdEdM"
       >
         <div
           className="sc-chPdSV cpBXOe sc-logo"
@@ -615,7 +643,7 @@ exports[`Storyshots Navbar Default 1`] = `
         </div>
       </div>
       <div
-        className="sc-cSHVUG hQKQAr"
+        className="sc-cSHVUG iBdEdM"
       >
         <h1
           className="sc-kAzzGY dSCoqg"
@@ -677,7 +705,7 @@ exports[`Storyshots Navbar Default 1`] = `
       className="sc-jTzLTM drTWqF"
     >
       <div
-        className="sc-cSHVUG hQKQAr"
+        className="sc-cSHVUG iBdEdM"
       >
         <div
           className="sc-htoDjs iIbcxe sc-dropdown"
@@ -689,7 +717,6 @@ exports[`Storyshots Navbar Default 1`] = `
             onFocus={[Function]}
             size="larger"
             tabIndex="0"
-            title="EN"
           >
             <span
               className="sc-ifAKCX joVDVz"
@@ -702,14 +729,10 @@ exports[`Storyshots Navbar Default 1`] = `
             <span
               className="sc-EHOje boinrg sc-trigger-text"
             >
-              EN
+              FR
             </span>
           </div>
         </div>
-      </div>
-      <div
-        className="sc-cSHVUG hQKQAr"
-      >
         <div
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
@@ -720,7 +743,6 @@ exports[`Storyshots Navbar Default 1`] = `
             onFocus={[Function]}
             size="larger"
             tabIndex="0"
-            title="Scality Apps"
           >
             <span
               className="sc-ifAKCX bccMeP"
@@ -732,10 +754,6 @@ exports[`Storyshots Navbar Default 1`] = `
             </span>
           </div>
         </div>
-      </div>
-      <div
-        className="sc-cSHVUG hQKQAr"
-      >
         <div
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
@@ -746,7 +764,6 @@ exports[`Storyshots Navbar Default 1`] = `
             onFocus={[Function]}
             size="larger"
             tabIndex="0"
-            title="Help"
           >
             <span
               className="sc-ifAKCX bccMeP"
@@ -758,10 +775,36 @@ exports[`Storyshots Navbar Default 1`] = `
             </span>
           </div>
         </div>
-      </div>
-      <div
-        className="sc-cSHVUG hQKQAr"
-      >
+        <button
+          className="sc-bxivhb rkToF sc-button"
+          disabled={false}
+          onClick={[Function]}
+          size="larger"
+          title=""
+          type="button"
+        >
+          <span
+            className="sc-bZQynM iMWVsx"
+          >
+            <span
+              className="sc-button-text"
+            >
+              <span
+                className="sc-ifAKCX bccMeP"
+                size="larger"
+              >
+                <i
+                  className="fas fa-sun"
+                />
+              </span>
+              <span
+                className="sc-EHOje boinrg"
+              >
+                
+              </span>
+            </span>
+          </span>
+        </button>
         <div
           className="sc-htoDjs iIbcxe sc-dropdown"
         >
@@ -772,7 +815,6 @@ exports[`Storyshots Navbar Default 1`] = `
             onFocus={[Function]}
             size="larger"
             tabIndex="0"
-            title="Carlito"
           >
             <span
               className="sc-ifAKCX joVDVz"
@@ -802,7 +844,7 @@ exports[`Storyshots Navbar Default 1`] = `
       className="sc-jTzLTM drTWqF"
     >
       <div
-        className="sc-cSHVUG hQKQAr"
+        className="sc-cSHVUG iBdEdM"
       >
         <div
           className="sc-chPdSV cpBXOe sc-logo"
@@ -930,7 +972,7 @@ exports[`Storyshots Navbar Default 1`] = `
       className="sc-jTzLTM drTWqF"
     >
       <div
-        className="sc-cSHVUG hQKQAr"
+        className="sc-cSHVUG iBdEdM"
       >
         <div
           className="sc-htoDjs iIbcxe sc-dropdown"
@@ -942,7 +984,6 @@ exports[`Storyshots Navbar Default 1`] = `
             onFocus={[Function]}
             size="larger"
             tabIndex="0"
-            title="Carlito"
           >
             <span
               className="sc-ifAKCX joVDVz"
diff --git a/stories/layout.js b/stories/layout.js
index 74f246b9bc..bbc97d398f 100644
--- a/stories/layout.js
+++ b/stories/layout.js
@@ -28,54 +28,46 @@ const sideBarActions = [
   }
 ];
 
-const applications = [
+const rightActions = [
   {
-    label: "Hyperdrive UI",
-    onClick: action("Hyperdrive UI clicked"),
-    "data-cy": "Hyperdrive_UI"
-  }
-];
-
-const help = [
-  { label: "About", onClick: action("About clicked"), "data-cy": "About" },
-  {
-    label: "Documentation",
-    onClick: action("Documentation clicked"),
-    "data-cy": "Documentation"
+    type: "dropdown",
+    text: "FR",
+    icon: <i className="fas fa-globe" />,
+    items: [
+      {
+        label: "English",
+        name: "EN",
+        onClick: action("English selected")
+      }
+    ]
   },
   {
-    label: "Onboarding",
-    onClick: action("Onboarding clicked"),
-    "data-cy": "Onboarding"
-  }
-];
-
-const user = {
-  name: "Carlito",
-  actions: [
-    { label: "Log out", onClick: action("Logout clicked"), "data-cy": "Logout" }
-  ]
-};
-
-const languages = [
+    type: "dropdown",
+    icon: <i className="fas fa-th" />,
+    items: [
+      { label: "Hyperdrive UI", onClick: action("Hyperdrive UI clicked") }
+    ]
+  },
   {
-    label: "Français",
-    name: "FR",
-    onClick: action("French selected"),
-    selected: false
+    type: "dropdown",
+    icon: <i className="fas fa-question-circle" />,
+    items: [
+      { label: "About", onClick: action("About clicked") },
+      { label: "Documentation", onClick: action("Documentation clicked") },
+      { label: "Onboarding", onClick: action("Onboarding clicked") }
+    ]
   },
   {
-    label: "English",
-    name: "EN",
-    onClick: action("English selected"),
-    selected: true
+    type: "dropdown",
+    text: "Carlito",
+    icon: <i className="fas fa-user" />,
+    items: [{ label: "Log out", onClick: action("Logout clicked") }]
   }
 ];
 
 storiesOf("Layout", module)
   .addDecorator(withKnobs)
   .add("Sidebar docked", () => {
-    const toggle = boolean("Sidebar Toogle Visible", true);
     const expanded = boolean("Sidebar Expanded", false);
 
     const sidebar = {
@@ -85,12 +77,8 @@ storiesOf("Layout", module)
 
     const navbar = {
       onToggleClick: action("toggle clicked"),
-      toggleVisible: toggle,
       productName: "Harware UI",
-      languages,
-      applications,
-      help,
-      user
+      rightActions
     };
 
     return (
@@ -107,12 +95,8 @@ storiesOf("Layout", module)
 
     const navbar = {
       onToggleClick: action("toggle clicked"),
-      toggleVisible: true,
       productName: "Harware UI",
-      languages,
-      applications,
-      help,
-      user
+      rightActions
     };
 
     return (
diff --git a/stories/navbar.js b/stories/navbar.js
index bf69adb785..894ca064fb 100644
--- a/stories/navbar.js
+++ b/stories/navbar.js
@@ -4,21 +4,6 @@ import Navbar from "../src/lib/components/navbar/Navbar.component";
 import { action } from "@storybook/addon-actions";
 import { storiesOf } from "@storybook/react";
 
-const applications = [
-  { label: "Hyperdrive UI", onClick: action("Hyperdrive UI clicked") }
-];
-
-const help = [
-  { label: "About", onClick: action("About clicked") },
-  { label: "Documentation", onClick: action("Documentation clicked") },
-  { label: "Onboarding", onClick: action("Onboarding clicked") }
-];
-
-const user = {
-  name: "Carlito",
-  actions: [{ label: "Log out", onClick: action("Logout clicked") }]
-};
-
 const tabs = [
   {
     selected: true,
@@ -47,18 +32,45 @@ const tabs = [
   }
 ];
 
-const languages = [
+const rightActions = [
+  {
+    type: "dropdown",
+    text: "FR",
+    icon: <i className="fas fa-globe" />,
+    items: [
+      {
+        label: "English",
+        name: "EN",
+        onClick: action("English selected")
+      }
+    ]
+  },
+  {
+    type: "dropdown",
+    icon: <i className="fas fa-th" />,
+    items: [
+      { label: "Hyperdrive UI", onClick: action("Hyperdrive UI clicked") }
+    ]
+  },
   {
-    label: "Français",
-    name: "FR",
-    onClick: action("French selected"),
-    selected: false
+    type: "dropdown",
+    icon: <i className="fas fa-question-circle" />,
+    items: [
+      { label: "About", onClick: action("About clicked") },
+      { label: "Documentation", onClick: action("Documentation clicked") },
+      { label: "Onboarding", onClick: action("Onboarding clicked") }
+    ]
   },
   {
-    label: "English",
-    name: "EN",
-    onClick: action("English selected"),
-    selected: true
+    type: "button",
+    icon: <i className="fas fa-sun" />,
+    onClick: action("Theme toggle clicked")
+  },
+  {
+    type: "dropdown",
+    text: "Carlito",
+    icon: <i className="fas fa-user" />,
+    items: [{ label: "Log out", onClick: action("Logout clicked") }]
   }
 ];
 
@@ -68,39 +80,26 @@ storiesOf("Navbar", module).add("Default", () => {
       <h3>Navbar with toggle</h3>
       <Navbar
         onToggleClick={action("toggle clicked")}
-        toggleVisible={true}
         productName={"Hardware UI"}
-        languages={languages}
-        applications={applications}
-        help={help}
-        user={user}
+        rightActions={rightActions}
         tabs={tabs}
       />
       <h3>Navbar without toggle</h3>
       <Navbar
-        onToggleClick={action("toggle clicked")}
-        toggleVisible={false}
         productName={"Hardware UI"}
-        languages={languages}
-        applications={applications}
-        help={help}
-        user={user}
+        rightActions={rightActions}
         tabs={tabs}
       />
       <h3>Navbar with customized logo</h3>
       <Navbar
         onToggleClick={action("toggle clicked")}
-        toggleVisible={true}
         productName={"Hardware UI"}
-        languages={languages}
-        applications={applications}
-        help={help}
-        user={user}
+        rightActions={rightActions}
         logo={<i className="fas fa-ring" />}
         tabs={tabs}
       />
       <h3>Navbar with only tabs</h3>
-      <Navbar user={user} tabs={tabs} />
+      <Navbar rightActions={[rightActions[4]]} tabs={tabs} />
     </div>
   );
 });