diff --git a/packages/nutui-taro-demo/src/nav/pages/menu/basic.vue b/packages/nutui-taro-demo/src/nav/pages/menu/basic.vue
new file mode 100644
index 0000000000..405e679734
--- /dev/null
+++ b/packages/nutui-taro-demo/src/nav/pages/menu/basic.vue
@@ -0,0 +1,26 @@
+<template>
+  <nut-menu>
+    <nut-menu-item v-model="val1" :options="options1" />
+    <nut-menu-item v-model="val2" :options="options2" @change="onChange" />
+  </nut-menu>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const val1 = ref(0);
+const val2 = ref('a');
+const options1 = ref([
+  { text: '全部商品', value: 0 },
+  { text: '新款商品', value: 1 },
+  { text: '活动商品', value: 2 }
+]);
+const options2 = ref([
+  { text: '默认排序', value: 'a' },
+  { text: '好评排序', value: 'b' },
+  { text: '销量排序', value: 'c' }
+]);
+
+const onChange = (val) => {
+  console.log('val', val);
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/nav/pages/menu/col.vue b/packages/nutui-taro-demo/src/nav/pages/menu/col.vue
new file mode 100644
index 0000000000..95a9aa9c6e
--- /dev/null
+++ b/packages/nutui-taro-demo/src/nav/pages/menu/col.vue
@@ -0,0 +1,30 @@
+<template>
+  <nut-menu>
+    <nut-menu-item v-model="val" :cols="2" :options="options" />
+  </nut-menu>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const val = ref(0);
+const options = ref([
+  { text: '全部商品', value: 0 },
+  { text: '家庭清洁/纸品', value: 1 },
+  { text: '个人护理', value: 2 },
+  { text: '美妆护肤', value: 3 },
+  { text: '食品饮料', value: 4 },
+  { text: '家用电器', value: 5 },
+  { text: '母婴', value: 6 },
+  { text: '数码', value: 7 },
+  { text: '电脑、办公', value: 8 },
+  { text: '运动户外', value: 9 },
+  { text: '厨具', value: 10 },
+  { text: '医疗保健', value: 11 },
+  { text: '酒类', value: 12 },
+  { text: '生鲜', value: 13 },
+  { text: '家具', value: 14 },
+  { text: '传统滋补', value: 15 },
+  { text: '汽车用品', value: 16 },
+  { text: '家居日用', value: 17 }
+]);
+</script>
diff --git a/packages/nutui-taro-demo/src/nav/pages/menu/color.vue b/packages/nutui-taro-demo/src/nav/pages/menu/color.vue
new file mode 100644
index 0000000000..ba72dcbe29
--- /dev/null
+++ b/packages/nutui-taro-demo/src/nav/pages/menu/color.vue
@@ -0,0 +1,22 @@
+<template>
+  <nut-menu active-color="green">
+    <nut-menu-item v-model="val1" :options="options1" />
+    <nut-menu-item v-model="val2" :options="options2" />
+  </nut-menu>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const val1 = ref(0);
+const val2 = ref('a');
+const options1 = ref([
+  { text: '全部商品', value: 0 },
+  { text: '新款商品', value: 1 },
+  { text: '活动商品', value: 2 }
+]);
+const options2 = ref([
+  { text: '默认排序', value: 'a' },
+  { text: '好评排序', value: 'b' },
+  { text: '销量排序', value: 'c' }
+]);
+</script>
diff --git a/packages/nutui-taro-demo/src/nav/pages/menu/custom.vue b/packages/nutui-taro-demo/src/nav/pages/menu/custom.vue
new file mode 100644
index 0000000000..6cb027d6d2
--- /dev/null
+++ b/packages/nutui-taro-demo/src/nav/pages/menu/custom.vue
@@ -0,0 +1,26 @@
+<template>
+  <nut-menu>
+    <nut-menu-item v-model="val" :options="options" />
+    <nut-menu-item ref="item" title="筛选">
+      <div :style="{ display: 'flex', flex: 1, 'justify-content': 'space-between', 'align-items': 'center' }">
+        <div :style="{ marginRight: '10px' }">自定义内容</div>
+        <nut-button @click="onClick">确认</nut-button>
+      </div>
+    </nut-menu-item>
+  </nut-menu>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const item = ref();
+const val = ref(0);
+const options = ref([
+  { text: '全部商品', value: 0 },
+  { text: '新款商品', value: 1 },
+  { text: '活动商品', value: 2 }
+]);
+
+const onClick = () => {
+  item.value.toggle();
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/nav/pages/menu/disabled.vue b/packages/nutui-taro-demo/src/nav/pages/menu/disabled.vue
new file mode 100644
index 0000000000..ca39943f7e
--- /dev/null
+++ b/packages/nutui-taro-demo/src/nav/pages/menu/disabled.vue
@@ -0,0 +1,26 @@
+<template>
+  <nut-menu>
+    <nut-menu-item v-model="val1" disabled :options="options1" />
+    <nut-menu-item v-model="val2" disabled :options="options2" @change="onChange" />
+  </nut-menu>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const val1 = ref(0);
+const val2 = ref('a');
+const options1 = ref([
+  { text: '全部商品', value: 0 },
+  { text: '新款商品', value: 1 },
+  { text: '活动商品', value: 2 }
+]);
+const options2 = ref([
+  { text: '默认排序', value: 'a' },
+  { text: '好评排序', value: 'b' },
+  { text: '销量排序', value: 'c' }
+]);
+
+const onChange = (val) => {
+  console.log('val', val);
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/nav/pages/menu/icon.vue b/packages/nutui-taro-demo/src/nav/pages/menu/icon.vue
new file mode 100644
index 0000000000..f33132673e
--- /dev/null
+++ b/packages/nutui-taro-demo/src/nav/pages/menu/icon.vue
@@ -0,0 +1,30 @@
+<template>
+  <nut-menu>
+    <template #icon>
+      <TriangleDown />
+    </template>
+    <nut-menu-item v-model="val1" :options="options1" />
+    <nut-menu-item v-model="val2" :options="options2">
+      <template #icon>
+        <Checked></Checked>
+      </template>
+    </nut-menu-item>
+  </nut-menu>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { TriangleDown, Checked } from '@nutui/icons-vue-taro';
+const val1 = ref(0);
+const val2 = ref('a');
+const options1 = ref([
+  { text: '全部商品', value: 0 },
+  { text: '新款商品', value: 1 },
+  { text: '活动商品', value: 2 }
+]);
+const options2 = ref([
+  { text: '默认排序', value: 'a' },
+  { text: '好评排序', value: 'b' },
+  { text: '销量排序', value: 'c' }
+]);
+</script>
diff --git a/packages/nutui-taro-demo/src/nav/pages/menu/index.vue b/packages/nutui-taro-demo/src/nav/pages/menu/index.vue
index 76978a331e..692ab614de 100644
--- a/packages/nutui-taro-demo/src/nav/pages/menu/index.vue
+++ b/packages/nutui-taro-demo/src/nav/pages/menu/index.vue
@@ -1,102 +1,56 @@
 <template>
   <Demo class="full">
-    <h2>基础用法</h2>
-    <nut-menu>
-      <nut-menu-item v-model="state.value1" :options="state.options1" />
-      <nut-menu-item v-model="state.value2" :options="state.options2" @change="handleChange" />
-    </nut-menu>
-    <h2>自定义菜单内容</h2>
-    <nut-menu>
-      <nut-menu-item v-model="state.value1" :options="state.options1" />
-      <nut-menu-item ref="item" title="筛选">
-        <div :style="{ display: 'flex', flex: 1, 'justify-content': 'space-between', 'align-items': 'center' }">
-          <div :style="{ marginRight: '10px' }">自定义内容</div>
-          <nut-button @click="onConfirm">确认</nut-button>
-        </div>
-      </nut-menu-item>
-    </nut-menu>
-    <h2>一行两列</h2>
-    <nut-menu>
-      <nut-menu-item v-model="state.value3" :cols="2" :options="state.options3" />
-    </nut-menu>
-    <h2>自定义选中态颜色</h2>
-    <nut-menu active-color="green">
-      <nut-menu-item v-model="state.value1" :options="state.options1" />
-      <nut-menu-item v-model="state.value2" :options="state.options2" @change="handleChange" />
-    </nut-menu>
-    <h2>自定义图标</h2>
-    <nut-menu>
-      <template #icon>
-        <TriangleDown />
-      </template>
-      <nut-menu-item v-model="state.value1" :options="state.options1" />
-      <nut-menu-item v-model="state.value2" :options="state.options2" @change="handleChange">
-        <template #icon>
-          <Checked></Checked>
-        </template>
-      </nut-menu-item>
-    </nut-menu>
-    <h2>向上展开</h2>
-    <nut-menu direction="up">
-      <nut-menu-item v-model="state.value1" :options="state.options1" />
-      <nut-menu-item v-model="state.value2" :options="state.options2" @change="handleChange" />
-    </nut-menu>
-    <h2>禁用菜单</h2>
-    <nut-menu>
-      <nut-menu-item v-model="state.value1" disabled :options="state.options1" />
-      <nut-menu-item v-model="state.value2" disabled :options="state.options2" @change="handleChange" />
-    </nut-menu>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('custom') }}</h2>
+    <Custom />
+
+    <h2>{{ t('col') }}</h2>
+    <Col />
+
+    <h2>{{ t('color') }}</h2>
+    <Color />
+
+    <h2>{{ t('icon') }}</h2>
+    <IconDemo />
+
+    <h2>{{ t('up') }}</h2>
+    <Up />
+
+    <h2>{{ t('disabled') }}</h2>
+    <Disabled />
   </Demo>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue';
-import { TriangleDown, Checked } from '@nutui/icons-vue-taro';
-const state = reactive({
-  options1: [
-    { text: '全部商品', value: 0 },
-    { text: '新款商品', value: 1 },
-    { text: '活动商品', value: 2 }
-  ],
-  options2: [
-    { text: '默认排序', value: 'a' },
-    { text: '好评排序', value: 'b' },
-    { text: '销量排序', value: 'c' }
-  ],
-  options3: [
-    { text: '全部商品', value: 0 },
-    { text: '家庭清洁/纸品', value: 1 },
-    { text: '个人护理', value: 2 },
-    { text: '美妆护肤', value: 3 },
-    { text: '食品饮料', value: 4 },
-    { text: '家用电器', value: 5 },
-    { text: '母婴', value: 6 },
-    { text: '数码', value: 7 },
-    { text: '电脑、办公', value: 8 },
-    { text: '运动户外', value: 9 },
-    { text: '厨具', value: 10 },
-    { text: '医疗保健', value: 11 },
-    { text: '酒类', value: 12 },
-    { text: '生鲜', value: 13 },
-    { text: '家具', value: 14 },
-    { text: '传统滋补', value: 15 },
-    { text: '汽车用品', value: 16 },
-    { text: '家居日用', value: 17 }
-  ],
-  value1: 0,
-  value2: 'a',
-  value3: 0
-});
-
-const item = ref('');
-
-const onConfirm = () => {
-  item.value.toggle();
-};
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Custom from './custom.vue';
+import Col from './col.vue';
+import Color from './color.vue';
+import IconDemo from './icon.vue';
+import Up from './up.vue';
+import Disabled from './disabled.vue';
 
-const handleChange = (val) => {
-  console.log('val', val);
-};
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    custom: '自定义菜单内容',
+    col: '一行两列',
+    color: '自定义选中态颜色',
+    icon: '自定义图标',
+    up: '向上展开',
+    disabled: '禁用菜单'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    custom: 'Custom Menu Content',
+    col: 'Two Cols In One Line',
+    color: 'Custom Active Color',
+    icon: 'Custom Icons',
+    up: 'Expand Direction',
+    disabled: 'Disable Menu'
+  }
+});
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/packages/nutui-taro-demo/src/nav/pages/menu/up.vue b/packages/nutui-taro-demo/src/nav/pages/menu/up.vue
new file mode 100644
index 0000000000..5b1c22b149
--- /dev/null
+++ b/packages/nutui-taro-demo/src/nav/pages/menu/up.vue
@@ -0,0 +1,26 @@
+<template>
+  <nut-menu direction="up">
+    <nut-menu-item v-model="val1" :options="options1" />
+    <nut-menu-item v-model="val2" :options="options2" @change="onChange" />
+  </nut-menu>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const val1 = ref(0);
+const val2 = ref('a');
+const options1 = ref([
+  { text: '全部商品', value: 0 },
+  { text: '新款商品', value: 1 },
+  { text: '活动商品', value: 2 }
+]);
+const options2 = ref([
+  { text: '默认排序', value: 'a' },
+  { text: '好评排序', value: 'b' },
+  { text: '销量排序', value: 'c' }
+]);
+
+const onChange = (val) => {
+  console.log('val', val);
+};
+</script>
diff --git a/src/packages/__VUE/menu/demo.vue b/src/packages/__VUE/menu/demo.vue
deleted file mode 100644
index 1ba97f4ff0..0000000000
--- a/src/packages/__VUE/menu/demo.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<template>
-  <div class="demo full">
-    <h2>{{ translate('basic') }}</h2>
-    <nut-menu>
-      <nut-menu-item v-model="state.value1" :options="options1" />
-      <nut-menu-item v-model="state.value2" :options="options2" @change="handleChange" />
-    </nut-menu>
-    <h2>{{ translate('customMenuContent') }}</h2>
-    <nut-menu>
-      <nut-menu-item v-model="state.value1" :options="options1" />
-      <nut-menu-item ref="item" :title="translate('screen')">
-        <div :style="{ display: 'flex', flex: 1, 'justify-content': 'space-between', 'align-items': 'center' }">
-          <div :style="{ marginRight: '10px' }">{{ translate('customContent') }}</div>
-          <nut-button @click="onConfirm">{{ translate('confirm') }}</nut-button>
-        </div>
-      </nut-menu-item>
-    </nut-menu>
-    <h2>{{ translate('twoColsInOneLine') }}</h2>
-    <nut-menu>
-      <nut-menu-item v-model="state.value3" :cols="2" :options="options3" />
-    </nut-menu>
-    <h2>{{ translate('customActiveColor') }}</h2>
-    <nut-menu active-color="green">
-      <nut-menu-item v-model="state.value1" :options="options1" />
-      <nut-menu-item v-model="state.value2" :options="options2" @change="handleChange" />
-    </nut-menu>
-    <h2>{{ translate('customIcons') }}</h2>
-    <nut-menu>
-      <template #icon>
-        <TriangleDown />
-      </template>
-      <nut-menu-item v-model="state.value1" :options="options1" />
-      <nut-menu-item v-model="state.value2" :options="options2" @change="handleChange">
-        <template #icon>
-          <Checked></Checked>
-        </template>
-      </nut-menu-item>
-    </nut-menu>
-    <h2>{{ translate('expandDirection') }}</h2>
-    <nut-menu direction="up">
-      <nut-menu-item v-model="state.value1" :options="options1" />
-      <nut-menu-item v-model="state.value2" :options="options2" @change="handleChange" />
-    </nut-menu>
-    <h2>{{ translate('disableMenu') }}</h2>
-    <nut-menu>
-      <nut-menu-item v-model="state.value1" disabled :options="options1" />
-      <nut-menu-item v-model="state.value2" disabled :options="options2" />
-    </nut-menu>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { reactive, ref, computed } from 'vue';
-import { useTranslate } from '@/sites/assets/util/useTranslate';
-import { TriangleDown, Checked } from '@nutui/icons-vue';
-const translate = useTranslate({
-  'zh-CN': {
-    basic: '基础用法',
-    customMenuContent: '自定义菜单内容',
-    customContent: '自定义内容',
-    screen: '筛选',
-    confirm: '确认',
-    twoColsInOneLine: '一行两列',
-    customActiveColor: '自定义选中态颜色',
-    customIcons: '自定义图标',
-    expandDirection: '向上展开',
-    disableMenu: '禁用菜单',
-    allProducts: '全部商品',
-    newProducts: '新款商品',
-    activityProducts: '活动商品',
-    defaultSort: '默认排序',
-    praiseSort: '好评排序',
-    salesVolumeSort: '销量排序',
-    product1: '家庭清洁/纸品',
-    product2: '个人护理',
-    product3: '美妆护肤',
-    product4: '食品饮料',
-    product5: '家用电器',
-    product6: '母婴',
-    product7: '数码',
-    product8: '电脑、办公',
-    product9: '运动户外',
-    product10: '厨具',
-    product11: '医疗保健',
-    product12: '酒类',
-    product13: '生鲜',
-    product14: '家具',
-    product15: '传统滋补',
-    product16: '汽车用品',
-    product17: '家居日用'
-  },
-  'en-US': {
-    basic: 'Basic Usage',
-    customMenuContent: 'Custom Menu Content',
-    customContent: 'Custom content',
-    screen: 'Screen',
-    confirm: 'Confirm',
-    twoColsInOneLine: 'Two Cols In One Line',
-    customActiveColor: 'Custom Active Color',
-    customIcons: 'Custom Icons',
-    expandDirection: 'Expand Direction',
-    disableMenu: 'Disable Menu',
-    allProducts: 'All Products',
-    newProducts: 'New Products',
-    activityProducts: 'Activity Products',
-    defaultSort: 'Default Sort',
-    praiseSort: 'Praise Sort',
-    salesVolumeSort: 'Sales Volume Sort',
-    product1: 'Product1',
-    product2: 'Product2',
-    product3: 'Product3',
-    product4: 'Product4',
-    product5: 'Product5',
-    product6: 'Product6',
-    product7: 'Product7',
-    product8: 'Product8',
-    product9: 'Product9',
-    product10: 'Product10',
-    product11: 'Product11',
-    product12: 'Product12',
-    product13: 'Product13',
-    product14: 'Product14',
-    product15: 'Product15',
-    product16: 'Product16',
-    product17: 'Product17'
-  }
-});
-const state = reactive({
-  value1: 0,
-  value2: 'a',
-  value3: 0
-});
-
-const options1 = computed(() => [
-  { text: translate('allProducts'), value: 0 },
-  { text: translate('newProducts'), value: 1 },
-  { text: translate('activityProducts'), value: 2 }
-]);
-
-const options2 = computed(() => [
-  { text: translate('defaultSort'), value: 'a' },
-  { text: translate('praiseSort'), value: 'b' },
-  { text: translate('salesVolumeSort'), value: 'c' }
-]);
-
-const options3 = computed(() => [
-  { text: translate('allProducts'), value: 0 },
-  { text: translate('product1'), value: 1 },
-  { text: translate('product2'), value: 2 },
-  { text: translate('product3'), value: 3 },
-  { text: translate('product4'), value: 4 },
-  { text: translate('product5'), value: 5 },
-  { text: translate('product6'), value: 6 },
-  { text: translate('product7'), value: 7 },
-  { text: translate('product8'), value: 8 },
-  { text: translate('product9'), value: 9 },
-  { text: translate('product10'), value: 10 },
-  { text: translate('product11'), value: 11 },
-  { text: translate('product12'), value: 12 },
-  { text: translate('product13'), value: 13 },
-  { text: translate('product14'), value: 14 },
-  { text: translate('product15'), value: 15 },
-  { text: translate('product16'), value: 16 },
-  { text: translate('product17'), value: 17 }
-]);
-
-const item = ref();
-
-const onConfirm = () => {
-  item.value.toggle();
-};
-
-const handleChange = (val: any) => {
-  console.log('val', val);
-};
-</script>
diff --git a/src/packages/__VUE/menu/demo/basic.vue b/src/packages/__VUE/menu/demo/basic.vue
new file mode 100644
index 0000000000..405e679734
--- /dev/null
+++ b/src/packages/__VUE/menu/demo/basic.vue
@@ -0,0 +1,26 @@
+<template>
+  <nut-menu>
+    <nut-menu-item v-model="val1" :options="options1" />
+    <nut-menu-item v-model="val2" :options="options2" @change="onChange" />
+  </nut-menu>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const val1 = ref(0);
+const val2 = ref('a');
+const options1 = ref([
+  { text: '全部商品', value: 0 },
+  { text: '新款商品', value: 1 },
+  { text: '活动商品', value: 2 }
+]);
+const options2 = ref([
+  { text: '默认排序', value: 'a' },
+  { text: '好评排序', value: 'b' },
+  { text: '销量排序', value: 'c' }
+]);
+
+const onChange = (val) => {
+  console.log('val', val);
+};
+</script>
diff --git a/src/packages/__VUE/menu/demo/col.vue b/src/packages/__VUE/menu/demo/col.vue
new file mode 100644
index 0000000000..95a9aa9c6e
--- /dev/null
+++ b/src/packages/__VUE/menu/demo/col.vue
@@ -0,0 +1,30 @@
+<template>
+  <nut-menu>
+    <nut-menu-item v-model="val" :cols="2" :options="options" />
+  </nut-menu>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const val = ref(0);
+const options = ref([
+  { text: '全部商品', value: 0 },
+  { text: '家庭清洁/纸品', value: 1 },
+  { text: '个人护理', value: 2 },
+  { text: '美妆护肤', value: 3 },
+  { text: '食品饮料', value: 4 },
+  { text: '家用电器', value: 5 },
+  { text: '母婴', value: 6 },
+  { text: '数码', value: 7 },
+  { text: '电脑、办公', value: 8 },
+  { text: '运动户外', value: 9 },
+  { text: '厨具', value: 10 },
+  { text: '医疗保健', value: 11 },
+  { text: '酒类', value: 12 },
+  { text: '生鲜', value: 13 },
+  { text: '家具', value: 14 },
+  { text: '传统滋补', value: 15 },
+  { text: '汽车用品', value: 16 },
+  { text: '家居日用', value: 17 }
+]);
+</script>
diff --git a/src/packages/__VUE/menu/demo/color.vue b/src/packages/__VUE/menu/demo/color.vue
new file mode 100644
index 0000000000..ba72dcbe29
--- /dev/null
+++ b/src/packages/__VUE/menu/demo/color.vue
@@ -0,0 +1,22 @@
+<template>
+  <nut-menu active-color="green">
+    <nut-menu-item v-model="val1" :options="options1" />
+    <nut-menu-item v-model="val2" :options="options2" />
+  </nut-menu>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const val1 = ref(0);
+const val2 = ref('a');
+const options1 = ref([
+  { text: '全部商品', value: 0 },
+  { text: '新款商品', value: 1 },
+  { text: '活动商品', value: 2 }
+]);
+const options2 = ref([
+  { text: '默认排序', value: 'a' },
+  { text: '好评排序', value: 'b' },
+  { text: '销量排序', value: 'c' }
+]);
+</script>
diff --git a/src/packages/__VUE/menu/demo/custom.vue b/src/packages/__VUE/menu/demo/custom.vue
new file mode 100644
index 0000000000..6cb027d6d2
--- /dev/null
+++ b/src/packages/__VUE/menu/demo/custom.vue
@@ -0,0 +1,26 @@
+<template>
+  <nut-menu>
+    <nut-menu-item v-model="val" :options="options" />
+    <nut-menu-item ref="item" title="筛选">
+      <div :style="{ display: 'flex', flex: 1, 'justify-content': 'space-between', 'align-items': 'center' }">
+        <div :style="{ marginRight: '10px' }">自定义内容</div>
+        <nut-button @click="onClick">确认</nut-button>
+      </div>
+    </nut-menu-item>
+  </nut-menu>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const item = ref();
+const val = ref(0);
+const options = ref([
+  { text: '全部商品', value: 0 },
+  { text: '新款商品', value: 1 },
+  { text: '活动商品', value: 2 }
+]);
+
+const onClick = () => {
+  item.value.toggle();
+};
+</script>
diff --git a/src/packages/__VUE/menu/demo/disabled.vue b/src/packages/__VUE/menu/demo/disabled.vue
new file mode 100644
index 0000000000..ca39943f7e
--- /dev/null
+++ b/src/packages/__VUE/menu/demo/disabled.vue
@@ -0,0 +1,26 @@
+<template>
+  <nut-menu>
+    <nut-menu-item v-model="val1" disabled :options="options1" />
+    <nut-menu-item v-model="val2" disabled :options="options2" @change="onChange" />
+  </nut-menu>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const val1 = ref(0);
+const val2 = ref('a');
+const options1 = ref([
+  { text: '全部商品', value: 0 },
+  { text: '新款商品', value: 1 },
+  { text: '活动商品', value: 2 }
+]);
+const options2 = ref([
+  { text: '默认排序', value: 'a' },
+  { text: '好评排序', value: 'b' },
+  { text: '销量排序', value: 'c' }
+]);
+
+const onChange = (val) => {
+  console.log('val', val);
+};
+</script>
diff --git a/src/packages/__VUE/menu/demo/icon.vue b/src/packages/__VUE/menu/demo/icon.vue
new file mode 100644
index 0000000000..68a542df24
--- /dev/null
+++ b/src/packages/__VUE/menu/demo/icon.vue
@@ -0,0 +1,30 @@
+<template>
+  <nut-menu>
+    <template #icon>
+      <TriangleDown />
+    </template>
+    <nut-menu-item v-model="val1" :options="options1" />
+    <nut-menu-item v-model="val2" :options="options2">
+      <template #icon>
+        <Checked></Checked>
+      </template>
+    </nut-menu-item>
+  </nut-menu>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { TriangleDown, Checked } from '@nutui/icons-vue';
+const val1 = ref(0);
+const val2 = ref('a');
+const options1 = ref([
+  { text: '全部商品', value: 0 },
+  { text: '新款商品', value: 1 },
+  { text: '活动商品', value: 2 }
+]);
+const options2 = ref([
+  { text: '默认排序', value: 'a' },
+  { text: '好评排序', value: 'b' },
+  { text: '销量排序', value: 'c' }
+]);
+</script>
diff --git a/src/packages/__VUE/menu/demo/index.vue b/src/packages/__VUE/menu/demo/index.vue
new file mode 100644
index 0000000000..afe9ee2777
--- /dev/null
+++ b/src/packages/__VUE/menu/demo/index.vue
@@ -0,0 +1,56 @@
+<template>
+  <Demo class="full">
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('custom') }}</h2>
+    <Custom />
+
+    <h2>{{ t('col') }}</h2>
+    <Col />
+
+    <h2>{{ t('color') }}</h2>
+    <Color />
+
+    <h2>{{ t('icon') }}</h2>
+    <IconDemo />
+
+    <h2>{{ t('up') }}</h2>
+    <Up />
+
+    <h2>{{ t('disabled') }}</h2>
+    <Disabled />
+  </Demo>
+</template>
+
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Custom from './custom.vue';
+import Col from './col.vue';
+import Color from './color.vue';
+import IconDemo from './icon.vue';
+import Up from './up.vue';
+import Disabled from './disabled.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    custom: '自定义菜单内容',
+    col: '一行两列',
+    color: '自定义选中态颜色',
+    icon: '自定义图标',
+    up: '向上展开',
+    disabled: '禁用菜单'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    custom: 'Custom Menu Content',
+    col: 'Two Cols In One Line',
+    color: 'Custom Active Color',
+    icon: 'Custom Icons',
+    up: 'Expand Direction',
+    disabled: 'Disable Menu'
+  }
+});
+</script>
diff --git a/src/packages/__VUE/menu/demo/up.vue b/src/packages/__VUE/menu/demo/up.vue
new file mode 100644
index 0000000000..5b1c22b149
--- /dev/null
+++ b/src/packages/__VUE/menu/demo/up.vue
@@ -0,0 +1,26 @@
+<template>
+  <nut-menu direction="up">
+    <nut-menu-item v-model="val1" :options="options1" />
+    <nut-menu-item v-model="val2" :options="options2" @change="onChange" />
+  </nut-menu>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const val1 = ref(0);
+const val2 = ref('a');
+const options1 = ref([
+  { text: '全部商品', value: 0 },
+  { text: '新款商品', value: 1 },
+  { text: '活动商品', value: 2 }
+]);
+const options2 = ref([
+  { text: '默认排序', value: 'a' },
+  { text: '好评排序', value: 'b' },
+  { text: '销量排序', value: 'c' }
+]);
+
+const onChange = (val) => {
+  console.log('val', val);
+};
+</script>
diff --git a/src/packages/__VUE/menu/doc.en-US.md b/src/packages/__VUE/menu/doc.en-US.md
index 4cea496f70..9d0c4271b6 100644
--- a/src/packages/__VUE/menu/doc.en-US.md
+++ b/src/packages/__VUE/menu/doc.en-US.md
@@ -17,301 +17,33 @@ app.use(MenuItem);
 
 ### Basic Usage
 
