diff --git a/src/components/top-bar/top-bar.tsx b/src/components/top-bar/top-bar.tsx
index 6f9def32..b677b21f 100644
--- a/src/components/top-bar/top-bar.tsx
+++ b/src/components/top-bar/top-bar.tsx
@@ -30,6 +30,7 @@ export interface Toolbar {
     breadcrumbs?: { title: string | React.ReactNode, path?: string; }[];
     tools?: React.ReactNode;
     actionMenu?: ActionMenu;
+    toolBarExtensions?: React.ReactNode[];
 }
 
 export interface TopBarProps extends React.Props<any> {
@@ -85,7 +86,7 @@ const renderBreadcrumbs = (breadcrumbs: { title: string | React.ReactNode, path?
     </div>
 );
 
-const renderActionMenu = (actionMenu: ActionMenu) => (
+const renderActionMenu = (actionMenu: ActionMenu, toolBarExts: React.ReactNode[]) => (
     <div>
         {actionMenu.items.map((item, i) => (
             <button disabled={!!item.disabled} qe-id={item.qeId} className='argo-button argo-button--base' onClick={() => item.action()} style={{marginRight: 2}} key={i}>
@@ -93,14 +94,18 @@ const renderActionMenu = (actionMenu: ActionMenu) => (
                 {item.title}
             </button>
         ))}
+        {toolBarExts && toolBarExts.map((ext, index) => (
+            <React.Fragment key={index}>{ext}</React.Fragment>
+        ))}
     </div>
 );
 
 const renderToolbar = (toolbar: Toolbar) => (
     <div className='top-bar row' key='tool-bar'>
         <div className='columns small-9 top-bar__left-side'>
-            {toolbar.actionMenu && renderActionMenu(toolbar.actionMenu)}
+            {toolbar.actionMenu && renderActionMenu(toolbar.actionMenu, toolbar.toolBarExtensions)}
         </div>
+
         <div className='columns small-3 top-bar__right-side'>
             {toolbar.filter && renderFilter(toolbar.filter)}
             {toolbar.tools}