diff --git a/stories/top-bar.stories.tsx b/stories/top-bar.stories.tsx
new file mode 100644
index 00000000..81e76565
--- /dev/null
+++ b/stories/top-bar.stories.tsx
@@ -0,0 +1,15 @@
+import { storiesOf } from '@storybook/react';
+import * as React from 'react';
+import { TopBar } from '../src/components/top-bar/top-bar';
+
+
+storiesOf('TopBar', module)
+    .add('basic tabs', () => (
+        <TopBar title='My Title' toolbar={{}} />
+    ))
+    .add('with actions menu', () => (
+        <TopBar title='My Title' toolbar={{ actionMenu: { items: [{ action: () => alert(' here' ), title: "click here" }] } }} />
+    ))
+    .add('with extension menu', () => (
+        <TopBar title='My Title' toolbar={{ actionMenu: { items: [{ action: () => alert(' here' ), title: "click here" }] }, toolBarExtensions: [<React.Fragment key={1}>render the custom component</React.Fragment>] }} />
+    ));
\ No newline at end of file