diff --git a/package.json b/package.json
index 5774565..8a2c360 100644
--- a/package.json
+++ b/package.json
@@ -118,5 +118,6 @@
       "types": "./dist/src/helpers/index.d.ts"
     }
   },
-  "types": "./dist/index.d.ts"
+  "types": "./dist/index.d.ts",
+  "packageManager": "pnpm@9.5.0+sha256.dbdf5961c32909fb030595a9daa1dae720162e658609a8f92f2fa99835510ca5"
 }
diff --git a/src/components/smart/ContextMenu.vue b/src/components/smart/ContextMenu.vue
new file mode 100644
index 0000000..0bd9632
--- /dev/null
+++ b/src/components/smart/ContextMenu.vue
@@ -0,0 +1,96 @@
+<template>
+    <nav class="context-menu-container">
+      <ul class="context-menu-list">
+        <li
+          v-for="(item, index) in menuItems"
+          :key="index"
+          class="context-menu-item"
+        >
+          <a
+            :href="`#${item.label.toLowerCase().replace(/\s+/g, '-')}`"
+            class="context-menu-link"
+          >
+            <span v-if="item.icon" class="icon" v-html="item.icon"></span>
+            {{ item.label }}
+          </a>
+          <div v-if="index < menuItems.length - 1" class="separator"></div>
+        </li>
+      </ul>
+    </nav>
+  </template>
+  
+  <script setup lang="ts">
+  import { computed } from 'vue';
+  
+  const props = defineProps({
+    items: {
+      type: String,
+      default: 'Option1,Option2,Option3',
+    },
+    icons: {
+      type: String,
+      default: '',
+    },
+  });
+  
+  const menuItems = computed(() => {
+    const items = props.items.split(',').map((item) => item.trim());
+    const icons = props.icons ? props.icons.split(',').map((icon) => icon.trim()) : [];
+    return items.map((item, index) => ({
+      label: item,
+      icon: icons[index] || null,
+    }));
+  });
+  </script>
+  
+  <style scoped>
+  .context-menu-container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    border: 1px solid #333;
+    background-color: #1e1e1e;
+    padding: 10px;
+    width: 200px;
+    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+  }
+  
+  .context-menu-list {
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+  }
+  
+  .context-menu-item {
+    width: 100%;
+  }
+  
+  .context-menu-link {
+    text-decoration: none;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    width: 100%;
+    box-sizing: border-box;
+    transition: background-color 0.2s;
+  }
+  
+  .context-menu-link:hover {
+    background-color: #333;
+  }
+  
+  .icon {
+    margin-right: 10px;
+  }
+  
+  .separator {
+    height: 1px;
+    background-color: #444;
+    width: 100%;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/smart/index.ts b/src/components/smart/index.ts
index 8ec827c..b078fe8 100644
--- a/src/components/smart/index.ts
+++ b/src/components/smart/index.ts
@@ -25,3 +25,4 @@ export { default as HoppSmartPlaceholder } from "./Placeholder.vue"
 export { default as HoppSmartTree } from "./Tree.vue"
 export { default as HoppSmartTreeBranch } from "./TreeBranch.vue"
 export { default as HoppSmartSelectWrapper } from "./SelectWrapper.vue"
+export { default as HoppSmartContextMenu } from "./ContextMenu.vue"
diff --git a/src/stories/ContextMenu.story.vue b/src/stories/ContextMenu.story.vue
new file mode 100644
index 0000000..49728cb
--- /dev/null
+++ b/src/stories/ContextMenu.story.vue
@@ -0,0 +1,12 @@
+<template>
+    <Story title="Context Menu">
+      <Variant title="Single">
+        <HoppSmartContextMenu />
+      </Variant>
+    </Story>
+  </template>
+  
+  <script setup lang="ts">
+  import { HoppSmartContextMenu } from "../components/smart"
+  </script>
+  
\ No newline at end of file