-:::demo
-
-```vue
-<template>
-  <nut-menu>
-    <nut-menu-item v-model="state.value1" :options="state.options1" />
-    <nut-menu-item v-model="state.value2" @change="handleChange" :options="state.options2" />
-  </nut-menu>
-</template>
-
-<script setup>
-import { reactive, ref } from 'vue';
-const state = reactive({
-  options1: [
-    { text: 'All Products', value: 0 },
-    { text: 'New Products', value: 1 },
-    { text: 'Activity Products', value: 2 }
-  ],
-  options2: [
-    { text: 'Default Sort', value: 'a' },
-    { text: 'Praise Sort', value: 'b' },
-    { text: 'Sales Volume Sort', value: 'c' }
-  ],
-  value1: 0,
-  value2: 'a'
-});
-
-const handleChange = (val) => {
-  console.log('val', val);
-};
-</script>
-```
-
-:::
+> demo: menu basic
 
 ### Custom Menu Content
 
 Popup can be closed with toggle method in menu instance.
 
-:::demo
-
-```vue
-<template>
-  <nut-menu>
-    <nut-menu-item v-model="state.value1" :options="state.options1" />
-    <nut-menu-item title="Screen" ref="item">
-      <div :style="{ display: 'flex', flex: 1, 'justify-content': 'space-between', 'align-items': 'center' }">
-        <div :style="{ marginRight: '10px' }">Custom content</div>
-        <nut-button @click="onConfirm">Confirm</nut-button>
-      </div>
-    </nut-menu-item>
-  </nut-menu>
-</template>
-
-<script setup>
-import { reactive, ref } from 'vue';
-const state = reactive({
-  options1: [
-    { text: 'All Products', value: 0 },
-    { text: 'New Products', value: 1 },
-    { text: 'Activity Products', value: 2 }
-  ],
-  value1: 0
-});
-
-const item = ref('');
-
-const onConfirm = () => {
-  item.value.toggle();
-};
-</script>
-```
-
-:::
+> demo: menu custom
 
 ### Two Cols In One Line
 
