diff --git a/components/menu/MenuItem.vue b/components/menu/MenuItem.vue
index 52cee4df9..638b64be4 100644
--- a/components/menu/MenuItem.vue
+++ b/components/menu/MenuItem.vue
@@ -1,8 +1,7 @@
 <script>
 import { Item, itemProps } from './src/index'
-import { getClass, getStyle } from '../_util/vnode'
+import { getClass, getStyle, cloneVNodes } from '../_util/vnode'
 import Tooltip from '../tooltip'
-import { getComponentFromProp } from '../_util/props-util'
 function noop () {}
 export default {
   props: itemProps,
@@ -36,7 +35,7 @@ export default {
       {...toolTipProps}
     >
       <template slot='title'>
-        {inlineCollapsed && props.level === 1 ? $slots.default : ''}
+        {inlineCollapsed && props.level === 1 ? cloneVNodes($slots.default, true) : ''}
       </template>
       <Item {...itemProps} ref='menuItem'>
         {$slots.default}
diff --git a/components/menu/demo/antd.vue b/components/menu/demo/antd.vue
deleted file mode 100644
index d8ab12e58..000000000
--- a/components/menu/demo/antd.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-<script>
-import Clone from '../../_util/Clone'
-import Menu, { SubMenu, Item as MenuItem, Divider } from '../src/index'
-import animate from 'css-animation'
-
-function handleSelect (info) {
-  console.log(info)
-  console.log(`selected ${info.key}`)
-}
-
-const animation = {
-  on: {
-    enter (node, done) {
-      let height
-      return animate(node, 'rc-menu-collapse', {
-        start () {
-          height = node.offsetHeight
-          node.style.height = 0
-        },
-        active () {
-          node.style.height = `${height}px`
-        },
-        end () {
-          node.style.height = ''
-          done()
-        },
-      })
-    },
-    leave (node, done) {
-      return animate(node, 'rc-menu-collapse', {
-        start () {
-          node.style.height = `${node.offsetHeight}px`
-        },
-        active () {
-          node.style.height = 0
-        },
-        end () {
-          node.style.height = ''
-          done()
-        },
-      })
-    },
-  },
-  props: {
-    appear: false,
-  },
-}
-export default {
-  methods: {
-
-  },
-  render () {
-    const nestSubMenu = () => (<SubMenu title={<span>sub menu 2</span>} key='4'>
-      <MenuItem key='4-1'>inner inner</MenuItem>
-      <Divider/>
-      <SubMenu
-        key='4-2'
-        title={<span>sub menu 3</span>}
-      >
-        <SubMenu title='sub 4-2-0' key='4-2-0'>
-          <MenuItem key='4-2-0-1'>inner inner</MenuItem>
-          <MenuItem key='4-2-0-2'>inner inner2</MenuItem>
-        </SubMenu>
-        <MenuItem key='4-2-1'>inn</MenuItem>
-        <SubMenu title={<span>sub menu 4</span>} key='4-2-2'>
-          <MenuItem key='4-2-2-1'>inner inner</MenuItem>
-          <MenuItem key='4-2-2-2'>inner inner2</MenuItem>
-        </SubMenu>
-        <SubMenu title='sub 4-2-3' key='4-2-3'>
-          <MenuItem key='4-2-3-1'>inner inner</MenuItem>
-          <MenuItem key='4-2-3-2'>inner inner2</MenuItem>
-        </SubMenu>
-      </SubMenu>
-    </SubMenu>)
-    const onOpenChange = (value) => {
-      console.log('onOpenChange', value, this.$refs)
-    }
-    const commonMenu = () => (
-      <Menu onSelect={handleSelect} onOpenChange={onOpenChange} onClick={(e) => console.log('click', e)}>
-        <SubMenu ref='test' key='1' title={<span>sub menu</span>}>
-          <MenuItem key='1-1'>
-          0-1
-          </MenuItem>
-          <MenuItem key='1-2' disabled>0-2</MenuItem>
-        </SubMenu>
-        {nestSubMenu()}
-        <MenuItem key='2'>1</MenuItem>
-        <MenuItem key='3'>outer</MenuItem>
-        <MenuItem disabled>disabled</MenuItem>
-        <MenuItem key='5'>outer3</MenuItem>
-      </Menu>
-    )
-    return (
-      <div style={{ margin: '20px' }}>
-        <h2>antd menu</h2>
-        <div>
-          <h3>horizontal</h3>
-          <div style={{ margin: '20px', width: '800px', position: 'relative' }}>
-            <Clone childProps={{
-              mode: 'horizontal',
-              openAnimation: 'rc-menu-open-slide-up',
-            }} >
-              {commonMenu()}
-            </Clone>
-          </div>
-          {/* <h3>horizontal and click</h3>
-          <div style={{ margin: '20px', width: '800px' }}>
-            <Clone childProps={{
-              mode: 'horizontal',
-              openAnimation: 'rc-menu-open-slide-up',
-              triggerSubMenuAction: 'click',
-              defaultOpenKeys: ['1'],
-            }} >
-              {commonMenu()}
-            </Clone>
-          </div>
-          <h3>vertical</h3>
-          <div style={{ margin: '20px', width: '200px' }}>
-            <Clone childProps={{
-              mode: 'vertical',
-              openAnimation: 'rc-menu-open-zoom',
-            }} >
-              {commonMenu()}
-            </Clone></div>
-
-          <h3>inline</h3>
-          <div style={{ margin: '20px', width: '400px' }}><Clone childProps={{
-            mode: 'inline',
-            defaultOpenKeys: ['1'],
-            defaultSelectedKeys: ['1-2', '4-1'],
-            openAnimation: animation,
-          }} >
-            {commonMenu()}
-          </Clone></div>*/}
-        </div>
-      </div>
-    )
-  },
-}
-
-</script>
diff --git a/components/menu/demo/index.vue b/components/menu/demo/index.vue
new file mode 100644
index 000000000..af35e6af9
--- /dev/null
+++ b/components/menu/demo/index.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <Horizontal />
+    <InlineCollapsed />
+    <SiderCurrent />
+    <SwitchMode />
+    <Theme />
+    <Vertical />
+  </div>
+</template>
+<script>
+import Horizontal from './horizontal'
+import InlineCollapsed from './inline-collapsed'
+import SiderCurrent from './sider-current'
+import SwitchMode from './switch-mode'
+import Theme from './theme'
+import Vertical from './vertical'
+export default {
+  components: {
+    Horizontal,
+    InlineCollapsed,
+    SiderCurrent,
+    SwitchMode,
+    Theme,
+    Vertical,
+  },
+}
+</script>
diff --git a/components/menu/demo/inline-collapsed.vue b/components/menu/demo/inline-collapsed.vue
index de56f381c..5737221e6 100644
--- a/components/menu/demo/inline-collapsed.vue
+++ b/components/menu/demo/inline-collapsed.vue
@@ -56,22 +56,13 @@ const MenuItem = Menu.Item
 export default {
   data () {
     return {
-      collapsed: true,
+      collapsed: false,
     }
   },
   methods: {
     toggleCollapsed () {
       this.collapsed = !this.collapsed
     },
-    con1 () {
-      console.log(111)
-    },
-    con2 () {
-      console.log(222)
-    },
-    con3 () {
-      console.log(333)
-    },
   },
   components: {
     Menu,
diff --git a/components/menu/demo/inline.vue b/components/menu/demo/inline.vue
new file mode 100644
index 000000000..bfefcda9d
--- /dev/null
+++ b/components/menu/demo/inline.vue
@@ -0,0 +1,79 @@
+<template>
+<div>
+  <md>
+  ## 内嵌菜单
+  垂直菜单，子菜单内嵌在菜单区域。
+  </md>
+  <Menu
+    @click="handleClick"
+    style="width: 256px"
+    :defaultSelectedKeys="['1']"
+    :openKeys.sync="openKeys"
+    mode="inline"
+  >
+    <SubMenu key="sub1" @titleClick="titleClick">
+      <span slot="title"><Icon type="mail" /><span>Navigation One</span></span>
+      <MenuItemGroup key="g1">
+        <template slot="title"><Icon type="qq" /><span>Item 1</span></template>
+        <MenuItem key="1">Option 1</MenuItem>
+        <MenuItem key="2">Option 2</MenuItem>
+      </MenuItemGroup>
+      <MenuItemGroup key="g2" title="Item 2">
+        <MenuItem key="3">Option 3</MenuItem>
+        <MenuItem key="4">Option 4</MenuItem>
+      </MenuItemGroup>
+    </SubMenu>
+    <SubMenu key="sub2" @titleClick="titleClick">
+      <span slot="title"><Icon type="appstore" /><span>Navigation Two</span></span>
+      <MenuItem key="5">Option 5</MenuItem>
+      <MenuItem key="6">Option 6</MenuItem>
+      <SubMenu key="sub3" title="Submenu">
+        <MenuItem key="7">Option 7</MenuItem>
+        <MenuItem key="8">Option 8</MenuItem>
+      </SubMenu>
+    </SubMenu>
+    <SubMenu key="sub4">
+      <span slot="title"><Icon type="setting" /><span>Navigation Three</span></span>
+      <MenuItem key="9">Option 9</MenuItem>
+      <MenuItem key="10">Option 10</MenuItem>
+      <MenuItem key="11">Option 11</MenuItem>
+      <MenuItem key="12">Option 12</MenuItem>
+    </SubMenu>
+  </Menu>
+</div>
+</template>
+<script>
+import { Menu, Icon } from 'antd'
+const SubMenu = Menu.SubMenu
+const MenuItemGroup = Menu.ItemGroup
+const MenuItem = Menu.Item
+export default {
+  data () {
+    return {
+      current: ['mail'],
+      openKeys: ['sub1'],
+    }
+  },
+  methods: {
+    handleClick (e) {
+      console.log('click', e)
+    },
+    titleClick (e) {
+      console.log('titleClick', e)
+    },
+  },
+  watch: {
+    openKeys (val) {
+      console.log('openKeys', val)
+    },
+  },
+  components: {
+    Menu,
+    Icon,
+    SubMenu,
+    MenuItemGroup,
+    MenuItem,
+  },
+}
+
+</script>
diff --git a/components/menu/demo/sider-current.vue b/components/menu/demo/sider-current.vue
new file mode 100644
index 000000000..d93ba5c3d
--- /dev/null
+++ b/components/menu/demo/sider-current.vue
@@ -0,0 +1,70 @@
+<template>
+<div>
+  <md>
+  ## 只展开当前父级菜单
+  点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁。
+  </md>
+  <Menu
+    mode="inline"
+    :openKeys="openKeys"
+    @openChange="onOpenChange"
+    style="width: 256px"
+  >
+    <SubMenu key="sub1">
+      <span slot="title"><Icon type="mail" /><span>Navigation One</span></span>
+      <MenuItem key="1">Option 1</MenuItem>
+      <MenuItem key="2">Option 2</MenuItem>
+      <MenuItem key="3">Option 3</MenuItem>
+      <MenuItem key="4">Option 4</MenuItem>
+    </SubMenu>
+    <SubMenu key="sub2">
+      <span slot="title"><Icon type="appstore" /><span>Navigation Two</span></span>
+      <MenuItem key="5">Option 5</MenuItem>
+      <MenuItem key="6">Option 6</MenuItem>
+      <SubMenu key="sub3" title="Submenu">
+        <MenuItem key="7">Option 7</MenuItem>
+        <MenuItem key="8">Option 8</MenuItem>
+      </SubMenu>
+    </SubMenu>
+    <SubMenu key="sub4">
+      <span slot="title"><Icon type="setting" /><span>Navigation Three</span></span>
+      <MenuItem key="9">Option 9</MenuItem>
+      <MenuItem key="10">Option 10</MenuItem>
+      <MenuItem key="11">Option 11</MenuItem>
+      <MenuItem key="12">Option 12</MenuItem>
+    </SubMenu>
+  </Menu>
+</div>
+</template>
+<script>
+import { Menu, Icon } from 'antd'
+const SubMenu = Menu.SubMenu
+const MenuItemGroup = Menu.ItemGroup
+const MenuItem = Menu.Item
+export default {
+  data () {
+    return {
+      rootSubmenuKeys: ['sub1', 'sub2', 'sub4'],
+      openKeys: ['sub1'],
+    }
+  },
+  methods: {
+    onOpenChange (openKeys) {
+      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
+      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
+        this.openKeys = openKeys
+      } else {
+        this.openKeys = latestOpenKey ? [latestOpenKey] : []
+      }
+    },
+  },
+  components: {
+    Menu,
+    Icon,
+    SubMenu,
+    MenuItemGroup,
+    MenuItem,
+  },
+}
+
+</script>
diff --git a/components/menu/demo/switch-mode.vue b/components/menu/demo/switch-mode.vue
new file mode 100644
index 000000000..6476270e4
--- /dev/null
+++ b/components/menu/demo/switch-mode.vue
@@ -0,0 +1,76 @@
+<template>
+<div>
+  <md>
+  ## 切换菜单类型
+  展示动态切换模式。
+  </md>
+  <Checkbox @change="changeMode" /> Change Mode
+  <span className="ant-divider" style="margin: 0 1em"/>
+  <Checkbox @change="changeTheme" /> Change Theme
+  <br />
+  <br />
+  <Menu
+    style="width: 256px"
+    :defaultSelectedKeys="['1']"
+    :defaultOpenKeys="['sub1']"
+    :mode="mode"
+    :theme="theme"
+  >
+    <MenuItem key="1">
+      <Icon type="mail" />
+      Navigation One
+    </MenuItem>
+    <MenuItem key="2">
+      <Icon type="calendar" />
+      Navigation Two
+    </MenuItem>
+    <SubMenu key="sub1">
+      <span slot="title"><Icon type="appstore" /><span>Navigation Three</span></span>
+      <MenuItem key="3">Option 3</MenuItem>
+      <MenuItem key="4">Option 4</MenuItem>
+      <SubMenu key="sub1-2" title="Submenu">
+        <MenuItem key="5">Option 5</MenuItem>
+        <MenuItem key="6">Option 6</MenuItem>
+      </SubMenu>
+    </SubMenu>
+    <SubMenu key="sub2">
+      <span slot="title"><Icon type="setting" /><span>Navigation Four</span></span>
+      <MenuItem key="7">Option 7</MenuItem>
+      <MenuItem key="8">Option 8</MenuItem>
+      <MenuItem key="9">Option 9</MenuItem>
+      <MenuItem key="10">Option 10</MenuItem>
+    </SubMenu>
+  </Menu>
+</div>
+</template>
+<script>
+import { Menu, Icon, Checkbox } from 'antd'
+const SubMenu = Menu.SubMenu
+const MenuItemGroup = Menu.ItemGroup
+const MenuItem = Menu.Item
+export default {
+  data () {
+    return {
+      mode: 'inline',
+      theme: 'light',
+    }
+  },
+  methods: {
+    changeMode ({ target }) {
+      this.mode = target.checked ? 'vertical' : 'inline'
+    },
+    changeTheme ({ target }) {
+      this.theme = target.checked ? 'dark' : 'light'
+    },
+  },
+  components: {
+    Menu,
+    Icon,
+    SubMenu,
+    MenuItemGroup,
+    MenuItem,
+    Checkbox,
+  },
+}
+
+</script>
diff --git a/components/menu/demo/theme.vue b/components/menu/demo/theme.vue
new file mode 100644
index 000000000..f0b66e65e
--- /dev/null
+++ b/components/menu/demo/theme.vue
@@ -0,0 +1,77 @@
+<template>
+<div>
+  <md>
+  ## 主题
+  内建了两套主题 `light|dark`，默认 `light`。
+  </md>
+  <Checkbox @change="changeTheme" /> Change Theme
+  <br />
+  <br />
+  <Menu
+    style="width: 256px"
+    :defaultSelectedKeys="['1']"
+    :defaultOpenKeys="['sub1']"
+    mode="inline"
+    :theme="theme"
+    :selectedKeys="[current]"
+    @click="handleClick"
+  >
+    <MenuItem key="1">
+      <Icon type="mail" />
+      Navigation One
+    </MenuItem>
+    <MenuItem key="2">
+      <Icon type="calendar" />
+      Navigation Two
+    </MenuItem>
+    <SubMenu key="sub1">
+      <span slot="title"><Icon type="appstore" /><span>Navigation Three</span></span>
+      <MenuItem key="3">Option 3</MenuItem>
+      <MenuItem key="4">Option 4</MenuItem>
+      <SubMenu key="sub1-2" title="Submenu">
+        <MenuItem key="5">Option 5</MenuItem>
+        <MenuItem key="6">Option 6</MenuItem>
+      </SubMenu>
+    </SubMenu>
+    <SubMenu key="sub2">
+      <span slot="title"><Icon type="setting" /><span>Navigation Four</span></span>
+      <MenuItem key="7">Option 7</MenuItem>
+      <MenuItem key="8">Option 8</MenuItem>
+      <MenuItem key="9">Option 9</MenuItem>
+      <MenuItem key="10">Option 10</MenuItem>
+    </SubMenu>
+  </Menu>
+</div>
+</template>
+<script>
+import { Menu, Icon, Checkbox } from 'antd'
+const SubMenu = Menu.SubMenu
+const MenuItemGroup = Menu.ItemGroup
+const MenuItem = Menu.Item
+export default {
+  data () {
+    return {
+      current: '1',
+      theme: 'dark',
+    }
+  },
+  methods: {
+    handleClick (e) {
+      console.log('click ', e)
+      this.current = e.key
+    },
+    changeTheme ({ target }) {
+      this.theme = target.checked ? 'light' : 'dark'
+    },
+  },
+  components: {
+    Menu,
+    Icon,
+    SubMenu,
+    MenuItemGroup,
+    MenuItem,
+    Checkbox,
+  },
+}
+
+</script>
diff --git a/components/menu/demo/vertical.vue b/components/menu/demo/vertical.vue
new file mode 100644
index 000000000..7fa24c7a0
--- /dev/null
+++ b/components/menu/demo/vertical.vue
@@ -0,0 +1,60 @@
+<template>
+<div>
+  <md>
+  ## 垂直菜单
+  子菜单是弹出的形式。
+  </md>
+  <Menu
+    style="width: 256px"
+    mode="vertical"
+    @click="handleClick"
+  >
+    <MenuItem key="1">
+      <Icon type="mail" />
+      Navigation One
+    </MenuItem>
+    <MenuItem key="2">
+      <Icon type="calendar" />
+      Navigation Two
+    </MenuItem>
+    <SubMenu key="sub1">
+      <span slot="title"><Icon type="appstore" /><span>Navigation Three</span></span>
+      <MenuItem key="3">Option 3</MenuItem>
+      <MenuItem key="4">Option 4</MenuItem>
+      <SubMenu key="sub1-2" title="Submenu">
+        <MenuItem key="5">Option 5</MenuItem>
+        <MenuItem key="6">Option 6</MenuItem>
+      </SubMenu>
+    </SubMenu>
+    <SubMenu key="sub2">
+      <span slot="title"><Icon type="setting" /><span>Navigation Four</span></span>
+      <MenuItem key="7">Option 7</MenuItem>
+      <MenuItem key="8">Option 8</MenuItem>
+      <MenuItem key="9">Option 9</MenuItem>
+      <MenuItem key="10">Option 10</MenuItem>
+    </SubMenu>
+  </Menu>
+</div>
+</template>
+<script>
+import { Menu, Icon, Checkbox } from 'antd'
+const SubMenu = Menu.SubMenu
+const MenuItemGroup = Menu.ItemGroup
+const MenuItem = Menu.Item
+export default {
+  methods: {
+    handleClick (e) {
+      console.log('click ', e)
+    },
+  },
+  components: {
+    Menu,
+    Icon,
+    SubMenu,
+    MenuItemGroup,
+    MenuItem,
+    Checkbox,
+  },
+}
+
+</script>
diff --git a/components/menu/index.vue b/components/menu/index.vue
index 5c792b6fa..5dc810d2e 100644
--- a/components/menu/index.vue
+++ b/components/menu/index.vue
@@ -37,7 +37,6 @@ export default {
     return {
       inlineCollapsed: this.getInlineCollapsed(),
       getInlineCollapsed: this.getInlineCollapsed,
-      antdMenuTheme: this.$props.theme,
     }
   },
   mixins: [BaseMixin],
diff --git a/components/menu/index.zh-CN.md b/components/menu/index.zh-CN.md
new file mode 100644
index 000000000..d9334de2c
--- /dev/null
+++ b/components/menu/index.zh-CN.md
@@ -0,0 +1,81 @@
+---
+category: Components
+cols: 1
+type: Navigation
+title: Menu
+subtitle: 导航菜单
+---
+
+为页面和功能提供导航的菜单列表。
+
+## 何时使用
+
+导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。
+
+更多布局和导航的使用可以参考：[通用布局](/components/layout)。
+
+## API
+
+```html
+<Menu>
+  <Menu.Item>菜单项</Menu.Item>
+  <SubMenu title="子菜单">
+    <Menu.Item>子菜单项</Menu.Item>
+  </SubMenu>
+</Menu>
+```
+
+### Menu
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| defaultOpenKeys | 初始展开的 SubMenu 菜单项 key 数组 |  |  |
+| defaultSelectedKeys | 初始选中的菜单项 key 数组 | string\[] |  |
+| forceSubMenuRender | 在子菜单展示之前就渲染进 DOM | boolean | false |
+| inlineCollapsed | inline 时菜单是否收起状态 | boolean | - |
+| inlineIndent | inline 模式的菜单缩进宽度 | number | 24 |
+| mode | 菜单类型，现在支持垂直、水平、和内嵌模式三种 | string: `vertical` `vertical-right` `horizontal` `inline` | `vertical` |
+| multiple | 是否允许多选 | boolean | false |
+| openKeys(.sync) | 当前展开的 SubMenu 菜单项 key 数组 | string\[] |  |
+| selectable | 是否允许选中 | boolean | true |
+| selectedKeys(v-model) | 当前选中的菜单项 key 数组 | string\[] |  |
+| subMenuCloseDelay | 用户鼠标离开子菜单后关闭延时，单位：秒 | number | 0.1 |
+| subMenuOpenDelay | 用户鼠标进入子菜单后开启延时，单位：秒 | number | 0 |
+| theme | 主题颜色 | string: `light` `dark` | `light` |
+
+### Menu事件
+| 事件名称 | 说明 | 回调参数 |
+| click | 点击 MenuItem 调用此函数 | function({ item, key, keyPath }) |
+| deselect | 取消选中时调用，仅在 multiple 生效 | function({ item, key, selectedKeys }) |
+| openChange | SubMenu 展开/关闭的回调 | function(openKeys: string\[]) |
+| select | 被选中时调用 | function({ item, key, selectedKeys }) |
+
+### Menu.Item
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| disabled | 是否禁用 | boolean | false |
+| key | item 的唯一标志 | string |  |
+
+### Menu.SubMenu
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| children | 子菜单的菜单项 | Array&lt;MenuItem\|SubMenu> |  |
+| disabled | 是否禁用 | boolean | false |
+| key | 唯一标志 | string |  |
+| title | 子菜单项值 | string\|slot |  |
+
+### SubMenu事件
+| 事件名称 | 说明 | 回调参数 |
+| titleClick | 点击子菜单标题 | ({ key, domEvent }) |
+
+### Menu.ItemGroup
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| title | 分组标题 | string\|\|function|\slot |  |
+
+### Menu.Divider
+
+菜单项分割线，只用在弹出菜单内。
diff --git a/components/menu/src/MenuItem.vue b/components/menu/src/MenuItem.vue
index 84cbe1b49..9ef6be874 100644
--- a/components/menu/src/MenuItem.vue
+++ b/components/menu/src/MenuItem.vue
@@ -1,7 +1,7 @@
 <script>
 import PropTypes from '../../_util/vue-types'
 import KeyCode from '../../_util/KeyCode'
-import { noop } from './util'
+// import { noop } from './util'
 import BaseMixin from '../../_util/BaseMixin'
 const props = {
   rootPrefixCls: PropTypes.string,
diff --git a/components/menu/src/MenuItemGroup.vue b/components/menu/src/MenuItemGroup.vue
index e028186bd..50f23a8fa 100644
--- a/components/menu/src/MenuItemGroup.vue
+++ b/components/menu/src/MenuItemGroup.vue
@@ -1,5 +1,6 @@
 <script>
 import PropTypes from '../../_util/vue-types'
+import { getComponentFromProp } from '../../_util/props-util'
 
 const MenuItemGroup = {
   name: 'MenuItemGroup',
@@ -10,7 +11,7 @@ const MenuItemGroup = {
     className: PropTypes.string,
     rootPrefixCls: PropTypes.string,
     disabled: PropTypes.bool.def(true),
-    title: PropTypes.any.def(''),
+    title: PropTypes.any,
   },
   isMenuItemGroup: true,
   methods: {
@@ -30,7 +31,7 @@ const MenuItemGroup = {
           class={titleClassName}
           title={typeof props.title === 'string' ? props.title : undefined}
         >
-          {props.title}
+          {getComponentFromProp(this, 'title')}
         </div>
         <ul class={listClassName}>
           {this.$slots.default.map(this.renderInnerMenuItem)}
diff --git a/components/menu/src/SubMenu.vue b/components/menu/src/SubMenu.vue
index 95d683bc0..7b4470025 100644
--- a/components/menu/src/SubMenu.vue
+++ b/components/menu/src/SubMenu.vue
@@ -46,7 +46,6 @@ export default {
   },
   inject: {
     parentMenuContext: { default: undefined },
-    antdMenuTheme: { default: 'light' },
   },
   mixins: [BaseMixin],
   isSubMenu: true,
@@ -214,8 +213,7 @@ export default {
 
     onTitleClick (e) {
       const { triggerSubMenuAction, eventKey } = this.$props
-
-      this.__emit('itemClick', {
+      this.$emit('titleClick', {
         key: eventKey,
         domEvent: e,
       })
@@ -360,7 +358,7 @@ export default {
 
   render (h) {
     const props = this.$props
-    const { rootPrefixCls, antdMenuTheme } = this
+    const { rootPrefixCls, parentMenuContext } = this
     const isOpen = this.isOpen()
     const prefixCls = this.getPrefixCls()
     const isInlineMode = props.mode === 'inline'
@@ -475,7 +473,7 @@ export default {
         {!isInlineMode && (
           <Trigger
             prefixCls={prefixCls}
-            popupClassName={`${prefixCls}-popup ${rootPrefixCls}-${antdMenuTheme} ${popupClassName || ''}`}
+            popupClassName={`${prefixCls}-popup ${rootPrefixCls}-${parentMenuContext.theme} ${popupClassName || ''}`}
             getPopupContainer={getPopupContainer}
             builtinPlacements={placements}
             popupPlacement={popupPlacement}
diff --git a/components/menu/src/commonPropsType.js b/components/menu/src/commonPropsType.js
index 80c2a9f3b..3e5a8a829 100644
--- a/components/menu/src/commonPropsType.js
+++ b/components/menu/src/commonPropsType.js
@@ -18,4 +18,5 @@ export default {
   subMenuCloseDelay: PropTypes.number.def(0.1),
   level: PropTypes.number.def(1),
   inlineIndent: PropTypes.number.def(24),
+  theme: PropTypes.oneOf(['light', 'dark']).def('light'),
 }
diff --git a/components/popconfirm/demo/placement.vue b/components/popconfirm/demo/placement.vue
index 8efb91b96..e635afc17 100644
--- a/components/popconfirm/demo/placement.vue
+++ b/components/popconfirm/demo/placement.vue
@@ -7,28 +7,22 @@
   <div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: 'nowrap' }">
     <Popconfirm placement="topLeft" okText="Yes" cancelText="No" @confirm="confirm">
       <template slot="title">
-        <div>
-          <p>Are you sure delete this task?</p>
-          <p>Are you sure delete this task?</p>
-        </div>
+        <p>Are you sure delete this task?</p>
+        <p>Are you sure delete this task?</p>
       </template>
       <AntButton>TL</AntButton>
     </Popconfirm>
     <Popconfirm placement="top" okText="Yes" cancelText="No" @confirm="confirm">
       <template slot="title">
-        <div>
-          <p>Are you sure delete this task?</p>
-          <p>Are you sure delete this task?</p>
-        </div>
+        <p>Are you sure delete this task?</p>
+        <p>Are you sure delete this task?</p>
       </template>
       <AntButton>Top</AntButton>
     </Popconfirm>
     <Popconfirm placement="topRight" okText="Yes" cancelText="No" @confirm="confirm">
       <template slot="title">
-        <div>
-          <p>Are you sure delete this task?</p>
-          <p>Are you sure delete this task?</p>
-        </div>
+        <p>Are you sure delete this task?</p>
+        <p>Are you sure delete this task?</p>
       </template>
       <AntButton>TR</AntButton>
     </Popconfirm>
@@ -36,28 +30,22 @@
   <div :style="{ width: `${buttonWidth}px`, float: 'left' }">
     <Popconfirm placement="leftTop" okText="Yes" cancelText="No" @confirm="confirm">
       <template slot="title">
-        <div>
-          <p>Are you sure delete this task?</p>
-          <p>Are you sure delete this task?</p>
-        </div>
+        <p>Are you sure delete this task?</p>
+        <p>Are you sure delete this task?</p>
       </template>
       <AntButton>LT</AntButton>
     </Popconfirm>
     <Popconfirm placement="left" okText="Yes" cancelText="No" @confirm="confirm">
       <template slot="title">
-        <div>
-          <p>Are you sure delete this task?</p>
-          <p>Are you sure delete this task?</p>
-        </div>
+        <p>Are you sure delete this task?</p>
+        <p>Are you sure delete this task?</p>
       </template>
       <AntButton>Left</AntButton>
     </Popconfirm>
     <Popconfirm placement="leftBottom" okText="Yes" cancelText="No" @confirm="confirm">
       <template slot="title">
-        <div>
-          <p>Are you sure delete this task?</p>
-          <p>Are you sure delete this task?</p>
-        </div>
+        <p>Are you sure delete this task?</p>
+        <p>Are you sure delete this task?</p>
       </template>
       <AntButton>LB</AntButton>
     </Popconfirm>
@@ -65,28 +53,22 @@
   <div :style="{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24 }px`}">
     <Popconfirm placement="rightTop" okText="Yes" cancelText="No" @confirm="confirm">
       <template slot="title">
-        <div>
-          <p>Are you sure delete this task?</p>
-          <p>Are you sure delete this task?</p>
-        </div>
+        <p>Are you sure delete this task?</p>
+        <p>Are you sure delete this task?</p>
       </template>
       <AntButton>RT</AntButton>
     </Popconfirm>
     <Popconfirm placement="right" okText="Yes" cancelText="No" @confirm="confirm">
       <template slot="title">
-        <div>
-          <p>Are you sure delete this task?</p>
-          <p>Are you sure delete this task?</p>
-        </div>
+        <p>Are you sure delete this task?</p>
+        <p>Are you sure delete this task?</p>
       </template>
       <AntButton>Right</AntButton>
     </Popconfirm>
     <Popconfirm placement="rightBottom" okText="Yes" cancelText="No" @confirm="confirm">
       <template slot="title">
-        <div>
-          <p>Are you sure delete this task?</p>
-          <p>Are you sure delete this task?</p>
-        </div>
+        <p>Are you sure delete this task?</p>
+        <p>Are you sure delete this task?</p>
       </template>
       <AntButton>RB</AntButton>
     </Popconfirm>
@@ -94,28 +76,22 @@
   <div :style="{ marginLeft: `${buttonWidth}px`, clear: 'both', whiteSpace: 'nowrap' }">
     <Popconfirm placement="bottomLeft" okText="Yes" cancelText="No" @confirm="confirm">
       <template slot="title">
-        <div>
-          <p>Are you sure delete this task?</p>
-          <p>Are you sure delete this task?</p>
-        </div>
+        <p>Are you sure delete this task?</p>
+        <p>Are you sure delete this task?</p>
       </template>
       <AntButton>BL</AntButton>
     </Popconfirm>
     <Popconfirm placement="bottom" okText="Yes" cancelText="No" @confirm="confirm">
       <template slot="title">
-        <div>
           <p>Are you sure delete this task?</p>
           <p>Are you sure delete this task?</p>
-        </div>
       </template>
       <AntButton>Bottom</AntButton>
     </Popconfirm>
     <Popconfirm placement="bottomRight" okText="Yes" cancelText="No" @confirm="confirm">
       <template slot="title">
-        <div>
-          <p>Are you sure delete this task?</p>
-          <p>Are you sure delete this task?</p>
-        </div>
+        <p>Are you sure delete this task?</p>
+        <p>Are you sure delete this task?</p>
       </template>
       <AntButton>BR</AntButton>
     </Popconfirm>
diff --git a/components/popconfirm/index.vue b/components/popconfirm/index.vue
index 9f43230ee..0b6c3ba3b 100644
--- a/components/popconfirm/index.vue
+++ b/components/popconfirm/index.vue
@@ -84,23 +84,21 @@ export default {
       },
     }
     const overlay = (
-      <div>
-        <div class={`${prefixCls}-inner-content`}>
-          <div class={`${prefixCls}-message`}>
-            <Icon type='exclamation-circle' />
-            <div class={`${prefixCls}-message-title`}>
-              {getComponentFromProp(this, 'title')}
-            </div>
-          </div>
-          <div class={`${prefixCls}-buttons`}>
-            <Button onClick={this.onCancel} size='small'>
-              {getComponentFromProp(this, 'cancelText')}
-            </Button>
-            <Button onClick={this.onConfirm} type={okType} size='small'>
-              {getComponentFromProp(this, 'okText')}
-            </Button>
+      <div class={`${prefixCls}-inner-content`}>
+        <div class={`${prefixCls}-message`}>
+          <Icon type='exclamation-circle' />
+          <div class={`${prefixCls}-message-title`}>
+            {getComponentFromProp(this, 'title')}
           </div>
         </div>
+        <div class={`${prefixCls}-buttons`}>
+          <Button onClick={this.onCancel} size='small'>
+            {getComponentFromProp(this, 'cancelText')}
+          </Button>
+          <Button onClick={this.onConfirm} type={okType} size='small'>
+            {getComponentFromProp(this, 'okText')}
+          </Button>
+        </div>
       </div>
     )
     return (
diff --git a/components/popover/demo/arrow-point-at-center.vue b/components/popover/demo/arrow-point-at-center.vue
index 096f076f5..a85de89bc 100644
--- a/components/popover/demo/arrow-point-at-center.vue
+++ b/components/popover/demo/arrow-point-at-center.vue
@@ -6,26 +6,18 @@
 </md>
   <Popover placement="topLeft">
     <template slot="content">
-      <div>
-        <p>Content</p>
-        <p>Content</p>
-      </div>
-    </template>
-    <template slot="title">
-      <span>Title</span>
+      <p>Content</p>
+      <p>Content</p>
     </template>
+    <span slot="title">Title</span>
     <AntButton>Align edge / 边缘对齐</AntButton>
   </Popover>
   <Popover placement="topLeft" arrowPointAtCenter>
     <template slot="content">
-      <div>
-        <p>Content</p>
-        <p>Content</p>
-      </div>
-    </template>
-    <template slot="title">
-      <span>Title</span>
+      <p>Content</p>
+      <p>Content</p>
     </template>
+    <span slot="title">Title</span>
     <AntButton>Arrow points to center / 箭头指向中心</AntButton>
   </Popover>
 </div>
diff --git a/components/popover/demo/basic.vue b/components/popover/demo/basic.vue
index 20cb76fd3..d15e4dc7e 100644
--- a/components/popover/demo/basic.vue
+++ b/components/popover/demo/basic.vue
@@ -6,10 +6,8 @@
 </md>
 <Popover title="Title">
     <template slot="content">
-      <div>
-        <p>Content</p>
-        <p>Content</p>
-      </div>
+      <p>Content</p>
+      <p>Content</p>
     </template>
     <AntButton type="primary">Hover me</AntButton>
   </Popover>
diff --git a/components/popover/demo/control.vue b/components/popover/demo/control.vue
index 8d8fa9b47..c1af76516 100644
--- a/components/popover/demo/control.vue
+++ b/components/popover/demo/control.vue
@@ -9,9 +9,7 @@
     trigger="click"
     v-model="visible"
   >
-    <template slot="content">
-      <a @click="hide">Close</a>
-    </template>
+    <a @click="hide" slot="content">Close</a>
     <AntButton type="primary">Click me</AntButton>
   </Popover>
 </div>
diff --git a/components/popover/demo/placement.vue b/components/popover/demo/placement.vue
index 2c80b16c6..e2d4077f6 100644
--- a/components/popover/demo/placement.vue
+++ b/components/popover/demo/placement.vue
@@ -7,10 +7,8 @@
   <div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: 'nowrap' }">
     <Popover placement="topLeft">
       <template slot="content">
-        <div>
-          <p>Content</p>
-          <p>Content</p>
-        </div>
+        <p>Content</p>
+        <p>Content</p>
       </template>
       <template slot="title">
         <span>Title</span>
@@ -19,10 +17,8 @@
     </Popover>
     <Popover placement="top">
       <template slot="content">
-        <div>
-          <p>Content</p>
-          <p>Content</p>
-        </div>
+        <p>Content</p>
+        <p>Content</p>
       </template>
       <template slot="title">
         <span>Title</span>
@@ -31,10 +27,8 @@
     </Popover>
     <Popover placement="topRight">
       <template slot="content">
-        <div>
-          <p>Content</p>
-          <p>Content</p>
-        </div>
+        <p>Content</p>
+        <p>Content</p>
       </template>
       <template slot="title">
         <span>Title</span>
@@ -45,10 +39,8 @@
   <div :style="{ width: `${buttonWidth}px`, float: 'left' }">
     <Popover placement="leftTop">
       <template slot="content">
-        <div>
-          <p>Content</p>
-          <p>Content</p>
-        </div>
+        <p>Content</p>
+        <p>Content</p>
       </template>
       <template slot="title">
         <span>Title</span>
@@ -57,10 +49,8 @@
     </Popover>
     <Popover placement="left">
       <template slot="content">
-        <div>
-          <p>Content</p>
-          <p>Content</p>
-        </div>
+        <p>Content</p>
+        <p>Content</p>
       </template>
       <template slot="title">
         <span>Title</span>
@@ -69,10 +59,8 @@
     </Popover>
     <Popover placement="leftBottom">
       <template slot="content">
-        <div>
-          <p>Content</p>
-          <p>Content</p>
-        </div>
+        <p>Content</p>
+        <p>Content</p>
       </template>
       <template slot="title">
         <span>Title</span>
@@ -83,10 +71,8 @@
   <div :style="{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24 }px`}">
     <Popover placement="rightTop">
       <template slot="content">
-        <div>
-          <p>Content</p>
-          <p>Content</p>
-        </div>
+        <p>Content</p>
+        <p>Content</p>
       </template>
       <template slot="title">
         <span>Title</span>
@@ -95,10 +81,8 @@
     </Popover>
     <Popover placement="right">
       <template slot="content">
-        <div>
-          <p>Content</p>
-          <p>Content</p>
-        </div>
+        <p>Content</p>
+        <p>Content</p>
       </template>
       <template slot="title">
         <span>Title</span>
@@ -107,10 +91,8 @@
     </Popover>
     <Popover placement="rightBottom">
       <template slot="content">
-        <div>
-          <p>Content</p>
-          <p>Content</p>
-        </div>
+        <p>Content</p>
+        <p>Content</p>
       </template>
       <template slot="title">
         <span>Title</span>
@@ -121,10 +103,8 @@
   <div :style="{ marginLeft: `${buttonWidth}px`, clear: 'both', whiteSpace: 'nowrap' }">
     <Popover placement="bottomLeft">
       <template slot="content">
-        <div>
-          <p>Content</p>
-          <p>Content</p>
-        </div>
+        <p>Content</p>
+        <p>Content</p>
       </template>
       <template slot="title">
         <span>Title</span>
@@ -133,10 +113,8 @@
     </Popover>
     <Popover placement="bottom">
       <template slot="content">
-        <div>
-          <p>Content</p>
-          <p>Content</p>
-        </div>
+        <p>Content</p>
+        <p>Content</p>
       </template>
       <template slot="title">
         <span>Title</span>
@@ -145,10 +123,8 @@
     </Popover>
     <Popover placement="bottomRight">
       <template slot="content">
-        <div>
-          <p>Content</p>
-          <p>Content</p>
-        </div>
+        <p>Content</p>
+        <p>Content</p>
       </template>
       <template slot="title">
         <span>Title</span>
diff --git a/components/popover/demo/triggerType.vue b/components/popover/demo/triggerType.vue
index bbf14fb98..e8676ae3a 100644
--- a/components/popover/demo/triggerType.vue
+++ b/components/popover/demo/triggerType.vue
@@ -6,28 +6,22 @@
 </md>
   <Popover title="Title" trigger="hover">
     <template slot="content">
-      <div>
-        <p>Content</p>
-        <p>Content</p>
-      </div>
+      <p>Content</p>
+      <p>Content</p>
     </template>
     <AntButton type="primary">Hover me</AntButton>
   </Popover>
   <Popover title="Title" trigger="focus">
     <template slot="content">
-      <div>
-        <p>Content</p>
-        <p>Content</p>
-      </div>
+      <p>Content</p>
+      <p>Content</p>
     </template>
     <AntButton type="primary">Focus me</AntButton>
   </Popover>
   <Popover title="Title" trigger="click">
     <template slot="content">
-      <div>
-        <p>Content</p>
-        <p>Content</p>
-      </div>
+      <p>Content</p>
+      <p>Content</p>
     </template>
     <AntButton type="primary">Click me</AntButton>
   </Popover>
diff --git a/components/tooltip/index.js b/components/tooltip/index.js
index 4b5f7d8bc..8cbdc0fe9 100644
--- a/components/tooltip/index.js
+++ b/components/tooltip/index.js
@@ -1,3 +1,3 @@
-import ToolTip from './tooltip.vue'
+import ToolTip from './Tooltip.vue'
 export default ToolTip
 
diff --git a/components/tooltip/tooltip.vue b/components/tooltip/tooltip.vue
index f94ea12b5..06721a439 100644
--- a/components/tooltip/tooltip.vue
+++ b/components/tooltip/tooltip.vue
@@ -1,6 +1,6 @@
 <script>
 import { cloneElement, isValidElement, getClass, getStyle } from '../_util/vnode'
-import RcTooltip from './src/tooltip'
+import RcTooltip from './src/Tooltip'
 import getPlacements from './placements'
 import PropTypes from '../_util/vue-types'
 import { hasProp, getComponentFromProp } from '../_util/props-util'
diff --git a/components/trigger/Popup.vue b/components/trigger/Popup.vue
index c0ded5208..e5d329cdc 100644
--- a/components/trigger/Popup.vue
+++ b/components/trigger/Popup.vue
@@ -59,10 +59,7 @@ export default {
     onAlign (popupDomNode, align) {
       const props = this.$props
       const currentAlignClassName = props.getClassNameFromAlign(align)
-      if (this.currentAlignClassName !== currentAlignClassName) {
-        popupDomNode.className = popupDomNode.className.replace(this.currentAlignClassName, currentAlignClassName)
-        this.currentAlignClassName = currentAlignClassName
-      }
+      popupDomNode.className = this.getClassName(currentAlignClassName)
       this.$listeners.align && this.$listeners.align(popupDomNode, align)
     },
 
@@ -105,20 +102,15 @@ export default {
       const { $props: props, $slots, $listeners, getTransitionName } = this
       const { align, visible, prefixCls, animation } = props
       const { mouseenter, mouseleave } = $listeners
-      this.currentAlignClassName = this.currentAlignClassName || props.getClassNameFromAlign(align)
-      const className = this.getClassName(this.currentAlignClassName)
+      const className = this.getClassName(props.getClassNameFromAlign(align))
       // const hiddenClassName = `${prefixCls}-hidden`
-      if (!visible) {
-        this.currentAlignClassName = null
-      }
-      // visible = true
       const popupInnerProps = {
         props: {
           prefixCls,
           visible,
           // hiddenClassName,
         },
-        class: `${className}`,
+        class: className,
         on: {
           mouseenter: mouseenter || noop,
           mouseleave: mouseleave || noop,
@@ -132,17 +124,13 @@ export default {
           css: false,
         }),
       }
-      let opacity = '1'
       const transitionName = getTransitionName()
       const transitionEvent = {
         beforeEnter: (el) => {
-          opacity = el.style.opacity
-          el.style.opacity = '0'
           el.style.display = el.__vOriginalDisplay
           this.$refs.alignInstance.forceAlign()
         },
         enter: (el, done) => {
-          el.style.opacity = opacity
           animate(el, `${transitionName}-enter`, done)
         },
         leave: (el, done) => {
diff --git a/contributors.md b/contributors.md
index bc433b6a4..e0cec9677 100644
--- a/contributors.md
+++ b/contributors.md
@@ -10,7 +10,7 @@ Tag | done
 ToolTip | done
 Popconfirm | done
 Popover | done
-Menu
+Menu | done
 Carousel
 Mention
 Input | done |select完成后补全demo