diff --git a/docs/src/components/modules/Sidebar/SidebarDoc.vue b/docs/src/components/modules/Sidebar/SidebarDoc.vue
new file mode 100644
index 0000000..d8e5c68
--- /dev/null
+++ b/docs/src/components/modules/Sidebar/SidebarDoc.vue
@@ -0,0 +1,42 @@
+<template>
+  <DocSection label="Sidebar" :code="code">
+    <template #description>
+      A sidebar
+    </template>
+    <template #example>
+      <Sidebar v-model:visible="visible" :items="items" />
+      <Button icon="plus" @click="visible = !visible" />
+    </template>
+  </DocSection>
+</template>
+
+<script setup lang="ts">
+import DocSection from '@/components/doc/DocSection.vue'
+
+import { ref } from 'vue'
+import { Sidebar, Button } from 'vue-fomantic-ui'
+
+const visible = ref(false)
+const items = [
+  { text: 1 },
+  { text: 2 },
+  { text: 3 },
+]
+
+const code = `<template>
+  <Sidebar v-model:visible="visible" :items="items" />
+  <Button icon="plus" @click="visible = !visible" />
+<\/template>
+
+<script setup>
+import { ref } from 'vue'
+import { Sidebar, Button } from 'vue-fomantic-ui'
+
+const visible = ref(false)
+const items = [
+  { text: 1 },
+  { text: 2 },
+  { text: 3 },
+]
+<\/script>`
+</script>
diff --git a/docs/src/components/modules/Sidebar/SidebarPusherDoc.vue b/docs/src/components/modules/Sidebar/SidebarPusherDoc.vue
new file mode 100644
index 0000000..e69cfa5
--- /dev/null
+++ b/docs/src/components/modules/Sidebar/SidebarPusherDoc.vue
@@ -0,0 +1,82 @@
+<template>
+  <DocSection :code="code">
+    <template #example>
+      <div class="ui top attached demo menu">
+        <a class="item" @click="visible = !visible">
+          <i class="sidebar icon"></i>
+          Menu
+        </a>
+      </div>
+      <Segment attached="bottom">
+        <Sidebar
+          v-model:visible="visible"
+          :items="items"
+          icon="labeled"
+          :mountOnBody="false"
+        />
+        <div class="pusher">
+          <Segment basic>
+            <h3 class="ui header">Application Content</h3>
+            <img src="/images/wireframe/short-paragraph.png" />
+            <img src="/images/wireframe/short-paragraph.png" />
+            <img src="/images/wireframe/short-paragraph.png" />
+            <img src="/images/wireframe/short-paragraph.png" />
+          </Segment>
+        </div>
+      </Segment>
+    </template>
+  </DocSection>
+</template>
+
+<script setup lang="ts">
+import DocSection from '@/components/doc/DocSection.vue'
+
+import { ref } from 'vue'
+import { Sidebar, Segment } from 'vue-fomantic-ui'
+
+const visible = ref(false)
+const items = ref([
+  { icon: 'gamepad', text: 'Games' },
+  { icon: 'video camera', text: 'Channels' },
+  { icon: 'video play', text: 'Videos' },
+])
+
+const code = `<template>
+  <div class="ui top attached demo menu">
+    <a class="item" @click="visible = !visible">
+      <i class="sidebar icon"></i>
+      Menu
+    </a>
+  </div>
+  <Segment attached="bottom">
+    <Sidebar
+      v-model:visible="visible"
+      :items="items"
+      icon="labeled"
+      :mountOnBody="false"
+      v-bind="args"
+    />
+    <div class="pusher">
+      <Segment basic>
+        <h3 class="ui header">Application Content</h3>
+        <img src="./wireframe/short-paragraph.png" />
+        <img src="./wireframe/short-paragraph.png" />
+        <img src="./wireframe/short-paragraph.png" />
+        <img src="./wireframe/short-paragraph.png" />
+      </Segment>
+    </div>
+  </Segment>
+<\/template>
+
+<script setup>
+import { ref } from 'vue'
+import { Sidebar, Segment } from 'vue-fomantic-ui'
+
+const visible = ref(false)
+const items = ref([
+  { icon: 'gamepad', text: 'Games' },
+  { icon: 'video camera', text: 'Channels' },
+  { icon: 'video play', text: 'Videos' },
+])
+<\/script>`
+</script>
diff --git a/docs/src/pages/modules/Sidebar.vue b/docs/src/pages/modules/Sidebar.vue
new file mode 100644
index 0000000..e3d448c
--- /dev/null
+++ b/docs/src/pages/modules/Sidebar.vue
@@ -0,0 +1,40 @@
+<template>
+  <DocComponent
+    title="Sidebar"
+    description="A sidebar hides additional content beside a page."
+    :component-docs="docs"
+    :api-docs="api"
+  />
+</template>
+
+<script setup>
+import DocComponent from '@/components/doc/DocComponent.vue'
+
+// Types
+import SidebarDoc from '@/components/modules/Sidebar/SidebarDoc.vue'
+import SidebarPusherDoc from '@/components/modules/Sidebar/SidebarPusherDoc.vue'
+
+const docs = [
+  {
+    id: 'sidebar',
+    label: 'Sidebar',
+    category: 'Types',
+    component: [SidebarDoc, SidebarPusherDoc],
+  },
+]
+
+const api = {
+  Sidebar: {
+    props: [
+      { name: 'animation', type: 'string', default: 'overlay', description: 'Specifies the animation of the sidebar.' },
+      { name: 'dimmed', type: 'boolean', default: 'false', description: 'When specified, display the dim inside pusher content.' },
+      { name: 'direction', type: 'string', default: 'left', description: 'Specifies the direction the sidebar should appear on.' },
+      { name: 'visible', type: 'boolean', default: 'false', description: 'Specifies the visibility of the sidebar.' }
+    ],
+    events: [
+      { name: 'change', description: 'Callback to invoke when checkbox value is changed.' },
+      { name: 'click', description: 'Callback to invoke when checkbox is clicked.' }
+    ]
+  }
+}
+</script>
diff --git a/docs/src/pages/modules/SidebarDoc.vue b/docs/src/pages/modules/SidebarDoc.vue
deleted file mode 100644
index ed0cd84..0000000
--- a/docs/src/pages/modules/SidebarDoc.vue
+++ /dev/null
@@ -1,134 +0,0 @@
-<template>
-  <div>
-    <doc-page-header
-      title="Sidebar"
-      sub="A sidebar hides additional content beside a page"
-    />
-
-    <sui-container class="main">
-      <sui-header as="h2" dividing>Types</sui-header>
-
-      <doc-example
-        title="Sidebar"
-        description="A sidebar"
-        :code="sidebarCode"
-      >
-        <sui-grid :columns="1">
-          <sui-grid-column>
-            <sui-button @click="visible1 = !visible1" icon>
-              <sui-icon name="arrow right" />
-            </sui-button>
-          </sui-grid-column>
-          <sui-grid-column>
-            <sui-segment class="pushable">
-              <sui-sidebar v-model:visible="visible1" dimmed icon="labeled" inverted>
-                <sui-menu-item>
-                  <sui-icon name="home" />
-                  Home
-                </sui-menu-item>
-                <sui-menu-item>
-                  <sui-icon name="gamepad" />
-                  Games
-                </sui-menu-item>
-                <sui-menu-item>
-                  <sui-icon name="camera" />
-                  Channels
-                </sui-menu-item>
-              </sui-sidebar>
-              <div class="pusher">
-                <sui-segment>
-                  <sui-header as="h2">Main Header</sui-header>
-                  <sui-image src="/images/wireframe/paragraph.png" />
-                </sui-segment>
-              </div>
-            </sui-segment>
-          </sui-grid-column>
-        </sui-grid>
-      </doc-example>
-
-      <sui-header as="h2" dividing>Properties</sui-header>
-      <property-list-table :properties="properties" />
-
-      <sui-header as="h2" dividing>Events</sui-header>
-      <sui-table celled>
-        <sui-table-header>
-          <sui-table-row>
-            <sui-table-header-cell>Name</sui-table-header-cell>
-            <sui-table-header-cell>Description</sui-table-header-cell>
-          </sui-table-row>
-        </sui-table-header>
-        <sui-table-body>
-          <sui-table-row v-for="e in events" :key="e.name">
-            <sui-table-cell>{{ e.name }}</sui-table-cell>
-            <sui-table-cell>{{ e.description }}</sui-table-cell>
-          </sui-table-row>
-        </sui-table-body>
-      </sui-table>
-    </sui-container>
-  </div>
-</template>
-
-<script>
-import { defineComponent, ref } from "vue";
-import DocPageHeader from '../../components/DocPageHeader.vue';
-import DocExample from '../../components/DocExample.vue';
-import PropertyListTable from '../../components/PropertyListTable.vue';
-
-export default defineComponent({
-  name: 'SidebarDoc',
-  components: { DocPageHeader, DocExample, PropertyListTable },
-  setup() {
-    const visible1 = ref(false)
-    const sidebarCode = `<sui-grid :columns="1">
-  <sui-grid-column>
-    <sui-button @click="visible1 = !visible1" icon>
-      <sui-icon name="arrow right" />
-    </sui-button>
-  </sui-grid-column>
-  <sui-grid-column>
-    <sui-segment class="pushable">
-      <sui-sidebar v-model:visible="visible1" dimmed icon="labeled" inverted>
-        <sui-menu-item>
-          <sui-icon name="home" />
-          Home
-        </sui-menu-item>
-        <sui-menu-item>
-          <sui-icon name="gamepad" />
-          Games
-        </sui-menu-item>
-        <sui-menu-item>
-          <sui-icon name="camera" />
-          Channels
-        </sui-menu-item>
-      </sui-sidebar>
-      <div class="pusher">
-        <sui-segment>
-          <sui-header as="h2">Main Header</sui-header>
-          <sui-image src="/images/wireframe/paragraph.png" />
-        </sui-segment>
-      </div>
-    </sui-segment>
-  </sui-grid-column>
-</sui-grid>`
-
-    const properties = [
-      { name: 'animation', type: 'string', default: 'overlay', description: 'Specifies the animation of the sidebar.' },
-      { name: 'dimmed', type: 'boolean', default: 'false', description: 'When specified, display the dim inside pusher content.' },
-      { name: 'direction', type: 'string', default: 'left', description: 'Specifies the direction the sidebar should appear on.' },
-      { name: 'visible', type: 'boolean', default: 'false', description: 'Specifies the visibility of the sidebar.' }
-    ]
-
-    const events = [
-      { name: 'hide', description: 'Callback to invoke when sidebar hide.' },
-      { name: 'show', description: 'Callback to invoke when sidebar show.' }
-    ]
-
-    return {
-      visible1,
-      sidebarCode,
-      properties,
-      events
-    }
-  }
-})
-</script>
\ No newline at end of file
diff --git a/docs/src/router.ts b/docs/src/router.ts
index 22d5ddc..7972f40 100644
--- a/docs/src/router.ts
+++ b/docs/src/router.ts
@@ -13,7 +13,6 @@ import DimmerDoc from './pages/modules/DimmerDoc.vue'
 import DropdownDoc from './pages/modules/DropdownDoc.vue'
 import EmbedDoc from './pages/modules/EmbedDoc.vue'
 import PopupDoc from './pages/modules/PopupDoc.vue'
-import SidebarDoc from './pages/modules/SidebarDoc.vue'
 
 const routes: any = [
   {
@@ -61,7 +60,7 @@ const routes: any = [
       { path: 'modules/popup', component: PopupDoc },
       { path: 'modules/progress', component: () => import('./pages/modules/Progress.vue') },
       { path: 'modules/rating', component: () => import('./pages/modules/Rating.vue') },
-      { path: 'modules/sidebar', component: SidebarDoc },
+      { path: 'modules/sidebar', component: () => import('./pages/modules/Sidebar.vue') },
       { path: 'modules/slider', component: () => import('./pages/modules/Slider.vue') },
       { path: 'modules/tab', component: () => import('./pages/modules/Tab.vue') },
       { path: 'modules/toast', component: () => import('./pages/modules/Toast.vue') },