-:::demo
-
-```vue
-<template>
-  <nut-menu>
-    <nut-menu-item v-model="state.value3" :cols="2" :options="state.options3" />
-  </nut-menu>
-</template>
-
-<script setup>
-import { reactive, ref } from 'vue';
-const state = reactive({
-  options3: [
-    { text: 'All Products', value: 0 },
-    { text: 'Product1', value: 1 },
-    { text: 'Product2', value: 2 },
-    { text: 'Product3', value: 3 },
-    { text: 'Product4', value: 4 },
-    { text: 'Product5', value: 5 },
-    { text: 'Product6', value: 6 },
-    { text: 'Product7', value: 7 },
-    { text: 'Product8', value: 8 },
-    { text: 'Product9', value: 9 },
-    { text: 'Product10', value: 10 },
-    { text: 'Product11', value: 11 },
-    { text: 'Product12', value: 12 },
-    { text: 'Product13', value: 13 },
-    { text: 'Product14', value: 14 },
-    { text: 'Product15', value: 15 },
-    { text: 'Product16', value: 16 },
-    { text: 'Product17', value: 17 }
-  ],
-  value3: 0
-});
-</script>
-```
-
-:::
+> demo: menu col
 
 ### Custom Active Color
 
-:::demo
-
-```vue
-<template>
-  <nut-menu active-color="green">
-    <nut-menu-item v-model="state.value1" :options="state.options1" />
-    <nut-menu-item v-model="state.value2" @change="handleChange" :options="state.options2" />
-  </nut-menu>
-</template>
-
-<script setup>
-import { reactive, ref } from 'vue';
-const state = reactive({
-  options1: [
-    { text: 'All Products', value: 0 },
-    { text: 'New Products', value: 1 },
-    { text: 'Activity Products', value: 2 }
-  ],
-  options2: [
-    { text: 'Default Sort', value: 'a' },
-    { text: 'Praise Sort', value: 'b' },
-    { text: 'Sales Volume Sort', value: 'c' }
-  ],
-  value1: 0,
-  value2: 'a'
-});
-
-const handleChange = (val) => {
-  console.log('val', val);
-};
-</script>
-```
-
-:::
+> demo: menu color
 
 ### Custom Icons
 
