From 8241575d7b8e1de38e4f27c591d4a49fdb921dc6 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Sun, 1 Oct 2017 19:18:58 -0300
Subject: [PATCH] comp(MdMenu): add menu component (#21)

* comp(MdMenu): add menus

* feat(MdMenu): move menu styles to md-menu-component

* test(MdMenu): fix broken tests

* comp(MdMenu): create menus

* docs(MdMenu): add docs for menus
---
 docs/app/components/ApiTable.vue              |   2 +-
 docs/app/i18n/en-US.js                        |   3 +
 .../Components/Card/examples/Layouts.vue      |  44 +++-
 docs/app/pages/Components/Menu/Menu.vue       | 177 ++++++++++++++
 .../Components/Menu/examples/Alignments.vue   |  45 ++++
 .../Components/Menu/examples/Directions.vue   |  55 +++++
 .../Menu/examples/MultipleContent.vue         | 118 ++++++++++
 .../pages/Components/Menu/examples/Sizes.vue  |  66 ++++++
 docs/app/routes.js                            |   5 +
 docs/app/template/MainNavContent.vue          |   1 +
 .../MdList/MdListItem/MdListItem.vue          |  14 +-
 src/components/MdList/theme.scss              |   2 +-
 src/components/MdMenu/MdMenu.test.js          |   9 +
 src/components/MdMenu/MdMenu.vue              | 124 ++++++++++
 src/components/MdMenu/MdMenuContent.vue       | 216 ++++++++++++++++++
 src/components/MdMenu/MdMenuItem.vue          |  44 ++++
 src/components/MdMenu/index.js                |  11 +
 src/components/MdMenu/theme.scss              |   6 +
 src/components/MdPopover/MdPopover.vue        |  31 ++-
 src/components/MdPortal/MdPortal.vue          |  30 ++-
 src/components/index.js                       |   2 +
 src/core/utils/MdInteractionEvents.js         |   6 +
 src/core/utils/MdObserveEvent.js              |  11 +
 src/core/utils/MdPropValidator.js             |   4 +-
 src/theme/all.scss                            |   1 +
 25 files changed, 988 insertions(+), 39 deletions(-)
 create mode 100644 docs/app/pages/Components/Menu/Menu.vue
 create mode 100644 docs/app/pages/Components/Menu/examples/Alignments.vue
 create mode 100644 docs/app/pages/Components/Menu/examples/Directions.vue
 create mode 100644 docs/app/pages/Components/Menu/examples/MultipleContent.vue
 create mode 100644 docs/app/pages/Components/Menu/examples/Sizes.vue
 create mode 100644 src/components/MdMenu/MdMenu.test.js
 create mode 100644 src/components/MdMenu/MdMenu.vue
 create mode 100644 src/components/MdMenu/MdMenuContent.vue
 create mode 100644 src/components/MdMenu/MdMenuItem.vue
 create mode 100644 src/components/MdMenu/index.js
 create mode 100644 src/components/MdMenu/theme.scss
 create mode 100644 src/core/utils/MdInteractionEvents.js
 create mode 100644 src/core/utils/MdObserveEvent.js

diff --git a/docs/app/components/ApiTable.vue b/docs/app/components/ApiTable.vue
index 42a5ae860..c7a3bc3d8 100644
--- a/docs/app/components/ApiTable.vue
+++ b/docs/app/components/ApiTable.vue
@@ -104,7 +104,7 @@ export default {
 
   .description {
     >>> code {
-      color: md-get-palette-color(blue, A200);
+      color: md-get-palette-color(red, A200);
       font-family: 'Roboto Mono', monospace;
     }
   }
diff --git a/docs/app/i18n/en-US.js b/docs/app/i18n/en-US.js
index af8c87fe8..f0b3cbe6d 100644
--- a/docs/app/i18n/en-US.js
+++ b/docs/app/i18n/en-US.js
@@ -76,6 +76,9 @@ export default {
     file: {
       title: 'File'
     },
+    menu: {
+      title: 'Menu'
+    },
     switch: {
       title: 'Switch'
     },
diff --git a/docs/app/pages/Components/Card/examples/Layouts.vue b/docs/app/pages/Components/Card/examples/Layouts.vue
index 678dc6054..49dc98030 100644
--- a/docs/app/pages/Components/Card/examples/Layouts.vue
+++ b/docs/app/pages/Components/Card/examples/Layouts.vue
@@ -22,9 +22,9 @@
 
     <md-card>
       <md-card-header>
-        <!-- <md-avatar> -->
+        <md-avatar>
           <img src="assets/examples/avatar.png" alt="Avatar">
-        <!-- </md-avatar> -->
+        </md-avatar>
 
         <div class="md-title">Title goes here</div>
         <div class="md-subhead">Subtitle here</div>
@@ -141,9 +141,23 @@
           <div class="md-subhead">Subtitle here</div>
         </md-card-header-text>
 
-        <md-button class="md-icon-button">
-          <md-icon>more_vert</md-icon>
-        </md-button>
+        <md-menu md-size="big" md-direction="bottom-end">
+          <md-button class="md-icon-button" md-menu-trigger>
+            <md-icon>more_vert</md-icon>
+          </md-button>
+
+          <md-menu-content>
+            <md-menu-item @click="doACall">
+              <span>Call</span>
+              <md-icon>phone</md-icon>
+            </md-menu-item>
+
+            <md-menu-item @click="sendMessage">
+              <span>Send a message</span>
+              <md-icon>message</md-icon>
+            </md-menu-item>
+          </md-menu-content>
+        </md-menu>
       </md-card-header>
 
       <md-card-content>
@@ -158,6 +172,20 @@
   </div>
 </template>
 
+<script>
+  export default {
+    name: 'Layouts',
+    methods: {
+      sendMessage () {
+        window.alert('Send a message...')
+      },
+      doACall () {
+        window.alert('Calling someone...')
+      }
+    }
+  }
+</script>
+
 <style lang="scss" scoped>
   .md-card {
     width: 320px;
@@ -203,9 +231,3 @@
     }
   }
 </style>
-
-<script>
-export default {
-  name: 'Layouts'
-}
-</script>
diff --git a/docs/app/pages/Components/Menu/Menu.vue b/docs/app/pages/Components/Menu/Menu.vue
new file mode 100644
index 000000000..76c985cfd
--- /dev/null
+++ b/docs/app/pages/Components/Menu/Menu.vue
@@ -0,0 +1,177 @@
+<example src="./examples/Directions.vue" />
+<example src="./examples/Sizes.vue" />
+<example src="./examples/Alignments.vue" />
+<example src="./examples/MultipleContent.vue" />
+
+<template>
+  <page-container centered :title="$t('pages.menu.title')">
+    <div class="page-container-section">
+      <p>Menus appear upon interaction with a button, action, or other control. They usually display a list of choices, with one choice per line, but can also show a rich content.</p>
+      <p>The <code>md-menu</code> component consists of a parent (<code>md-menu</code>), a trigger (<code>md-menu-trigger</code>), a content holder (<code>md-menu-content</code>) and optional items (<code>md-menu-item</code>).</p>
+    </div>
+
+    <div class="page-container-section">
+      <h2>Directions</h2>
+
+      <p>The position of the menu content is calculated based of the contraints of the trigger element. Based on this you can set a position using X and Y axis.</p>
+      <p>You can combine <code>top</code>/<code>bottom</code> with <code>start</code>/<code>end</code>:</p>
+      <code-example title="Start and End" :component="examples['directions']" />
+    </div>
+
+    <div class="page-container-section">
+      <h2>Alignments</h2>
+
+      <p>Sometimes the default position is not what we want. Maybe we need to show a menu in another location, and to achieve that you can use trigger alignment or custom offsets:</p>
+      <code-example title="Trigger alignment and Offsets" :component="examples['alignments']" />
+    </div>
+
+    <div class="page-container-section">
+      <h2>Sizes</h2>
+
+      <p><code>md-menu</code> have 4 different sizes and a auto mode:</p>
+      <code-example title="5 possible sizes" :component="examples['sizes']" />
+      <note-block>The max-width of a menu is 280px.</note-block>
+    </div>
+
+    <div class="page-container-section">
+      <h2>Rich Content and Icon Alignment</h2>
+
+      <p>Sometimes you may need to toggle your menu dynamically. You can also show arbitrary content inside a <code>md-menu-content</code>, like this card example:</p>
+      <code-example title="Open a menu programatically" :component="examples['multiple-content']" />
+      <note-block tip>A <code>md-menu</code> with items that have icons aligns perfectly with <code>md-icon-button</code>.</note-block>
+
+      <api-item title="API - md-menu">
+        <p>The following options can be used with any menu:</p>
+        <api-table :headings="props.headings" :props="props.props" slot="props" />
+      </api-item>
+    </div>
+  </page-container>
+</template>
+
+<script>
+  import examples from 'docs-mixins/docsExample'
+  import MdInteractionEvents from 'core/utils/MdInteractionEvents'
+
+  function getEventNames () {
+    return MdInteractionEvents.map(event => `<li>${event}</li>`).join('')
+  }
+
+  export default {
+    name: 'Menu',
+    mixins: [examples],
+    data: () => ({
+      props: {
+        headings: ['Name', 'Description', 'Default'],
+        props: [
+          {
+            name: 'md-active',
+            type: 'Boolean',
+            description: 'Used to show/hide a menu programatically.',
+            defaults: 'false'
+          },
+          {
+            name: 'md-close-on-select',
+            type: 'Boolean',
+            description: `
+              When this options is true, the menu will close after a click on a <code>md-menu-item</code>. This will only work if the menu have one of the events below: <br>
+              <ul>${getEventNames()}</ul>`,
+            defaults: 'true'
+          },
+          {
+            name: 'md-direction',
+            type: 'String',
+            description: 'Set the direction of a menu. See below the detailed description of each direction.',
+            defaults: 'bottom-start'
+          },
+          {
+            offset: true,
+            name: 'md-direction="bottom-start"',
+            type: 'String',
+            description: 'Align the menu on the bottom left of the trigger',
+            defaults: '-'
+          },
+          {
+            offset: true,
+            name: 'md-direction="bottom-end"',
+            type: 'String',
+            description: 'Align the menu on the bottom right of the trigger',
+            defaults: '-'
+          },
+          {
+            offset: true,
+            name: 'md-direction="top-start"',
+            type: 'String',
+            description: 'Align the menu on the top left of the trigger',
+            defaults: '-'
+          },
+          {
+            offset: true,
+            name: 'md-direction="top-start"',
+            type: 'String',
+            description: 'Align the menu on the top right of the trigger',
+            defaults: '-'
+          },
+          {
+            name: 'md-align-trigger',
+            type: 'Boolean',
+            description: 'Align the content above the trigger. Also works in combination with <code>md-direction</code> values',
+            defaults: 'false'
+          },
+          {
+            name: 'md-offset-x',
+            type: 'Number',
+            description: 'Set a custom offset in X axis',
+            defaults: '0'
+          },
+          {
+            name: 'md-offset-y',
+            type: 'Number',
+            description: 'Set a custom offset in Y axis',
+            defaults: '0'
+          },
+          {
+            name: 'md-size',
+            type: 'String',
+            description: 'Set the size of a menu. See below the detailed description of each size.',
+            defaults: 'small'
+          },
+          {
+            offset: true,
+            name: 'md-size="small"',
+            type: 'String',
+            description: 'Set a menu with a small size (112px)',
+            defaults: '-'
+          },
+          {
+            offset: true,
+            name: 'md-size="medium"',
+            type: 'String',
+            description: 'Set a menu with a medium size (168px)',
+            defaults: '-'
+          },
+          {
+            offset: true,
+            name: 'md-size="big"',
+            type: 'String',
+            description: 'Set a menu with a big size (224px)',
+            defaults: '-'
+          },
+          {
+            offset: true,
+            name: 'md-size="huge"',
+            type: 'String',
+            description: 'Set a menu with a huge size (280px)',
+            defaults: '-'
+          },
+          {
+            offset: true,
+            name: 'md-size="auto"',
+            type: 'String',
+            description: 'Set a menu with a auto size',
+            defaults: '-'
+          }
+        ]
+      }
+    })
+  }
+</script>
diff --git a/docs/app/pages/Components/Menu/examples/Alignments.vue b/docs/app/pages/Components/Menu/examples/Alignments.vue
new file mode 100644
index 000000000..410e852c9
--- /dev/null
+++ b/docs/app/pages/Components/Menu/examples/Alignments.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <md-menu>
+      <md-button md-menu-trigger>Default</md-button>
+
+      <md-menu-content>
+        <md-menu-item>My Item 1</md-menu-item>
+        <md-menu-item>My Item 2</md-menu-item>
+        <md-menu-item>My Item 3</md-menu-item>
+      </md-menu-content>
+    </md-menu>
+
+    <md-menu md-size="medium" md-align-trigger>
+      <md-button md-menu-trigger>Align with trigger</md-button>
+
+      <md-menu-content>
+        <md-menu-item>My Item 1</md-menu-item>
+        <md-menu-item>My Item 2</md-menu-item>
+        <md-menu-item>My Item 3</md-menu-item>
+      </md-menu-content>
+    </md-menu>
+
+    <md-menu md-size="medium" :md-offset-x="127" :md-offset-y="-36">
+      <md-button md-menu-trigger>Custom Offset</md-button>
+
+      <md-menu-content>
+        <md-menu-item>My Item 1</md-menu-item>
+        <md-menu-item>My Item 2</md-menu-item>
+        <md-menu-item>My Item 3</md-menu-item>
+      </md-menu-content>
+    </md-menu>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Alignments'
+  }
+</script>
+
+<style lang="scss" scoped>
+  .md-menu {
+    margin: 24px;
+  }
+</style>
diff --git a/docs/app/pages/Components/Menu/examples/Directions.vue b/docs/app/pages/Components/Menu/examples/Directions.vue
new file mode 100644
index 000000000..ce3a4a87a
--- /dev/null
+++ b/docs/app/pages/Components/Menu/examples/Directions.vue
@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <md-menu md-direction="bottom-start">
+      <md-button md-menu-trigger>Bottom Start</md-button>
+
+      <md-menu-content>
+        <md-menu-item>My Item 1</md-menu-item>
+        <md-menu-item>My Item 2</md-menu-item>
+        <md-menu-item>My Item 3</md-menu-item>
+      </md-menu-content>
+    </md-menu>
+
+    <md-menu md-direction="bottom-end">
+      <md-button md-menu-trigger>Bottom End</md-button>
+
+      <md-menu-content>
+        <md-menu-item>My Item 1</md-menu-item>
+        <md-menu-item>My Item 2</md-menu-item>
+        <md-menu-item>My Item 3</md-menu-item>
+      </md-menu-content>
+    </md-menu>
+
+    <md-menu md-direction="top-start">
+      <md-button md-menu-trigger>Top Start</md-button>
+
+      <md-menu-content>
+        <md-menu-item>My Item 1</md-menu-item>
+        <md-menu-item>My Item 2</md-menu-item>
+        <md-menu-item>My Item 3</md-menu-item>
+      </md-menu-content>
+    </md-menu>
+
+    <md-menu md-direction="top-end">
+      <md-button md-menu-trigger>Bottom End</md-button>
+
+      <md-menu-content>
+        <md-menu-item>My Item 1</md-menu-item>
+        <md-menu-item>My Item 2</md-menu-item>
+        <md-menu-item>My Item 3</md-menu-item>
+      </md-menu-content>
+    </md-menu>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Directions'
+  }
+</script>
+
+<style lang="scss" scoped>
+  .md-menu {
+    margin: 24px;
+  }
+</style>
diff --git a/docs/app/pages/Components/Menu/examples/MultipleContent.vue b/docs/app/pages/Components/Menu/examples/MultipleContent.vue
new file mode 100644
index 000000000..543cc5e8d
--- /dev/null
+++ b/docs/app/pages/Components/Menu/examples/MultipleContent.vue
@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <md-menu md-size="big" md-direction="top-start" :md-active.sync="toggleCard">
+      <md-button class="md-icon-button" md-menu-trigger>
+        <md-icon>contacts</md-icon>
+      </md-button>
+
+      <md-menu-content>
+        <div class="author-card">
+          <md-avatar class="md-large">
+            <img src="assets/examples/avatar.jpg" alt="Marcos Moura">
+          </md-avatar>
+
+          <div class="author-card-info">
+            <span>Marcos Moura</span>
+            <div class="author-card-links">
+              <a href="https://linkedin.com/in/marcosvmmoura" target="_blank" rel="noopener">Linkedin</a>
+              <a href="https://github.com/marcosmoura" target="_blank" rel="noopener">GitHub</a>
+            </div>
+          </div>
+        </div>
+      </md-menu-content>
+    </md-menu>
+
+    <md-menu>
+      <md-button class="md-icon-button" md-menu-trigger>
+        <md-icon>phone</md-icon>
+      </md-button>
+
+      <md-menu-content>
+        <md-menu-item>
+          <md-icon>phone</md-icon>
+          <span>My Item 1</span>
+        </md-menu-item>
+
+        <md-menu-item>
+          <md-icon>phone</md-icon>
+          <span>My Item 2</span>
+        </md-menu-item>
+
+        <md-menu-item>
+          <md-icon>phone</md-icon>
+          <span>My Item 3</span>
+        </md-menu-item>
+      </md-menu-content>
+    </md-menu>
+
+    <md-menu md-size="big" md-direction="bottom-end">
+      <md-button class="md-icon-button" md-menu-trigger>
+        <md-icon>near_me</md-icon>
+      </md-button>
+
+      <md-menu-content>
+        <md-menu-item>
+          <span>Find on map</span>
+          <md-icon>near_me</md-icon>
+        </md-menu-item>
+
+        <md-menu-item>
+          <span>Call</span>
+          <md-icon>phone</md-icon>
+        </md-menu-item>
+      </md-menu-content>
+    </md-menu>
+
+    <md-button class="md-primary md-raised toggle" @click="toggle">Toggle Contact</md-button>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'MultipleContent',
+    data: () => ({
+      toggleCard: false
+    }),
+    methods: {
+      toggle () {
+        this.toggleCard = !this.toggleCard
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .md-menu,
+  .toggle {
+    margin: 24px;
+  }
+
+  .author-card {
+    padding: 8px 16px;
+    display: flex;
+    align-items: center;
+
+    .md-avatar {
+      margin-right: 16px;
+    }
+
+    .author-card-info {
+      display: flex;
+      flex-flow: column;
+      flex: 1;
+    }
+
+    span {
+      font-size: 16px;
+    }
+
+    .author-card-links {
+      display: flex;
+
+      a + a {
+        margin-left: 8px;
+      }
+    }
+  }
+</style>
+
diff --git a/docs/app/pages/Components/Menu/examples/Sizes.vue b/docs/app/pages/Components/Menu/examples/Sizes.vue
new file mode 100644
index 000000000..1f0628227
--- /dev/null
+++ b/docs/app/pages/Components/Menu/examples/Sizes.vue
@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <md-menu md-size="small">
+      <md-button md-menu-trigger>Small</md-button>
+
+      <md-menu-content>
+        <md-menu-item>My Item 1</md-menu-item>
+        <md-menu-item>My Item 2</md-menu-item>
+        <md-menu-item>My Item 3</md-menu-item>
+      </md-menu-content>
+    </md-menu>
+
+    <md-menu md-size="medium">
+      <md-button md-menu-trigger>Medium</md-button>
+
+      <md-menu-content>
+        <md-menu-item>My Item 1</md-menu-item>
+        <md-menu-item>My Item 2</md-menu-item>
+        <md-menu-item>My Item 3</md-menu-item>
+      </md-menu-content>
+    </md-menu>
+
+    <md-menu md-size="big">
+      <md-button md-menu-trigger>Big</md-button>
+
+      <md-menu-content>
+        <md-menu-item>My Item 1</md-menu-item>
+        <md-menu-item>My Item 2</md-menu-item>
+        <md-menu-item>My Item 3</md-menu-item>
+      </md-menu-content>
+    </md-menu>
+
+    <md-menu md-size="huge">
+      <md-button md-menu-trigger>Huge</md-button>
+
+      <md-menu-content>
+        <md-menu-item>My Item 1</md-menu-item>
+        <md-menu-item>My Item 2</md-menu-item>
+        <md-menu-item>My Item 3</md-menu-item>
+      </md-menu-content>
+    </md-menu>
+
+    <md-menu md-size="auto">
+      <md-button md-menu-trigger>Auto</md-button>
+
+      <md-menu-content>
+        <md-menu-item>My Item 1</md-menu-item>
+        <md-menu-item>This content is long enough</md-menu-item>
+        <md-menu-item>My Item 3</md-menu-item>
+      </md-menu-content>
+    </md-menu>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Sizes'
+  }
+</script>
+
+<style lang="scss" scoped>
+  .md-menu {
+    margin: 24px;
+  }
+</style>
+
diff --git a/docs/app/routes.js b/docs/app/routes.js
index 4c4b0b70b..a8c58f016 100644
--- a/docs/app/routes.js
+++ b/docs/app/routes.js
@@ -4,6 +4,11 @@ import VueRouter from 'vue-router'
 Vue.use(VueRouter)
 
 export const routes = [
+  {
+    path: '/components/menu',
+    name: 'components/menu',
+    component: () => import(/* webpackChunkName: "menu" */ './pages/Components/Menu/Menu.vue')
+  },
   {
     path: '/components/tooltip',
     name: 'components/tooltip',
diff --git a/docs/app/template/MainNavContent.vue b/docs/app/template/MainNavContent.vue
index feeb7a45f..8245bf11e 100644
--- a/docs/app/template/MainNavContent.vue
+++ b/docs/app/template/MainNavContent.vue
@@ -28,6 +28,7 @@
 
       <router-link to="/components/icon">{{ $t('pages.icon.title') }}</router-link>
       <router-link to="/components/list">{{ $t('pages.list.title') }}</router-link>
+      <router-link to="/components/menu">{{ $t('pages.menu.title') }}</router-link>
       <router-link to="/components/snackbar">{{ $t('pages.snackbar.title') }}</router-link>
       <router-link to="/components/speed-dial">{{ $t('pages.speedDial.title') }}</router-link>
       <router-link to="/components/subheader">{{ $t('pages.subheader.title') }}</router-link>
diff --git a/src/components/MdList/MdListItem/MdListItem.vue b/src/components/MdList/MdListItem/MdListItem.vue
index daab929c9..dd19fd14d 100644
--- a/src/components/MdList/MdListItem/MdListItem.vue
+++ b/src/components/MdList/MdListItem/MdListItem.vue
@@ -1,4 +1,5 @@
 <script>
+  import MdInteractionEvents from 'core/utils/MdInteractionEvents'
   import MdRouterLinkProps from 'core/utils/MdRouterLinkProps'
   import MdListItemDefault from './MdListItemDefault'
   import MdListItemButton from './MdListItemButton'
@@ -28,13 +29,6 @@
       MdButton
     },
     render (createElement, { parent, props, listeners, data, slots }) {
-      const interactionEvents = [
-        'click',
-        'contextmenu',
-        'dblclick',
-        'mousedown',
-        'mouseup'
-      ]
       let children = slots()
       let listComponent = MdListItemDefault
       let staticClass = 'md-list-item'
@@ -53,7 +47,7 @@
         let listenerNames = Object.keys(listeners)
 
         listenerNames.forEach(listener => {
-          if (interactionEvents.includes(listener)) {
+          if (MdInteractionEvents.includes(listener)) {
             listComponent = MdListItemButton
           }
         })
@@ -173,6 +167,10 @@
       margin-right: 32px;
     }
 
+    > .md-icon:last-child {
+      margin-left: 16px;
+    }
+
     > .md-checkbox,
     > .md-radio {
       margin: 0;
diff --git a/src/components/MdList/theme.scss b/src/components/MdList/theme.scss
index c35649208..be8b404c6 100644
--- a/src/components/MdList/theme.scss
+++ b/src/components/MdList/theme.scss
@@ -13,7 +13,7 @@
     .md-list-item-container {
       @include md-theme-property(color, text-primary, background);
 
-      &:not(.md-list-item-default):active {
+      &:not(.md-list-item-default):hover {
         @include md-theme-property(background-color, divider, background);
       }
     }
diff --git a/src/components/MdMenu/MdMenu.test.js b/src/components/MdMenu/MdMenu.test.js
new file mode 100644
index 000000000..63a586605
--- /dev/null
+++ b/src/components/MdMenu/MdMenu.test.js
@@ -0,0 +1,9 @@
+import mountTemplate from 'test/utils/mountTemplate'
+import MdMenu from './MdMenu.vue'
+
+test('should render the menu', async () => {
+  const template = '<md-menu>Lorem ipsum</md-menu>'
+  const wrapper = await mountTemplate(MdMenu, template)
+
+  expect(wrapper.hasClass('md-menu')).toBe(true)
+})
diff --git a/src/components/MdMenu/MdMenu.vue b/src/components/MdMenu/MdMenu.vue
new file mode 100644
index 000000000..e16d83003
--- /dev/null
+++ b/src/components/MdMenu/MdMenu.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="md-menu">
+    <slot />
+  </div>
+</template>
+
+<script>
+  import MdPropValidator from 'core/utils/MdPropValidator'
+
+  export default {
+    name: 'MdMenu',
+    props: {
+      mdActive: Boolean,
+      mdAlignTrigger: Boolean,
+      mdOffsetX: Number,
+      mdOffsetY: Number,
+      mdDirection: {
+        type: String,
+        default: 'bottom-start',
+        ...MdPropValidator('md-direction', [
+          'top-end',
+          'top-start',
+          'bottom-end',
+          'bottom-start'
+        ])
+      },
+      mdCloseOnSelect: {
+        type: Boolean,
+        default: true
+      },
+      mdSize: {
+        type: String,
+        default: 'small',
+        ...MdPropValidator('md-size', [
+          'auto',
+          'small',
+          'medium',
+          'big',
+          'huge'
+        ])
+      }
+    },
+    data () {
+      return {
+        triggerEl: null,
+        MdMenu: {
+          active: this.mdActive,
+          direction: this.mdDirection,
+          size: this.mdSize,
+          alignTrigger: this.mdAlignTrigger,
+          offsetX: this.mdOffsetX,
+          offsetY: this.mdOffsetY,
+          closeOnSelect: this.mdCloseOnSelect,
+          eventObserver: null
+        }
+      }
+    },
+    provide () {
+      return {
+        MdMenu: this.MdMenu
+      }
+    },
+    computed: {
+      isActive () {
+        return this.MdMenu.active
+      }
+    },
+    watch: {
+      mdActive (isActive) {
+        this.MdMenu.active = isActive
+      },
+      mdDirection (direction) {
+        this.MdMenu.direction = direction
+      },
+      mdSize (size) {
+        this.MdMenu.size = size
+      },
+      mdAlignTrigger (aligned) {
+        this.MdMenu.alignTrigger = aligned
+      },
+      mdOffsetX (offset) {
+        this.MdMenu.offsetX = offset
+      },
+      mdOffsetY (offset) {
+        this.MdMenu.offsetY = offset
+      },
+      isActive (isActive) {
+        this.$emit('update:mdActive', isActive)
+      }
+    },
+    methods: {
+      toggleContent () {
+        this.MdMenu.active = !this.MdMenu.active
+      }
+    },
+    async mounted () {
+      await this.$nextTick()
+
+      this.triggerEl = this.$el.querySelector('[md-menu-trigger]')
+
+      if (this.triggerEl) {
+        this.triggerEl.addEventListener('click', this.toggleContent)
+      }
+    },
+    beforeDestroy () {
+      if (this.triggerEl) {
+        this.triggerEl.removeEventListener('click', this.toggle)
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  @import "~components/MdAnimation/variables";
+  @import "~components/MdLayout/mixins";
+
+  .md-menu {
+    display: inline-block;
+
+    > .md-button {
+      margin: 0;
+    }
+  }
+</style>
diff --git a/src/components/MdMenu/MdMenuContent.vue b/src/components/MdMenu/MdMenuContent.vue
new file mode 100644
index 000000000..8e46324f6
--- /dev/null
+++ b/src/components/MdMenu/MdMenuContent.vue
@@ -0,0 +1,216 @@
+<template>
+  <md-popover
+    class="md-menu-content"
+    :class="[menuClasses, $mdActiveTheme]"
+    md-tag="md-list"
+    md-transition-name="md-menu-content"
+    md-follow-el="original"
+    :md-settings="popperSettings"
+    :md-if="shouldRender">
+    <slot />
+  </md-popover>
+</template>
+
+<script>
+  import MdComponent from 'core/MdComponent'
+  import MdPropValidator from 'core/utils/MdPropValidator'
+  import MdObserveEvent from 'core/utils/MdObserveEvent'
+  import MdPopover from 'components/MdPopover/MdPopover'
+  import MdList from 'components/MdList/MdList'
+
+  export default new MdComponent({
+    name: 'MdMenuContent',
+    components: {
+      MdPopover,
+      MdList
+    },
+    inject: ['MdMenu'],
+    data: () => ({
+      targetEl: null
+    }),
+    computed: {
+      shouldRender () {
+        return this.MdMenu.active
+      },
+      menuClasses () {
+        const prefix = 'md-menu-content-'
+
+        return {
+          [prefix + this.MdMenu.direction]: true,
+          [prefix + this.MdMenu.size]: true
+        }
+      },
+      popperSettings () {
+        const { direction, alignTrigger } = this.MdMenu
+
+        if (this.targetEl) {
+          let { offsetX, offsetY }= this.getOffsets()
+
+          if (!this.hasCustomOffsets()) {
+            offsetY = -this.targetEl.offsetHeight - 12
+
+            if (direction.includes('start')) {
+              offsetX = -8
+            } else if (direction.includes('end')) {
+              offsetX = 8
+            }
+          }
+
+          return {
+            placement: direction,
+            modifiers: {
+              keepTogether: {
+                enabled: true
+              },
+              flip: {
+                enabled: false
+              },
+              offset: {
+                offset: `${offsetX}, ${offsetY}`
+              }
+            }
+          }
+        }
+
+        return {}
+      }
+    },
+    watch: {
+      async shouldRender (shouldRender) {
+        if (shouldRender) {
+          window.setTimeout(this.createClickEventObserver, 10)
+        }
+      }
+    },
+    methods: {
+      getOffsets () {
+        return {
+          offsetX: this.MdMenu.offsetX || 0,
+          offsetY: this.MdMenu.offsetY || 0
+        }
+      },
+      hasCustomOffsets () {
+        const { offsetX, offsetY, alignTrigger } = this.MdMenu
+
+        return alignTrigger || offsetX || offsetY
+      },
+      createClickEventObserver () {
+        this.MdMenu.eventObserver = new MdObserveEvent(document.body, 'click', $event => {
+          if (!this.$el.contains($event.target)) {
+            this.MdMenu.active = false
+            this.MdMenu.eventObserver.destroy()
+          }
+        })
+      }
+    },
+    async mounted () {
+      await this.$nextTick()
+
+      this.targetEl = this.$children[0].originalParentEl
+    },
+    beforeDestroy () {
+      if (this.MdMenu.eventObserver) {
+        this.MdMenu.eventObserver.destroy()
+      }
+    }
+  })
+</script>
+
+<style lang="scss">
+  @import "~components/MdAnimation/variables";
+  @import "~components/MdElevation/mixins";
+  @import "~components/MdLayout/mixins";
+
+  $md-menu-base-width: 56px;
+
+  .md-list.md-menu-content {
+    @include md-elevation(8);
+    min-width: $md-menu-base-width * 2;
+    max-width: $md-menu-base-width * 5;
+    max-height: 50vh;
+    position: fixed;
+    z-index: 60;
+    overflow: auto;
+    border-radius: 2px;
+    opacity: 0;
+    transition: transform 0s .3s,
+                opacity .3s $md-transition-stand-timing;
+    will-change: opacity, transform, top, left !important;
+    font-family: 'Roboto', sans-serif;
+    text-transform: none;
+    white-space: nowrap;
+
+    @include md-layout-small {
+      font-size: 14px;
+    }
+
+    > * {
+      opacity: 0;
+      transition: opacity .4s $md-transition-default-timing;
+      will-change: opacity;
+    }
+
+    &.md-menu-content-top-start {
+      transform-origin: bottom left;
+      transform: translate3d(0, 8px, 0) scaleX(.9) scaleY(.95);
+    }
+
+    &.md-menu-content-top-end {
+      transform-origin: bottom right;
+      transform: translate3d(0, 8px, 0) scaleX(.9) scaleY(.95);
+    }
+
+    &.md-menu-content-right-start {
+      transform-origin: left top;
+      transform: translate3d(0, -8px, 0) scaleX(.9) scaleY(.95);
+    }
+
+    &.md-menu-content-right-end {
+      transform-origin: left bottom;
+      transform: translate3d(0, 8px, 0) scaleX(.9) scaleY(.95);
+    }
+
+    &.md-menu-content-bottom-start {
+      transform-origin: top left;
+      transform: translate3d(0, -8px, 0) scaleX(.9) scaleY(.95);
+    }
+
+    &.md-menu-content-bottom-end {
+      transform-origin: top right;
+      transform: translate3d(0, -8px, 0) scaleX(.9) scaleY(.95);
+    }
+
+    &.md-menu-content-left-start {
+      transform-origin: right top;
+      transform: translate3d(0, -8px, 0) scaleX(.9) scaleY(.95);
+    }
+
+    &.md-menu-content-left-end {
+      transform-origin: right bottom;
+      transform: translate3d(0, 8px, 0) scaleX(.9) scaleY(.95);
+    }
+
+    &.md-menu-content-medium {
+      min-width: $md-menu-base-width * 3;
+    }
+
+    &.md-menu-content-big {
+      min-width: $md-menu-base-width * 4;
+    }
+
+    &.md-menu-content-huge {
+      min-width: $md-menu-base-width * 5;
+    }
+
+    &.md-active {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+      transition: transform .2s $md-transition-enter-timing,
+                  opacity .3s $md-transition-enter-timing;
+
+      > * {
+        opacity: 1;
+      }
+    }
+  }
+</style>
diff --git a/src/components/MdMenu/MdMenuItem.vue b/src/components/MdMenu/MdMenuItem.vue
new file mode 100644
index 000000000..04b6d9e38
--- /dev/null
+++ b/src/components/MdMenu/MdMenuItem.vue
@@ -0,0 +1,44 @@
+<template>
+  <md-list-item class="md-menu-item" v-on="listeners" v-bind="$attrs">
+    <slot />
+  </md-list-item>
+</template>
+
+<script>
+  import MdInteractionEvents from 'core/utils/MdInteractionEvents'
+  import MdListItem from 'components/MdList/MdListItem/MdListItem'
+
+  export default {
+    name: 'MdMenuItem',
+    inject: ['MdMenu'],
+    data: () => ({
+      listeners: {}
+    }),
+    created () {
+      if (this.MdMenu.closeOnSelect) {
+        let listenerNames = Object.keys(this.$listeners)
+        let hasInteraction = false
+
+        listenerNames.forEach(listener => {
+          if (MdInteractionEvents.includes(listener)) {
+            this.listeners[listener] = ($event) => {
+              this.$listeners[listener]($event)
+              this.MdMenu.active = false
+
+              if (this.MdMenu.eventObserver) {
+                this.MdMenu.eventObserver.destroy()
+              }
+            }
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  @import "~components/MdAnimation/variables";
+  @import "~components/MdLayout/mixins";
+
+
+</style>
diff --git a/src/components/MdMenu/index.js b/src/components/MdMenu/index.js
new file mode 100644
index 000000000..212d3e0ca
--- /dev/null
+++ b/src/components/MdMenu/index.js
@@ -0,0 +1,11 @@
+import init from 'vue-material/material'
+import MdMenu from './MdMenu'
+import MdMenuContent from './MdMenuContent'
+import MdMenuItem from './MdMenuItem'
+
+export default Vue => {
+  init(Vue)
+  Vue.component(MdMenu.name, MdMenu)
+  Vue.component(MdMenuContent.name, MdMenuContent)
+  Vue.component(MdMenuItem.name, MdMenuItem)
+}
diff --git a/src/components/MdMenu/theme.scss b/src/components/MdMenu/theme.scss
new file mode 100644
index 000000000..f933061f1
--- /dev/null
+++ b/src/components/MdMenu/theme.scss
@@ -0,0 +1,6 @@
+.md-menu-content {
+  @include md-theme-component() {
+    @include md-theme-property(background-color, background);
+    @include md-theme-property(color, text-primary, background);
+  }
+}
diff --git a/src/components/MdPopover/MdPopover.vue b/src/components/MdPopover/MdPopover.vue
index 4d9d36d63..1365a95a6 100644
--- a/src/components/MdPopover/MdPopover.vue
+++ b/src/components/MdPopover/MdPopover.vue
@@ -1,9 +1,3 @@
-<template>
-  <md-portal class="md-popover" v-bind="$attrs" :class="popoverClasses" :md-if="shouldRender" @md-original-parent="setOriginalParent" @md-destroy="killPopper">
-    <slot />
-  </md-portal>
-</template>
-
 <script>
   import Popper from 'popper.js'
   import deepmerge from 'deepmerge'
@@ -16,6 +10,10 @@
     },
     props: {
       mdIf: Boolean,
+      mdTag: {
+        type: String,
+        default: 'div'
+      },
       mdSettings: {
         type: Object,
         default: () => ({})
@@ -48,7 +46,7 @@
       },
       mdSettings (settings) {
         if (this.popperInstance) {
-          this.popperInstance.options = deepmerge(this.getPopperOptions(), settings)
+          this.popperInstance.options = deepmerge(this.popperInstance.options, settings)
           this.popperInstance.scheduleUpdate()
         }
       }
@@ -59,7 +57,7 @@
           placement: 'bottom',
           modifiers: {
             preventOverflow: {
-              padding: 8
+              padding: 16
             },
             computeStyle: {
               gpuAcceleration: false
@@ -67,6 +65,7 @@
           },
           onCreate: () => {
             this.shouldActivate = true
+            this.$emit('md-active')
           }
         }
       },
@@ -93,6 +92,22 @@
     },
     beforeDestroy () {
       this.killPopper()
+    },
+    render (createElement) {
+      return createElement('md-portal', {
+        staticClass: 'md-popover',
+        class: this.popoverClasses,
+        props: {
+          ...this.$attrs,
+          mdTag: this.mdTag,
+          mdIf: this.shouldRender
+        },
+        on: {
+          ...this.$listeners,
+          'md-original-parent': this.setOriginalParent,
+          'md-destroy': this.killPopper
+        }
+      }, [this.$slots.default])
     }
   }
 </script>
diff --git a/src/components/MdPortal/MdPortal.vue b/src/components/MdPortal/MdPortal.vue
index d61a22f8a..f1a37998c 100644
--- a/src/components/MdPortal/MdPortal.vue
+++ b/src/components/MdPortal/MdPortal.vue
@@ -1,11 +1,3 @@
-<template>
-  <transition :name="mdTransitionName" :appear="mdTransitionAppear">
-    <div :class="shouldRender" :style="shouldRender" v-if="shouldRender" v-on="$listeners">
-      <slot />
-    </div>
-  </transition>
-</template>
-
 <script>
   import Vue from 'vue'
 
@@ -26,6 +18,10 @@
         type: null,
         validator: value => validator('md-if', this, value === null || typeof value === 'boolean', 'You should pass a Boolean value')
       },
+      mdTag: {
+        type: String,
+        default: 'div'
+      },
       mdTransitionName: String,
       mdTransitionAppear: Boolean,
       mdTargetEl: {
@@ -138,6 +134,24 @@
       } else {
         this.killGhostElement()
       }
+    },
+    render (createElement) {
+      let portalElement = null
+
+      if (this.shouldRender) {
+        portalElement = createElement(this.mdTag, {
+          class: this.shouldRender,
+          style: this.shouldRender,
+          on: this.$listeners
+        }, [this.$slots.default])
+      }
+
+      return createElement('transition', {
+        props: {
+          name: this.mdTransitionName,
+          appear: this.mdTransitionAppear
+        }
+      }, [portalElement])
     }
   }
 </script>
diff --git a/src/components/index.js b/src/components/index.js
index 8bb395f9b..b1b2e511e 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -16,6 +16,7 @@ import MdIcon from './MdIcon'
 import MdImage from './MdImage'
 import MdLayout from './MdLayout'
 import MdList from './MdList'
+import MdMenu from './MdMenu'
 import MdRadio from './MdRadio'
 import MdRipple from './MdRipple'
 import MdSnackbar from './MdSnackbar'
@@ -45,6 +46,7 @@ export {
   MdImage,
   MdLayout,
   MdList,
+  MdMenu,
   MdRadio,
   MdRipple,
   MdSnackbar,
diff --git a/src/core/utils/MdInteractionEvents.js b/src/core/utils/MdInteractionEvents.js
new file mode 100644
index 000000000..65a5325d8
--- /dev/null
+++ b/src/core/utils/MdInteractionEvents.js
@@ -0,0 +1,6 @@
+export default [
+  'click',
+  'dblclick',
+  'mousedown',
+  'mouseup'
+]
diff --git a/src/core/utils/MdObserveEvent.js b/src/core/utils/MdObserveEvent.js
new file mode 100644
index 000000000..812d6af9b
--- /dev/null
+++ b/src/core/utils/MdObserveEvent.js
@@ -0,0 +1,11 @@
+export default (el, eventName, observerFn, options) => {
+  function killObserver () {
+    el.removeEventListener(eventName, observerFn)
+  }
+
+  el.addEventListener(eventName, observerFn, options || false)
+
+  return {
+    destroy: killObserver
+  }
+}
diff --git a/src/core/utils/MdPropValidator.js b/src/core/utils/MdPropValidator.js
index 57229247f..cf0297f56 100644
--- a/src/core/utils/MdPropValidator.js
+++ b/src/core/utils/MdPropValidator.js
@@ -1,4 +1,4 @@
-import { util } from 'vue'
+import Vue from 'vue'
 
 export default (name, options) => {
   return {
@@ -7,7 +7,7 @@ export default (name, options) => {
         return true
       }
 
-      util.warn(`The ${name} prop is invalid. Given value: ${value}. Available options: ${options.join(', ')}.`, this)
+      Vue.util.warn(`The ${name} prop is invalid. Given value: ${value}. Available options: ${options.join(', ')}.`, this)
 
       return false
     }
diff --git a/src/theme/all.scss b/src/theme/all.scss
index 3de2c5d8d..4470bde64 100644
--- a/src/theme/all.scss
+++ b/src/theme/all.scss
@@ -14,6 +14,7 @@
 @import "../components/MdIcon/theme";
 @import "../components/MdImage/theme";
 @import "../components/MdList/theme";
+@import "../components/MdMenu/theme";
 @import "../components/MdRadio/theme";
 @import "../components/MdSnackbar/theme";
 @import "../components/MdSpeedDial/theme";