diff --git a/packages/docs/menu.md b/packages/docs/menu.md
new file mode 100644
index 0000000000000000000000000000000000000000..3f78af70401f587bf4da15e9791fa2bc8439fd3c
--- /dev/null
+++ b/packages/docs/menu.md
@@ -0,0 +1,50 @@
+# Menu 菜单
+
+## OMenu
+
+### props
+
+| name                | type            | 默认值 | 说明                                   |
+| :------------------ | :-------------- | :----- | -------------------------------------- |
+| modelValue(v-model) | string          | -      | 可选，双向绑定值                       |
+| defaultValue        | boolean         | false  | 可选，非受控状态时，默认选中值         |
+| expanded(v-model)   | Array<string \> | -      | 可选，双向展开的子菜单值               |
+| defaultExpanded     | Array<string \> | false  | 可选，非受控状态时，默认展开的子菜单值 |
+| accordion           | boolean         | false  | 可选，是否开启手风琴模式               |
+| levelIndent         | number          | 24     | 可选，层级缩进值                       |
+
+### event
+
+| name            | 参数                 | 说明                   |
+| :-------------- | :------------------- | :--------------------- |
+| change          | val: string          | 选中值切换后触发       |
+| expanded-change | val: Array<string \> | 展开子菜单值切换后触发 |
+
+## OSubMenu
+
+### props
+
+| name  | type   | 默认值 | 说明           |
+| :---- | :----- | :----- | -------------- |
+| value | string | -      | 必选，子菜单值 |
+
+## slot
+
+| name | 参数 | 说明       |
+| :--- | :--- | :--------- |
+| icon |      | 自定义图标 |
+
+## OMenuItem
+
+### props
+
+| name     | type    | 默认值 | 说明             |
+| :------- | :------ | :----- | ---------------- |
+| value    | string  | -      | 必选，菜单选项值 |
+| disabled | boolean | false  | 可选，是否禁用   |
+
+## event
+
+| name  | 参数 | 说明     |
+| :---- | :--- | :------- |
+| click |      | 点击触发 |
diff --git a/packages/opendesign/src/components/_shared/tree.ts b/packages/opendesign/src/components/_shared/tree.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0b160f7d9fe293d25cde45eb5356ac9a37766426
--- /dev/null
+++ b/packages/opendesign/src/components/_shared/tree.ts
@@ -0,0 +1,71 @@
+export interface TreeNodeT {
+  value: string | number;
+  parent: TreeNodeT | null;
+  children: Array<TreeNodeT>;
+}
+
+export interface TreeT {
+  root: TreeNodeT;
+  getNode(node: TreeNodeT, val: string | number): TreeNodeT | undefined;
+  getPath(node: TreeNodeT, val: string | number, path: Array<TreeNodeT>): Array<TreeNodeT> | undefined;
+}
+
+export class VTree implements TreeT {
+  root: TreeNodeT;
+  constructor(value: string | number, parent: TreeNodeT | null, children: Array<TreeNodeT> = []) {
+    this.root = {
+      value,
+      parent,
+      children,
+    };
+  }
+
+  getNode(node: TreeNodeT, val: string | number): TreeNodeT | undefined {
+    if (node.value === val) {
+      return node;
+    }
+
+    const children: Array<TreeNodeT> = node.children;
+    for (let i = 0, len = children.length; i < len; i++) {
+      const rlt = this.getNode(children[i], val);
+      if (rlt) {
+        return rlt;
+      }
+    }
+  }
+
+  getPath(node: TreeNodeT, val: string | number, path: Array<TreeNodeT>): Array<TreeNodeT> | undefined {
+    const children: Array<TreeNodeT> = node.children;
+    for (let i = 0, len = children.length; i < len; i++) {
+      const child = children[i];
+      if (child.value === val) {
+        return [...path, child];
+      }
+
+      const rlt = this.getPath(child, val, [...path, child]);
+      if (rlt) {
+        return rlt;
+      }
+    }
+  }
+
+  hasSameNode(nodes: Array<TreeNodeT>, val: string | number) {
+    return nodes.some((item) => item.value === val);
+  }
+
+  addNode(node: TreeNodeT) {
+    const parent = node.parent;
+    if (!parent) {
+      if (!this.hasSameNode(this.root.children, node.value)) {
+        node.parent = this.root;
+        this.root.children.push(node);
+      }
+    } else {
+      const parentNode = this.getNode(this.root, parent.value);
+      if (parentNode && !this.hasSameNode(parentNode.children, node.value)) {
+        node.parent = parentNode;
+        parentNode.children.push(node);
+      }
+    }
+  }
+}
diff --git a/packages/opendesign/src/components/menu/OMenu.vue b/packages/opendesign/src/components/menu/OMenu.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a058cb7bb7d59f9e77f813c32995142428079695
--- /dev/null
+++ b/packages/opendesign/src/components/menu/OMenu.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { onMounted, provide, ref, toRefs, watch } from 'vue';
+import { menuInjectKey } from './provide';
+import { menuProps } from './types';
+import MenuTree from './menu';
+import { isUndefined } from '../_shared/is';
+
+const props = defineProps(menuProps);
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', val: string): void;
+  (e: 'change', val: string): void;
+  (e: 'update:expanded', val: Array<string>): void;
+  (e: 'expanded-change', val: Array<string>): void;
+}>();
+
+const menuTree = new MenuTree(NaN, null);
+
+const { accordion, levelIndent, modelValue, defaultValue, expanded, defaultExpanded } = toRefs(props);
+
+// value值
+const realValue = ref(modelValue?.value ?? defaultValue.value);
+watch(
+  () => modelValue?.value,
+  (val) => {
+    realValue.value = isUndefined(val) ? '' : val;
+  }
+);
+
+const updateModelValue = (val: string) => {
+  emits('update:modelValue', val);
+  emits('change', val);
+};
+
+// 选中节点列表
+const activeNodes = ref<Array<string | undefined>>([]);
+watch(
+  () => realValue.value,
+  (val) => {
+    activeNodes.value = menuTree.selectNode(val);
+  }
+);
+
+onMounted(() => {
+  activeNodes.value = menuTree.selectNode(realValue.value);
+});
+
+// 展开节点列表
+const realExpanded = ref(expanded?.value ?? defaultExpanded.value);
+
+watch(
+  () => expanded?.value,
+  (val) => {
+    realExpanded.value = isUndefined(val) ? [] : val;
+  }
+);
+
+const updateExpanded = (val: Array<string>) => {
+  emits('update:expanded', val);
+  emits('expanded-change', val);
+};
+
+// 节点嵌套深度
+const depth = 0;
+
+provide(menuInjectKey, {
+  accordion,
+  levelIndent,
+  realValue,
+  activeNodes,
+  realExpanded,
+  menuTree,
+  depth,
+  updateModelValue,
+  updateExpanded,
+});
+</script>
+
+<template>
+  <ul class="o-menu">
+    <slot></slot>
+  </ul>
+</template>
diff --git a/packages/opendesign/src/components/menu/OMenuItem.vue b/packages/opendesign/src/components/menu/OMenuItem.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2fc28b7084d6dad82c2f56cf9067c7a29b23e132
--- /dev/null
+++ b/packages/opendesign/src/components/menu/OMenuItem.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import { menuItemProps } from './types';
+import { menuInjectKey, subMenuInjectKey } from './provide';
+import { isUndefined } from '../_shared/is';
+
+const props = defineProps(menuItemProps);
+
+const emits = defineEmits<{
+  (e: 'click'): void;
+}>();
+
+const menuInjection = inject(menuInjectKey, null);
+const subMenuInjection = inject(subMenuInjectKey, null);
+
+const isActive = computed(() => {
+  if (menuInjection) {
+    return menuInjection.realValue.value === props.value;
+  }
+  return false;
+});
+
+const onItemClick = (ev: Event) => {
+  ev.stopPropagation();
+
+  if (props.disabled) {
+    return;
+  }
+
+  if (isUndefined(props.value)) {
+    return;
+  }
+
+  emits('click');
+
+  menuInjection?.updateModelValue(props.value);
+};
+
+const depth = subMenuInjection ? subMenuInjection.depth + 1 : 1;
+const paddingLeft = computed(() => `${(menuInjection?.levelIndent.value ?? 24) * depth}px`);
+
+menuInjection?.menuTree.addChild({
+  value: props.value as string,
+  parentVal: subMenuInjection?.value,
+});
+</script>
+
+<template>
+  <li
+    class="o-menu-item"
+    :class="{ 'o-menu-item-active': isActive, 'o-menu-item-disabled': $props.disabled }"
+    :style="{ 'padding-left': paddingLeft }"
+    @click="onItemClick"
+  >
+    <slot></slot>
+  </li>
+</template>
diff --git a/packages/opendesign/src/components/menu/OSubMenu.vue b/packages/opendesign/src/components/menu/OSubMenu.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c1740c64b811bb7f2d825fc1c2a26be52ba56c91
--- /dev/null
+++ b/packages/opendesign/src/components/menu/OSubMenu.vue
@@ -0,0 +1,116 @@
+<script lang="ts" setup>
+import { computed, inject, provide } from 'vue';
+import { subMenuProps } from './types';
+import { IconChevronRight } from '../icons';
+import { menuInjectKey, subMenuInjectKey } from './provide';
+import { isUndefined } from '../_shared/is';
+
+const props = defineProps(subMenuProps);
+
+const menuInjection = inject(menuInjectKey, null);
+const subMenuInjection = inject(subMenuInjectKey, null);
+
+const isExpanded = computed(() => {
+  if (isUndefined(props.value)) {
+    return false;
+  }
+
+  if (menuInjection) {
+    return menuInjection.realExpanded.value.includes(props.value);
+  }
+
+  return false;
+});
+
+const isActive = computed(() => {
+  if (menuInjection) {
+    return menuInjection.activeNodes.value.includes(props.value);
+  }
+
+  return false;
+});
+
+const onSubItemClick = (ev: Event) => {
+  ev.stopPropagation();
+
+  if (isUndefined(props.value)) {
+    return;
+  }
+
+  let set = menuInjection ? new Set([...menuInjection.realExpanded.value]) : new Set([]);
+
+  if (isExpanded.value && set.has(props.value)) {
+    set.delete(props.value);
+  }
+
+  if (!isExpanded.value && !set.has(props.value)) {
+    if (menuInjection?.accordion.value) {
+      const siblings = menuInjection?.menuTree.getSiblings(props.value) || [];
+      siblings.forEach((val) => {
+        set.delete(val as string);
+      });
+    }
+    set.add(props.value);
+  }
+
+  const expandedVal = Array.from(set);
+
+  menuInjection?.updateExpanded(expandedVal);
+};
+
+const depth = subMenuInjection ? subMenuInjection.depth + 1 : 1;
+
+const paddingLeft = computed(() => `${(menuInjection?.levelIndent.value ?? 24) * depth}px`);
+
+provide(subMenuInjectKey, { value: props.value, depth });
+
+menuInjection?.menuTree.addChild({
+  value: props.value as string,
+  parentVal: subMenuInjection?.value,
+});
+
+// 过渡动画
+const onBeforeEnter = (el: HTMLUListElement) => {
+  el.style.height = '0px';
+};
+const onEnter = (el: HTMLUListElement) => {
+  el.style.height = `${el.scrollHeight}px`;
+};
+const onAfterEnter = (el: HTMLUListElement) => {
+  el.style.height = 'auto';
+};
+const onBeforeLeave = (el: HTMLUListElement) => {
+  el.style.height = `${el.offsetHeight}px`;
+};
+const onLeave = (el: HTMLUListElement) => {
+  el.style.height = '0px';
+};
+</script>
+
+<template>
+  <li class="o-sub-menu" :class="{ 'o-sub-menu-active': isActive, 'o-sub-menu-expanded': isExpanded }" @click="onSubItemClick">
+    <div class="o-sub-menu-title" :style="{ 'padding-left': paddingLeft }">
+      <span v-if="$slots.icon" class="o-sub-menu-title-icon">
+        <slot name="icon"></slot>
+      </span>
+      <span class="o-sub-menu-title-content">
+        <slot name="title"></slot>
+      </span>
+      <span class="o-sub-menu-title-arrow">
+        <IconChevronRight />
+      </span>
+    </div>
+    <transition
+      name="sub-menu-children"
+      @before-enter="onBeforeEnter"
+      @enter="onEnter"
+      @after-enter="onAfterEnter"
+      @before-leave="onBeforeLeave"
+      @leave="onLeave"
+    >
+      <ul v-show="isExpanded" class="o-sub-menu-children">
+        <slot></slot>
+      </ul>
+    </transition>
+  </li>
+</template>
diff --git a/packages/opendesign/src/components/menu/__demo__/IndexMenu.vue b/packages/opendesign/src/components/menu/__demo__/IndexMenu.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e5334052a14c12e99684894b93231fb63a98cdde
--- /dev/null
+++ b/packages/opendesign/src/components/menu/__demo__/IndexMenu.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import '../style';
+import MenuBasic from './MenuBasic.vue';
+import MenuAccordion from './MenuAccordion.vue';
+</script>
+
+<template>
+  <div class="page-demo">
+    <MenuBasic />
+    <MenuAccordion />
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/menu/__demo__/MenuAccordion.vue b/packages/opendesign/src/components/menu/__demo__/MenuAccordion.vue
new file mode 100644
index 0000000000000000000000000000000000000000..72787147519d249cca24e507be329cb6d48a489c
--- /dev/null
+++ b/packages/opendesign/src/components/menu/__demo__/MenuAccordion.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { IconAdd } from '../../icons';
+import { OMenu, OSubMenu, OMenuItem } from '../index';
+
+const expandedArr = ref(['2']);
+const activeVal = ref('2-1');
+</script>
+
+<template>
+  <h4>手风琴模式：同级别展开互斥</h4>
+  <section>
+    <OMenu v-model="activeVal" v-model:expanded="expandedArr" accordion>
+      <OSubMenu value="1">
+        <template #title>一级菜单1</template>
+        <template #icon><IconAdd /></template>
+        <OMenuItem value="1-1">二级菜单1-1</OMenuItem>
+        <OMenuItem value="1-2">二级菜单1-2</OMenuItem>
+        <OMenuItem value="1-3">二级菜单1-3</OMenuItem>
+        <OMenuItem value="1-4">二级菜单1-4</OMenuItem>
+      </OSubMenu>
+      <OSubMenu value="2">
+        <template #title>一级菜单2</template>
+        <template #icon><IconAdd /></template>
+        <OMenuItem value="2-1">二级菜单2-1</OMenuItem>
+        <OMenuItem value="2-2">二级菜单2-2</OMenuItem>
+        <OMenuItem value="2-3">二级菜单2-3</OMenuItem>
+        <OMenuItem value="2-4">二级菜单2-4</OMenuItem>
+      </OSubMenu>
+      <OSubMenu value="3">
+        <template #title>一级菜单3</template>
+        <template #icon><IconAdd /></template>
+        <OSubMenu value="3-1">
+          <template #title>二级菜单3-1</template>
+          <template #icon><IconAdd /></template>
+          <OMenuItem value="3-1-1">三级菜单3-1-1</OMenuItem>
+          <OMenuItem value="3-1-2">三级菜单3-1-2</OMenuItem>
+          <OMenuItem value="3-1-3">三级菜单3-1-3</OMenuItem>
+          <OMenuItem value="3-1-4">三级菜单3-1-4</OMenuItem>
+        </OSubMenu>
+        <OMenuItem value="3-2">二级菜单3-2</OMenuItem>
+        <OMenuItem value="3-3">二级菜单3-3</OMenuItem>
+        <OMenuItem value="3-4">二级菜单3-4</OMenuItem>
+        <OMenuItem value="3-5">二级菜单3-5</OMenuItem>
+      </OSubMenu>
+    </OMenu>
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/menu/__demo__/MenuBasic.vue b/packages/opendesign/src/components/menu/__demo__/MenuBasic.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1d8f778db0c653efc31d605ee834089b18809f1f
--- /dev/null
+++ b/packages/opendesign/src/components/menu/__demo__/MenuBasic.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { IconAdd } from '../../icons';
+import { OMenu, OSubMenu, OMenuItem } from '../index';
+
+const expandedArr = ref(['1']);
+const activeVal = ref('1-1');
+
+const handleChange = (val: string) => {
+  console.log(val);
+};
+const handleExpandedChange = (val: Array<string>) => {
+  console.log(val);
+};
+
+const activeVal2 = ref('1-1');
+</script>
+
+<template>
+  <h4>基础用法</h4>
+  <section>
+    <div>
+      <OMenu v-model="activeVal" v-model:expanded="expandedArr" @change="handleChange" @expanded-change="handleExpandedChange">
+        <OSubMenu value="1">
+          <template #title>一级菜单1</template>
+          <template #icon><IconAdd /></template>
+          <OMenuItem value="1-1">二级菜单1-1</OMenuItem>
+          <OMenuItem value="1-2" disabled>二级菜单1-2</OMenuItem>
+          <OMenuItem value="1-3">二级菜单1-3</OMenuItem>
+          <OMenuItem value="1-4">二级菜单1-4</OMenuItem>
+        </OSubMenu>
+        <OSubMenu value="2">
+          <template #title>一级菜单2</template>
+          <template #icon><IconAdd /></template>
+          <OMenuItem value="2-1">二级菜单2-1</OMenuItem>
+          <OMenuItem value="2-2">二级菜单2-2</OMenuItem>
+          <OMenuItem value="2-3">二级菜单2-3</OMenuItem>
+          <OMenuItem value="2-4">二级菜单2-4</OMenuItem>
+        </OSubMenu>
+        <OSubMenu value="3">
+          <template #title>一级菜单3</template>
+          <template #icon><IconAdd /></template>
+          <OSubMenu value="3-1">
+            <template #title>二级菜单3-1</template>
+            <template #icon><IconAdd /></template>
+            <OMenuItem value="3-1-1">三级菜单3-1-1</OMenuItem>
+            <OMenuItem value="3-1-2">三级菜单3-1-2</OMenuItem>
+            <OMenuItem value="3-1-3">三级菜单3-1-3</OMenuItem>
+            <OMenuItem value="3-1-4">三级菜单3-1-4</OMenuItem>
+          </OSubMenu>
+          <OMenuItem value="3-2">二级菜单3-2</OMenuItem>
+          <OMenuItem value="3-3">二级菜单3-3</OMenuItem>
+          <OMenuItem value="3-4">二级菜单3-4</OMenuItem>
+          <OMenuItem value="3-5">二级菜单3-5</OMenuItem>
+        </OSubMenu>
+      </OMenu>
+    </div>
+
+    <div>
+      <OMenu v-model="activeVal2" :style="{ width: '120px' }" @change="handleChange">
+        <OMenuItem value="2-1">菜单2-1</OMenuItem>
+        <OMenuItem value="2-2">菜单2-2</OMenuItem>
+        <OMenuItem value="2-3">菜单2-3</OMenuItem>
+        <OMenuItem value="2-4">菜单2-4</OMenuItem>
+
+        <OMenuItem value="3-2">菜单3-2</OMenuItem>
+        <OMenuItem value="3-3">菜单3-3</OMenuItem>
+        <OMenuItem value="3-4">菜单3-4</OMenuItem>
+        <OMenuItem value="3-5">菜单3-5</OMenuItem>
+      </OMenu>
+    </div>
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/menu/index.ts b/packages/opendesign/src/components/menu/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7202a587b56ea81e6ed4049dbfe3e78f2040c72b
--- /dev/null
+++ b/packages/opendesign/src/components/menu/index.ts
@@ -0,0 +1,24 @@
+import type { App } from 'vue';
+
+import _OMenu from './OMenu.vue';
+import _OSubMenu from './OSubMenu.vue';
+import _OMenuItem from './OMenuItem.vue';
+
+const OMenu = Object.assign(_OMenu, {
+  install(app: App) {
+    app.component(_OMenu.name, _OMenu);
+  },
+});
+
+const OSubMenu = Object.assign(_OSubMenu, {
+  install(app: App) {
+    app.component(_OSubMenu.name, _OSubMenu);
+  },
+});
+
+const OMenuItem = Object.assign(_OMenuItem, {
+  install(app: App) {
+    app.component(_OMenuItem.name, _OMenuItem);
+  },
+});
+export { OMenu, OSubMenu, OMenuItem };
diff --git a/packages/opendesign/src/components/menu/menu.ts b/packages/opendesign/src/components/menu/menu.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cfc4aac98d2696077119bf73af20db80dfe3605c
--- /dev/null
+++ b/packages/opendesign/src/components/menu/menu.ts
@@ -0,0 +1,54 @@
+import { VTree } from '../_shared/tree';
+import type { TreeNodeT } from '../_shared/tree';
+import { isString, isUndefined } from '../_shared/is';
+
+interface MenuNodeT extends TreeNodeT {}
+
+export default class MenuTree extends VTree {
+  constructor(value: string | number, parent: MenuNodeT | null, children: Array<MenuNodeT> = []) {
+    super(value, parent, children);
+  }
+
+  addChild(opitons: { value: string; parentVal: string | undefined }) {
+    const { value, parentVal } = opitons;
+    const node: MenuNodeT = {
+      value,
+      parent: null,
+      children: [],
+    };
+
+    if (isUndefined(parentVal)) {
+      if (!this.hasSameNode(this.root.children, node.value)) {
+        node.parent = this.root;
+        this.root.children.push(node);
+      }
+    } else {
+      const parentNode = this.getNode(this.root, parentVal);
+      if (parentNode && !this.hasSameNode(parentNode.children, node.value)) {
+        node.parent = parentNode;
+        parentNode.children.push(node);
+      }
+    }
+  }
+
+  selectNode(val: string) {
+    const path = this.getPath(this.root, val, []) || [];
+    return path.map((node) => {
+      if (isString(node.value)) {
+        return node.value;
+      }
+    });
+  }
+
+  getSiblings(val: string) {
+    const node = this.getNode(this.root, val);
+    if (!node || !node.parent) {
+      return [];
+    }
+    return node.parent.children.map((item) => {
+      if (item.value !== val) {
+        return item.value;
+      }
+    });
+  }
+}
diff --git a/packages/opendesign/src/components/menu/provide.ts b/packages/opendesign/src/components/menu/provide.ts
new file mode 100644
index 0000000000000000000000000000000000000000..99811e06642f178642f246b7b976f88b0762d50e
--- /dev/null
+++ b/packages/opendesign/src/components/menu/provide.ts
@@ -0,0 +1,19 @@
+import { InjectionKey, Ref } from 'vue';
+import MenuTree from './menu';
+
+export const menuInjectKey: InjectionKey<{
+  accordion: Ref<boolean>;
+  levelIndent: Ref<number>;
+  realValue: Ref<string>;
+  activeNodes: Ref<Array<string | undefined>>;
+  realExpanded: Ref<Array<string>>;
+  menuTree: MenuTree;
+  depth: number;
+  updateModelValue: (val: string) => void;
+  updateExpanded: (val: Array<string>) => void;
+}> = Symbol('provide-menu');
+
+export const subMenuInjectKey: InjectionKey<{
+  value: string;
+  depth: number;
+}> = Symbol('provide-sub-menu');
diff --git a/packages/opendesign/src/components/menu/style/index.scss b/packages/opendesign/src/components/menu/style/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f4fe0d6200ddd2a3d763857f44c0a26ffce8b241
--- /dev/null
+++ b/packages/opendesign/src/components/menu/style/index.scss
@@ -0,0 +1,103 @@
+@use './var.scss';
+
+.o-menu {
+  list-style: none;
+  width: var(--o-menu-width);
+  color: var(--o-menu-color);
+  background-color: var(--o-menu-bg);
+  margin: 0;
+  padding: 0;
+}
+
+// submenu
+.o-sub-menu {
+  font-size: var(--o-sub-menu-text-size);
+  line-height: var(--o-sub-menu-text-height);
+  font-weight: 400;
+}
+
+.o-sub-menu-active {
+  & > .o-sub-menu-title {
+    font-weight: 700;
+  }
+}
+
+.o-sub-menu-expanded {
+  & > .o-sub-menu-title {
+    .o-sub-menu-title-arrow {
+      transform: rotate(90deg);
+    }
+  }
+}
+
+.o-sub-menu-title {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 16px 48px 16px 24px;
+  border-radius: 8px;
+  margin-bottom: 4px;
+  cursor: pointer;
+  transition: background-color var(--o-duration-m2) var(--o-easing-standard);
+
+  &:hover {
+    background-color: var(--o-sub-menu-bg-hover);
+  }
+}
+
+.o-sub-menu-title-icon {
+  margin-right: 4px;
+  font-size: var(--o-sub-menu-icon-height);
+}
+
+.o-sub-menu-title-content {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.o-sub-menu-title-arrow {
+  position: absolute;
+  right: 16px;
+  transform: rotate(0);
+  font-size: var(--o-sub-menu-icon-height);
+  transition: transform var(--o-duration-m2) var(--o-easing-standard);
+}
+
+.o-sub-menu-children {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  overflow: hidden;
+  transition: height var(--o-duration-m2) var(--o-easing-standard);
+}
+
+//menu-item
+.o-menu-item {
+  font-size: var(--o-menu-item-text-size);
+  line-height: var(--o-menu-item-text-height);
+  border-radius: 8px;
+  padding: 12px 16px 12px 36px;
+  cursor: pointer;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  transition: background-color var(--o-duration-s) var(--o-easing-standard);
+
+  &:not(.o-menu-item-disabled):hover {
+    background-color: var(--o-menu-item-bg-hover);
+  }
+
+  & + .o-menu-item {
+    margin-top: 4px;
+  }
+}
+
+.o-menu-item-active {
+  background-color: var(--o-menu-item-bg-active);
+}
+
+.o-menu-item-disabled {
+  cursor: not-allowed;
+  color: var(--o-menu-item-color-disabled);
+}
diff --git a/packages/opendesign/src/components/menu/style/index.ts b/packages/opendesign/src/components/menu/style/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..591b2fbd72dcd5e987362d645b561bd2fac42716
--- /dev/null
+++ b/packages/opendesign/src/components/menu/style/index.ts
@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';
diff --git a/packages/opendesign/src/components/menu/style/var.scss b/packages/opendesign/src/components/menu/style/var.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b97c4874532fb9d87787ba2ae71383224caafb6b
--- /dev/null
+++ b/packages/opendesign/src/components/menu/style/var.scss
@@ -0,0 +1,20 @@
+.o-menu {
+  --o-menu-width: 260px;
+  --o-menu-bg: var(--o-color-fill2);
+  --o-menu-color: var(--o-color-info1);
+}
+
+.o-sub-menu {
+  --o-sub-menu-bg-hover: var(--o-color-control2-light);
+  --o-sub-menu-text-size: var(--o-font_size-h4);
+  --o-sub-menu-text-height: var(--o-line_height-h4);
+  --o-sub-menu-icon-height: var(--o-font_size-h1);
+}
+
+.o-menu-item {
+  --o-menu-item-text-size: var(--o-font_size-text);
+  --o-menu-item-text-height: var(--o-line_height-text);
+  --o-menu-item-bg-active: var(--o-color-control2);
+  --o-menu-item-bg-hover: var(--o-color-control2-light);
+  --o-menu-item-color-disabled: var(--o-color-info4);
+}
diff --git a/packages/opendesign/src/components/menu/types.ts b/packages/opendesign/src/components/menu/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..21a0004d6de3df4f8f779b2283e2c3625ae7b3d9
--- /dev/null
+++ b/packages/opendesign/src/components/menu/types.ts
@@ -0,0 +1,63 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+// MenuProps
+export const menuProps = {
+  /**
+   * 是否开启手风琴模式
+   */
+  accordion: {
+    type: Boolean,
+    default: false,
+  },
+  // 层级缩进
+  levelIndent: {
+    type: Number,
+    default: 24,
+  },
+  /**
+   * 默认选中值
+   */
+  modelValue: {
+    type: String,
+  },
+  // 非受控模式时，默认选中值
+  defaultValue: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 默认展开的子菜单值
+   */
+  expanded: {
+    type: Array as PropType<Array<string>>,
+  },
+  // 非受控模式时，默认展开的子菜单值
+  defaultExpanded: {
+    type: Array as PropType<Array<string>>,
+    default: () => [],
+  },
+};
+
+export type MenuPropsT = ExtractPropTypes<typeof menuProps>;
+
+// SubMenuProps
+export const subMenuProps = {
+  value: {
+    type: String,
+    required: true,
+  },
+};
+export type SubMenuPropsT = ExtractPropTypes<typeof subMenuProps>;
+
+// MenuItemProps
+export const menuItemProps = {
+  value: {
+    type: String,
+    required: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+};
+export type MenuItemPropsT = ExtractPropTypes<typeof menuItemProps>;
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index e64b38e4685e1b82fdce709e43c15b45f930bc7b..99d7b1e8df468eda819fbb9f322bcfbcfb6ee121 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -147,6 +147,12 @@ export const routes = [
     label: '面包屑',
     component: () => import('@components/breadcrumb/__demo__/IndexBreadcrumb.vue'),
   },
+  {
+    path: '/menu',
+    name: 'OMenu ',
+    label: '菜单',
+    component: () => import('@components/menu/__demo__/IndexMenu.vue'),
+  },
 ];
 
 export const router = createRouter({