-:::demo
-
-```vue
-<template>
-  <nut-menu>
-    <template #icon>
-      <TriangleDown />
-    </template>
-    <nut-menu-item v-model="state.value1" :options="state.options1" />
-    <nut-menu-item v-model="state.value2" @change="handleChange" :options="state.options2">
-      <template #icon>
-        <Checked></Checked>
-      </template>
-    </nut-menu-item>
-  </nut-menu>
-</template>
-
-<script setup>
-import { reactive, ref } from 'vue';
-import { TriangleDown, Checked } from '@nutui/icons-vue';
-const state = reactive({
-  options1: [
-    { text: 'All Products', value: 0 },
-    { text: 'New Products', value: 1 },
-    { text: 'Activity Products', value: 2 }
-  ],
-  options2: [
-    { text: 'Default Sort', value: 'a' },
-    { text: 'Praise Sort', value: 'b' },
-    { text: 'Sales Volume Sort', value: 'c' }
-  ],
-  value1: 0,
-  value2: 'a'
-});
-
-const handleChange = (val) => {
-  console.log('val', val);
-};
-</script>
-```
-
-:::
+> demo: menu icon
 
 ### Expand Directions
 
-:::demo
-
-```vue
-<template>
-  <div class="blank"></div>
-  <nut-menu direction="up">
-    <nut-menu-item v-model="state.value1" :options="state.options1" />
-    <nut-menu-item v-model="state.value2" @change="handleChange" :options="state.options2" />
-  </nut-menu>
-</template>
-
-<script setup>
-import { reactive, ref } from 'vue';
-const state = reactive({
-  options1: [
-    { text: 'All Products', value: 0 },
-    { text: 'New Products', value: 1 },
-    { text: 'Activity Products', value: 2 }
-  ],
-  options2: [
-    { text: 'Default Sort', value: 'a' },
-    { text: 'Praise Sort', value: 'b' },
-    { text: 'Sales Volume Sort', value: 'c' }
-  ],
-  value1: 0,
-  value2: 'a'
-});
-
-const handleChange = (val) => {
-  console.log('val', val);
-};
-</script>
-<style>
-.blank {
-  width: 200px;
-  height: 200px;
-}
-</style>
-```
-
-:::
+> demo: menu up
 
 ### Disable Menu
 
