diff --git a/src/dock.svelte b/src/dock.svelte
new file mode 100644
index 0000000..a380d69
--- /dev/null
+++ b/src/dock.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+    import { adaptHotkey } from "siyuan";
+    export let text: string;
+</script>
+
+<div class="fn__flex-1 fn__flex-column">
+    <div class="block__icons">
+        <div class="block__logo">
+            <svg><use xlink:href="#iconEmoji" /></svg>
+            Custom Dock
+        </div>
+        <span class="fn__flex-1 fn__space" />
+        <span
+            data-type="min"
+            class="block__icon b3-tooltips b3-tooltips__sw"
+            aria-label="Min ${adaptHotkey('⌘W')}"
+            ><svg><use xlink:href="#iconMin" /></svg></span
+        >
+    </div>
+    <div class="fn__flex-1 plugin-sample__custom-dock">
+        {text}
+    </div>
+</div>
diff --git a/src/i18n/en_US.json b/src/i18n/en_US.json
index 012adc1..7e9425a 100644
--- a/src/i18n/en_US.json
+++ b/src/i18n/en_US.json
@@ -1,4 +1,10 @@
 {
+    "addTopBarIcon": "Add a top bar icon by plugin",
+    "cancel": "Cancel",
+    "save": "Save",
+    "byeMenu": "Bye, Menu!",
+    "helloPlugin": "Hello, Plugin!",
+    "byePlugin": "Bye, Plugin!",
     "name": "SiYuan",
     "hello": {
         "makesure": "Before using this template, please read the <a href=\"https://github.com/siyuan-note/plugin-sample\">offical sample</a>, make sure that you've known about the pipeline for plugin developing."
diff --git a/src/i18n/zh_CN.json b/src/i18n/zh_CN.json
index f601228..7eaa3eb 100644
--- a/src/i18n/zh_CN.json
+++ b/src/i18n/zh_CN.json
@@ -1,4 +1,10 @@
 {
+    "addTopBarIcon": "使用插件添加一个顶栏按钮",
+    "cancel": "取消",
+    "save": "保存",
+    "byeMenu": "再见，菜单！",
+    "helloPlugin": "你好，插件！",
+    "byePlugin": "再见，插件！",
     "name": "思源",
     "hello": {
         "makesure": "使用这个模板之前，请阅读<a href=\"https://github.com/siyuan-note/plugin-sample\">官方教程</a>, 确保自己已经理解了插件的基本开发流程。"
diff --git a/src/index.ts b/src/index.ts
index 84af345..9b085f3 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -2,27 +2,164 @@
  * Copyright (c) 2023 frostime. All rights reserved.
  * https://github.com/frostime/sy-plugin-template-vite
  */
-import { Plugin, showMessage, Dialog } from "siyuan";
-import Hello from "./hello.svelte";
-import SettingPannel from "./libs/setting-panel.svelte";
+import { Plugin, showMessage, confirm, Dialog, Menu, isMobile, openTab } from "siyuan";
 import "./index.scss";
 
+import HelloExample from "./hello.svelte";
+import DockExample from "./dock.svelte";
+import SettingPannel from "./libs/setting-panel.svelte";
+
+const STORAGE_NAME = "menu-config";
+const TAB_TYPE = "custom_tab";
+const DOCK_TYPE = "dock_tab";
+
 export default class SamplePlugin extends Plugin {
 
     counter: { [key: string]: number } = {
         hello: 0,
     };
+    private customTab: () => any;
 
     async onload() {
-        console.log("onload");
-        showMessage("Hello World");
-        this.addTopBar(
-            {
-                icon: "iconEmoji",
-                "title": "Hello SiYuan",
-                "callback": () => this.openHelloInDialog()
+        showMessage("Hello SiYuan Plugin");
+        console.log(this.i18n.helloPlugin);
+
+        const topBarElement = this.addTopBar({
+            icon: "iconEmoji",
+            title: this.i18n.addTopBarIcon,
+            position: "left",
+            callback: () => {
+                this.addMenu(topBarElement.getBoundingClientRect());
             }
-        )
+        });
+
+        this.customTab = this.addTab({
+            type: TAB_TYPE,
+            init() {
+                this.tab = new HelloExample({
+                    target: this.element,
+                    props: {
+                        name: this.i18n.name,
+                        opendCount: this.counter.hello,
+                        i18n: this.i18n.hello
+                    }
+                });
+            },
+            destroy() {
+                console.log("destroy tab:", TAB_TYPE);
+                this.tab.$destroy(); //Call svelte component destroy
+            }
+        });
+
+        this.addDock({
+            config: {
+                position: "LeftBottom",
+                size: { width: 200, height: 0 },
+                icon: "iconEmoji",
+                title: "Custom Dock",
+            },
+            data: {
+                text: "This is my custom dock"
+            },
+            type: DOCK_TYPE,
+            init() {
+                new DockExample({
+                    target: this.element,
+                    props: {
+                        text: this.data.text,
+                    }
+                });
+            },
+            destroy() {
+                console.log("destroy dock:", DOCK_TYPE);
+            }
+        });
+
+    }
+
+    private wsEvent({ detail }: any) {
+        console.log(detail);
+    }
+
+    private async addMenu(rect: DOMRect) {
+        const menu = new Menu("topBarSample", () => {
+            console.log(this.i18n.byeMenu);
+        });
+        menu.addItem({
+            icon: "iconHelp",
+            label: "Confirm",
+            click() {
+                confirm("Confirm", "Is this a confirm?", () => {
+                    showMessage("confirm");
+                }, () => {
+                    showMessage("cancel");
+                });
+            }
+        });
+        menu.addItem({
+            icon: "iconFeedback",
+            label: "Message",
+            click: () => {
+                showMessage(this.i18n.helloPlugin);
+            }
+        });
+        menu.addItem({
+            icon: "iconInfo",
+            label: "Dialog",
+            click: () => this.openHelloInDialog()
+        });
+        menu.addItem({
+            icon: "iconLayoutBottom",
+            label: "Open Tab",
+            click: () => {
+                openTab({
+                    custom: {
+                        icon: "iconEmoji",
+                        title: "Custom Tab",
+                        data: {
+                            text: "This is my custom tab",
+                        },
+                        fn: this.customTab
+                    },
+                });
+            }
+        });
+        menu.addItem({
+            icon: "iconTrashcan",
+            label: "Remove Data",
+            click: () => {
+                this.removeData(STORAGE_NAME);
+            }
+        });
+        menu.addItem({
+            icon: "iconSelect",
+            label: "On ws-main",
+            click: () => {
+                this.eventBus.on("ws-main", this.wsEvent);
+            }
+        });
+        menu.addItem({
+            icon: "iconClose",
+            label: "Off ws-main",
+            click: () => {
+                this.eventBus.off("ws-main", this.wsEvent);
+            }
+        });
+        menu.addSeparator();
+        menu.addItem({
+            icon: "iconSparkles",
+            label: this.data[STORAGE_NAME] || "Readonly",
+            type: "readonly",
+        });
+        if (isMobile()) {
+            menu.fullscreen();
+        } else {
+            menu.open({
+                x: rect.right,
+                y: rect.bottom,
+                isLeft: true,
+            });
+        }
     }
 
     openSetting(): void {
@@ -51,7 +188,7 @@ export default class SamplePlugin extends Plugin {
                 hello.$destroy();
             },
         });
-        let hello = new Hello({
+        let hello = new HelloExample({
             target: dialog.element.querySelector("#helloPanel"),
             props: {
                 name: this.i18n.name,
@@ -62,7 +199,7 @@ export default class SamplePlugin extends Plugin {
     }
 
     async onunload() {
-        showMessage("Goodbye World");
+        showMessage("Goodbye SiYuan Plugin");
         console.log("onunload");
     }
 }