diff --git a/src/stories/components/nav-bar.stories.tsx b/src/stories/components/nav-bar.stories.tsx
new file mode 100644
index 0000000..735a771
--- /dev/null
+++ b/src/stories/components/nav-bar.stories.tsx
@@ -0,0 +1,42 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { NavBar } from '../../components'
+
+const meta: Meta<typeof NavBar> = {
+  title: 'Components/Nav Bar',
+  component: NavBar,
+}
+
+export default meta
+type Story = StoryObj<typeof NavBar>
+
+export const Default: Story = {
+  args: {
+    items: [
+      {
+        href: '/',
+        title: 'Workspaces',
+      },
+      {
+        href: '/group',
+        title: 'Groups',
+      },
+      {
+        href: '/organizations',
+        title: 'Organizations',
+      },
+    ],
+  },
+  render: (args) => {
+    const location = useLocation()
+    const navigate = useNavigate()
+
+    return (
+      <NavBar
+        {...args}
+        pathnameFn={() => location.pathname}
+        navigateFn={navigate}
+      />
+    )
+  },
+}