-:::demo
-
-```vue
-<template>
-  <nut-menu>
-    <nut-menu-item disabled v-model="state.value1" :options="state.options1" />
-    <nut-menu-item disabled v-model="state.value2" :options="state.options2" />
-  </nut-menu>
-</template>
-
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  options1: [
-    { text: 'All Products', value: 0 },
-    { text: 'New Products', value: 1 },
-    { text: 'Activity Products', value: 2 }
-  ],
-  options2: [
-    { text: 'Default Sort', value: 'a' },
-    { text: 'Praise Sort', value: 'b' },
-    { text: 'Sales Volume Sort', value: 'c' }
-  ],
-  options3: [
-    { text: 'All Products', value: 0 },
-    { text: 'Product1', value: 1 },
-    { text: 'Product2', value: 2 },
-    { text: 'Product3', value: 3 },
-    { text: 'Product4', value: 4 },
-    { text: 'Product5', value: 5 },
-    { text: 'Product6', value: 6 },
-    { text: 'Product7', value: 7 },
-    { text: 'Product8', value: 8 },
-    { text: 'Product9', value: 9 },
-    { text: 'Product10', value: 10 },
-    { text: 'Product11', value: 11 },
-    { text: 'Product12', value: 12 },
-    { text: 'Product13', value: 13 },
-    { text: 'Product14', value: 14 },
-    { text: 'Product15', value: 15 },
-    { text: 'Product16', value: 16 },
-    { text: 'Product17', value: 17 }
-  ],
-  value1: 0,
-  value2: 'a',
-  value3: 0
-});
-</script>
-```
-
-:::
+> demo: menu disabled
 
 ## API
 
diff --git a/src/packages/__VUE/menu/doc.md b/src/packages/__VUE/menu/doc.md
index 43560637d0..4b24680207 100644
--- a/src/packages/__VUE/menu/doc.md
+++ b/src/packages/__VUE/menu/doc.md
@@ -17,301 +17,33 @@ app.use(MenuItem);
 
 ### 基础用法
 
-:::demo
-
-```vue
-<template>
-  <nut-menu>
-    <nut-menu-item v-model="state.value1" :options="state.options1" />
-    <nut-menu-item v-model="state.value2" @change="handleChange" :options="state.options2" />
-  </nut-menu>
-</template>
-
-<script setup>
-import { reactive, ref } from 'vue';
-const state = reactive({
-  options1: [
-    { text: '全部商品', value: 0 },
-    { text: '新款商品', value: 1 },
-    { text: '活动商品', value: 2 }
-  ],
-  options2: [
-    { text: '默认排序', value: 'a' },
-    { text: '好评排序', value: 'b' },
-    { text: '销量排序', value: 'c' }
-  ],
-  value1: 0,
-  value2: 'a'
-});
-
-const handleChange = (val) => {
-  console.log('val', val);
-};
-</script>
-```
-
-:::
+> demo: menu basic
 
 ### 自定义菜单内容
 
 使用实例上的 toggle 方法可以手动关闭弹框。
 
-:::demo
-
-```vue
-<template>
-  <nut-menu>
-    <nut-menu-item v-model="state.value1" :options="state.options1" />
-    <nut-menu-item title="筛选" ref="item">
-      <div :style="{ display: 'flex', flex: 1, 'justify-content': 'space-between', 'align-items': 'center' }">
-        <div :style="{ marginRight: '10px' }">自定义内容</div>
-        <nut-button @click="onConfirm">确认</nut-button>
-      </div>
-    </nut-menu-item>
-  </nut-menu>
-</template>
-
-<script setup>
-import { reactive, ref } from 'vue';
-const state = reactive({
-  options1: [
-    { text: '全部商品', value: 0 },
-    { text: '新款商品', value: 1 },
-    { text: '活动商品', value: 2 }
-  ],
-  value1: 0
-});
-
-const item = ref();
-
-const onConfirm = () => {
-  item.value.toggle();
-};
-</script>
-```
-
-:::
+> demo: menu custom
 
 ### 一行两列
 
-:::demo
-
-```vue
-<template>
-  <nut-menu>
-    <nut-menu-item v-model="state.value3" :cols="2" :options="state.options3" />
-  </nut-menu>
-</template>
-
-<script setup>
-import { reactive, ref } from 'vue';
-const state = reactive({
-  options3: [
-    { text: '全部商品', value: 0 },
-    { text: '家庭清洁/纸品', value: 1 },
-    { text: '个人护理', value: 2 },
-    { text: '美妆护肤', value: 3 },
-    { text: '食品饮料', value: 4 },
-    { text: '家用电器', value: 5 },
-    { text: '母婴', value: 6 },
-    { text: '数码', value: 7 },
-    { text: '电脑、办公', value: 8 },
-    { text: '运动户外', value: 9 },
-    { text: '厨具', value: 10 },
-    { text: '医疗保健', value: 11 },
-    { text: '酒类', value: 12 },
-    { text: '生鲜', value: 13 },
-    { text: '家具', value: 14 },
-    { text: '传统滋补', value: 15 },
-    { text: '汽车用品', value: 16 },
-    { text: '家居日用', value: 17 }
-  ],
-  value3: 0
-});
-</script>
-```
-
-:::
+> demo: menu col
 
 ### 自定义选中态颜色
 
-:::demo
-
-```vue
-<template>
-  <nut-menu active-color="green">
-    <nut-menu-item v-model="state.value1" :options="state.options1" />
-    <nut-menu-item v-model="state.value2" @change="handleChange" :options="state.options2" />
-  </nut-menu>
-</template>
-
-<script setup>
-import { reactive, ref } from 'vue';
-const state = reactive({
-  options1: [
-    { text: '全部商品', value: 0 },
-    { text: '新款商品', value: 1 },
-    { text: '活动商品', value: 2 }
-  ],
-  options2: [
-    { text: '默认排序', value: 'a' },
-    { text: '好评排序', value: 'b' },
-    { text: '销量排序', value: 'c' }
-  ],
-  value1: 0,
-  value2: 'a'
-});
-
-const handleChange = (val) => {
-  console.log('val', val);
-};
-</script>
-```
-
-:::
+> demo: menu color
 
 ### 自定义图标
 
-:::demo
-
-```vue
-<template>
-  <nut-menu>
-    <template #icon>
-      <TriangleDown />
-    </template>
-    <nut-menu-item v-model="state.value1" :options="state.options1" />
-    <nut-menu-item v-model="state.value2" @change="handleChange" :options="state.options2">
-      <template #icon>
-        <Checked></Checked>
-      </template>
-    </nut-menu-item>
-  </nut-menu>
-</template>
-
-<script setup>
-import { reactive, ref } from 'vue';
-import { TriangleDown, Checked } from '@nutui/icons-vue';
-const state = reactive({
-  options1: [
-    { text: '全部商品', value: 0 },
-    { text: '新款商品', value: 1 },
-    { text: '活动商品', value: 2 }
-  ],
-  options2: [
-    { text: '默认排序', value: 'a' },
-    { text: '好评排序', value: 'b' },
-    { text: '销量排序', value: 'c' }
-  ],
-  value1: 0,
-  value2: 'a'
-});
-
-const handleChange = (val) => {
-  console.log('val', val);
-};
-</script>
-```
-
-:::
+> demo: menu icon
 
 ### 向上展开
 
-:::demo
-
-```vue
-<template>
-  <div class="blank"></div>
-  <nut-menu direction="up">
-    <nut-menu-item v-model="state.value1" :options="state.options1" />
-    <nut-menu-item v-model="state.value2" @change="handleChange" :options="state.options2" />
-  </nut-menu>
-</template>
-
-<script setup>
-import { reactive, ref } from 'vue';
-const state = reactive({
-  options1: [
-    { text: '全部商品', value: 0 },
-    { text: '新款商品', value: 1 },
-    { text: '活动商品', value: 2 }
-  ],
-  options2: [
-    { text: '默认排序', value: 'a' },
-    { text: '好评排序', value: 'b' },
-    { text: '销量排序', value: 'c' }
-  ],
-  value1: 0,
-  value2: 'a'
-});
-
-const handleChange = (val) => {
-  console.log('val', val);
-};
-</script>
-<style>
-.blank {
-  width: 200px;
-  height: 200px;
-}
-</style>
-```
-
-:::
+> demo: menu up
 
 ### 禁用菜单
 
-:::demo
-
-```vue
-<template>
-  <nut-menu>
-    <nut-menu-item disabled v-model="state.value1" :options="state.options1" />
-    <nut-menu-item disabled v-model="state.value2" :options="state.options2" />
-  </nut-menu>
-</template>
-
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  options1: [
-    { text: '全部商品', value: 0 },
-    { text: '新款商品', value: 1 },
-    { text: '活动商品', value: 2 }
-  ],
-  options2: [
-    { text: '默认排序', value: 'a' },
-    { text: '好评排序', value: 'b' },
-    { text: '销量排序', value: 'c' }
-  ],
-  options3: [
-    { text: '全部商品', value: 0 },
-    { text: '家庭清洁/纸品', value: 1 },
-    { text: '个人护理', value: 2 },
-    { text: '美妆护肤', value: 3 },
-    { text: '食品饮料', value: 4 },
-    { text: '家用电器', value: 5 },
-    { text: '母婴', value: 6 },
-    { text: '数码', value: 7 },
-    { text: '电脑、办公', value: 8 },
-    { text: '运动户外', value: 9 },
-    { text: '厨具', value: 10 },
-    { text: '医疗保健', value: 11 },
-    { text: '酒类', value: 12 },
-    { text: '生鲜', value: 13 },
-    { text: '家具', value: 14 },
-    { text: '传统滋补', value: 15 },
-    { text: '汽车用品', value: 16 },
-    { text: '家居日用', value: 17 }
-  ],
-  value1: 0,
-  value2: 'a',
-  value3: 0
-});
-</script>
-```
-
-:::
+> demo: menu disabled
 
 ## API
 
diff --git a/src/packages/__VUE/menu/doc.taro.md b/src/packages/__VUE/menu/doc.taro.md
index c2b47be0ef..0b38c91119 100644
--- a/src/packages/__VUE/menu/doc.taro.md
+++ b/src/packages/__VUE/menu/doc.taro.md
@@ -17,301 +17,33 @@ app.use(MenuItem);
 
 ### 基础用法
 
-:::demo
-
-```vue
-<template>
-  <nut-menu>
-    <nut-menu-item v-model="state.value1" :options="state.options1" />
-    <nut-menu-item v-model="state.value2" @change="handleChange" :options="state.options2" />
-  </nut-menu>
-</template>
-
-<script setup>
-import { reactive, ref } from 'vue';
-const state = reactive({
-  options1: [
-    { text: '全部商品', value: 0 },
-    { text: '新款商品', value: 1 },
-    { text: '活动商品', value: 2 }
-  ],
-  options2: [
-    { text: '默认排序', value: 'a' },
-    { text: '好评排序', value: 'b' },
-    { text: '销量排序', value: 'c' }
-  ],
-  value1: 0,
-  value2: 'a'
-});
-
-const handleChange = (val) => {
-  console.log('val', val);
-};
-</script>
-```
-
-:::
+> demo: menu basic nav
 
 ### 自定义菜单内容
 
 使用实例上的 toggle 方法可以手动关闭弹框。
 
-:::demo
-
-```vue
-<template>
-  <nut-menu>
-    <nut-menu-item v-model="state.value1" :options="state.options1" />
-    <nut-menu-item title="筛选" ref="item">
-      <div :style="{ display: 'flex', flex: 1, 'justify-content': 'space-between', 'align-items': 'center' }">
-        <div :style="{ marginRight: '10px' }">自定义内容</div>
-        <nut-button @click="onConfirm">确认</nut-button>
-      </div>
-    </nut-menu-item>
-  </nut-menu>
-</template>
-
-<script setup>
-import { reactive, ref } from 'vue';
-const state = reactive({
-  options1: [
-    { text: '全部商品', value: 0 },
-    { text: '新款商品', value: 1 },
-    { text: '活动商品', value: 2 }
-  ],
-  value1: 0
-});
-
-const item = ref();
-
-const onConfirm = () => {
-  item.value.toggle();
-};
-</script>
-```
-
-:::
+> demo: menu custom nav
 
 ### 一行两列
 
-:::demo
-
-```vue
-<template>
-  <nut-menu>
-    <nut-menu-item v-model="state.value3" :cols="2" :options="state.options3" />
-  </nut-menu>
-</template>
-
-<script setup>
-import { reactive, ref } from 'vue';
-const state = reactive({
-  options3: [
-    { text: '全部商品', value: 0 },
-    { text: '家庭清洁/纸品', value: 1 },
-    { text: '个人护理', value: 2 },
-    { text: '美妆护肤', value: 3 },
-    { text: '食品饮料', value: 4 },
-    { text: '家用电器', value: 5 },
-    { text: '母婴', value: 6 },
-    { text: '数码', value: 7 },
-    { text: '电脑、办公', value: 8 },
-    { text: '运动户外', value: 9 },
-    { text: '厨具', value: 10 },
-    { text: '医疗保健', value: 11 },
-    { text: '酒类', value: 12 },
-    { text: '生鲜', value: 13 },
-    { text: '家具', value: 14 },
-    { text: '传统滋补', value: 15 },
-    { text: '汽车用品', value: 16 },
-    { text: '家居日用', value: 17 }
-  ],
-  value3: 0
-});
-</script>
-```
-
-:::
+> demo: menu col nav
 
 ### 自定义选中态颜色
 
-:::demo
-
-```vue
-<template>
-  <nut-menu active-color="green">
-    <nut-menu-item v-model="state.value1" :options="state.options1" />
-    <nut-menu-item v-model="state.value2" @change="handleChange" :options="state.options2" />
-  </nut-menu>
-</template>
-
-<script setup>
-import { reactive, ref } from 'vue';
-const state = reactive({
-  options1: [
-    { text: '全部商品', value: 0 },
-    { text: '新款商品', value: 1 },
-    { text: '活动商品', value: 2 }
-  ],
-  options2: [
-    { text: '默认排序', value: 'a' },
-    { text: '好评排序', value: 'b' },
-    { text: '销量排序', value: 'c' }
-  ],
-  value1: 0,
-  value2: 'a'
-});
-
-const handleChange = (val) => {
-  console.log('val', val);
-};
-</script>
-```
-
-:::
+> demo: menu color nav
 
 ### 自定义图标
 
-:::demo
-
-```vue
-<template>
-  <nut-menu>
-    <template #icon>
-      <TriangleDown />
-    </template>
-    <nut-menu-item v-model="state.value1" :options="state.options1" />
-    <nut-menu-item v-model="state.value2" @change="handleChange" :options="state.options2">
-      <template #icon>
-        <Checked></Checked>
-      </template>
-    </nut-menu-item>
-  </nut-menu>
-</template>
-
-<script setup>
-import { reactive, ref } from 'vue';
-import { TriangleDown, Checked } from '@nutui/icons-vue-taro';
-const state = reactive({
-  options1: [
-    { text: '全部商品', value: 0 },
-    { text: '新款商品', value: 1 },
-    { text: '活动商品', value: 2 }
-  ],
-  options2: [
-    { text: '默认排序', value: 'a' },
-    { text: '好评排序', value: 'b' },
-    { text: '销量排序', value: 'c' }
-  ],
-  value1: 0,
-  value2: 'a'
-});
-
-const handleChange = (val) => {
-  console.log('val', val);
-};
-</script>
-```
-
-:::
+> demo: menu icon nav
 
 ### 向上展开
 
-:::demo
-
-```vue
-<template>
-  <div class="blank"></div>
-  <nut-menu direction="up">
-    <nut-menu-item v-model="state.value1" :options="state.options1" />
-    <nut-menu-item v-model="state.value2" @change="handleChange" :options="state.options2" />
-  </nut-menu>
-</template>
-
-<script setup>
-import { reactive, ref } from 'vue';
-const state = reactive({
-  options1: [
-    { text: '全部商品', value: 0 },
-    { text: '新款商品', value: 1 },
-    { text: '活动商品', value: 2 }
-  ],
-  options2: [
-    { text: '默认排序', value: 'a' },
-    { text: '好评排序', value: 'b' },
-    { text: '销量排序', value: 'c' }
-  ],
-  value1: 0,
-  value2: 'a'
-});
-
-const handleChange = (val) => {
-  console.log('val', val);
-};
-</script>
-<style>
-.blank {
-  width: 200px;
-  height: 200px;
-}
-</style>
-```
-
-:::
+> demo: menu up nav
 
 ### 禁用菜单
 
-:::demo
-
-```vue
-<template>
-  <nut-menu>
-    <nut-menu-item disabled v-model="state.value1" :options="state.options1" />
-    <nut-menu-item disabled v-model="state.value2" :options="state.options2" />
-  </nut-menu>
-</template>
-
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  options1: [
-    { text: '全部商品', value: 0 },
-    { text: '新款商品', value: 1 },
-    { text: '活动商品', value: 2 }
-  ],
-  options2: [
-    { text: '默认排序', value: 'a' },
-    { text: '好评排序', value: 'b' },
-    { text: '销量排序', value: 'c' }
-  ],
-  options3: [
-    { text: '全部商品', value: 0 },
-    { text: '家庭清洁/纸品', value: 1 },
-    { text: '个人护理', value: 2 },
-    { text: '美妆护肤', value: 3 },
-    { text: '食品饮料', value: 4 },
-    { text: '家用电器', value: 5 },
-    { text: '母婴', value: 6 },
-    { text: '数码', value: 7 },
-    { text: '电脑、办公', value: 8 },
-    { text: '运动户外', value: 9 },
-    { text: '厨具', value: 10 },
-    { text: '医疗保健', value: 11 },
-    { text: '酒类', value: 12 },
-    { text: '生鲜', value: 13 },
-    { text: '家具', value: 14 },
-    { text: '传统滋补', value: 15 },
-    { text: '汽车用品', value: 16 },
-    { text: '家居日用', value: 17 }
-  ],
-  value1: 0,
-  value2: 'a',
-  value3: 0
-});
-</script>
-```
-
-:::
+> demo: menu disabled nav
 
 ## API