vuejs · yyx990803 · Apr 16, 2018 · Apr 14, 2018 · Apr 14, 2018 · Apr 14, 2018
diff --git a/README.md b/README.md
@@ -28,7 +28,6 @@ https://vuepress.vuejs.org/
 
 VuePress is still a work in progress. There are a few things that it currently does not support but are planned:
 
-- Dropdown Items in Navbar
 - Multi-Language Support
 - Algolia DocSearch Integration
 - Blogging support

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -25,6 +25,100 @@ module.exports = {
       {
         text: 'Default Theme Config',
         link: '/default-theme-config/'
+      },
+      {
+        text: 'Links',
+        items: [
+          {
+            text: 'Vue',
+            link: 'https://vuejs.org/',
+          },
+          {
+            text: 'Vue-Router',
+            link: 'https://router.vuejs.org/en/',
+          },
+          {
+            text: 'Vue-CLI',
+            link: 'https://github.com/vuejs/vue-cli/blob/dev/docs/README.md',
+          },
+          {
+            text: 'Vue-Press',
+            link: '/',
+          },
+        ]
+      },
+      {
+        text: 'Ecosystem',
+        items: [
+          {
+            text: 'Help',
+            items: [
+              {
+                text: 'Forum',
+                link: 'https://forum.vuejs.org/'
+              },
+              {
+                text: 'Chat',
+                link: 'https://chat.vuejs.org/'
+              }
+            ]
+          },
+          {
+            text: 'Tooling',
+            items: [
+              {
+                text: 'Devtools',
+                link: 'https://github.com/vuejs/vue-devtools'
+              },
+              {
+                text: 'Webpack Template',
+                link: 'https://vuejs-templates.github.io/webpack'
+              },
+              {
+                text: 'Vue Loader',
+                link: 'https://vue-loader.vuejs.org'
+              }
+            ]
+          },
+          {
+            text: 'News',
+            items: [
+              {
+                text: 'Weekly News',
+                link: 'https://news.vuejs.org'
+              },
+              {
+                text: 'Roadmap',
+                link: 'https://github.com/vuejs/roadmap'
+              },
+              {
+                text: 'Twitter',
+                link: 'https://twitter.com/vuejs'
+              },
+              {
+                text: 'Blog',
+                link: 'https://medium.com/the-vue-point'
+              },
+              {
+                text: 'Jobs',
+                link: 'https://vuejobs.com/?ref=vuejs'
+              }
+            ]
+          },
+          {
+            text: 'Resource Lists',
+            items: [
+              {
+                text: 'Vue Curated',
+                link: 'https://curated.vuejs.org/'
+              },
+              {
+                text: 'Awesome Vue',
+                link: 'https://github.com/vuejs/awesome-vue'
+              }
+            ]
+          }
+        ]
       }
     ],
     sidebar: {

diff --git a/docs/default-theme-config/README.md b/docs/default-theme-config/README.md
@@ -50,6 +50,24 @@ module.exports = {
 }
 ```
 
+Those links can also be dropdown menus, add nested items via `items`:
+
+```js
+module.exports = {
+  themeConfig: {
+    nav: [
+      {
+        text: 'Languages', 
+        items: [
+          { text: 'Chinese', link: '/language/chinese' },
+          { text: 'Japanese', link: '/language/japanese' }
+        ]
+      }
+    ]
+  }
+}
+```
+
 ## Sidebar
 
 To enable the sidebar, use `themeConfig.sidebar`. The basic configuration expects an Array of links:

diff --git a/docs/guide/README.md b/docs/guide/README.md
@@ -30,7 +30,6 @@ Each markdown file is compiled into HTML with [markdown-it](https://github.com/m
 
 VuePress is still a work in progress. There are a few things that it currently does not support but are planned:
 
-- Dropdown Items in Navbar
 - Multi-Language Support
 - Algolia DocSearch Integration
 - Blogging support

diff --git a/lib/default-theme/NavLink.vue b/lib/default-theme/NavLink.vue
@@ -0,0 +1,34 @@
+<template>
+  <router-link
+    class="router-link"
+    :to="link"
+    v-if="!isExternal(link)"
+    :exact="link === '/'"
+  >{{ item.text }}</router-link>
+  <a
+    v-else
+    :href="link"
+    target="_blank"
+    class="router-link"
+    rel="noopener noreferrer"
+  >{{ item.text }}</a>
+</template>
+
+<script>
+  import { isExternal, ensureExt } from './util'
+  export default {
+    props: {
+      item: {
+        required: true
+      }
+    },
+    computed: {
+      link() {
+        return ensureExt(this.item.link)
+      }
+    },
+    methods: {
+      isExternal
+    }
+  }
+</script>
diff --git a/lib/default-theme/NavLinks.vue b/lib/default-theme/NavLinks.vue
@@ -1,21 +1,35 @@
 <template>
   <nav class="nav-links" v-if="userLinks.length || githubLink">
     <!-- user links -->
-    <template v-for="item in userLinks">
-      <a v-if="item.isOutbound"
-        :href="item.link"
-        target="_blank"
-        rel="noopener noreferrer">
-        {{ item.text }}
-      </a>
-      <router-link
-        v-else
-        :to="item.link"
-        :key="item.link"
-        :exact="item.link === '/'">
-        {{ item.text }}
-      </router-link>
-    </template>
+    <div
+      class="nav-item"
+      v-for="item in userLinks"
+      :key="item.link">
+      <div
+        v-if="item.type === 'links'"
+        class="dropdown-wrapper">
+        <span class="dropdown-title">{{ item.text }}</span>
+        <span class="arrow"></span>
+        <ul class="nav-dropdown">
+          <li
+            class="dropdown-item"
+            v-for="subItem in item.items"
+            :key="subItem.link">
+            <h4 v-if="subItem.type === 'links'">{{ subItem.text }}</h4>
+            <ul class="dropdown-subitem-wrapper" v-if="subItem.type === 'links'">
+              <li
+                class="dropdown-subitem"
+                v-for="childSubItem in subItem.items"
+                :key="childSubItem.link">
+                <nav-link :item="childSubItem"></nav-link>
+              </li>
+            </ul>
+            <nav-link v-else :item="subItem"></nav-link>
+          </li>
+        </ul>
+      </div>
+      <nav-link v-else :item="item"></nav-link>
+    </div>
     <!-- github link -->
     <a v-if="githubLink"
       :href="githubLink"
@@ -30,16 +44,17 @@
 
 <script>
 import OutboundLink from './OutboundLink.vue'
-import { isActive, ensureExt, outboundRE } from './util'
+import { isActive, resolveNavLinkItem } from './util'
+import NavLink from './NavLink.vue'
 
 export default {
-  components: { OutboundLink },
+  components: { OutboundLink, NavLink },
   computed: {
     userLinks () {
-      return (this.$site.themeConfig.nav || []).map(item => ({
-        text: item.text,
-        link: ensureExt(item.link),
-        isOutbound: outboundRE.test(item.link)
+      return (this.$site.themeConfig.nav || []).map((link => {
+        return Object.assign(resolveNavLinkItem(link), {
+          items: (link.items || []).map(resolveNavLinkItem)
+        })
       }))
     },
     githubLink () {
@@ -63,21 +78,98 @@ export default {
 .nav-links
   display inline-block
   a
-    color inherit
-    font-weight 500
     line-height 1.25rem
-    margin-left 1.5rem
+    color inherit
     &:hover, &.router-link-active
       color $accentColor
+  .nav-item
+    position relative
+    display inline-block
+    margin-left 1.5rem
+    font-weight 500
+    line-height 2rem
+    .dropdown-wrapper
+      &:hover .nav-dropdown
+          display block
+      .arrow
+        display inline-block
+        vertical-align middle
+        margin-top -1px
+        margin-left 6px
+        width 0
+        height 0
+        border-left 4px solid transparent
+        border-right 4px solid transparent
+        border-top 5px solid #ccc
+      .nav-dropdown
+        .dropdown-item
+          color inherit
+          line-height 1.7rem
+          h4
+            margin 0.45rem 0 0
+            border-top 1px solid #eee
+            padding 0.45rem 1.5rem 0 1.25rem
+          .dropdown-subitem-wrapper
+            padding 0
+            list-style none
+            .dropdown-subitem
+              font-size 0.9em
+          a
+            display block
+            height 1.7rem
+            line-height 1.7rem
+            position relative
+            border-bottom none
+            font-weight 400
+            margin-bottom 0
+            padding 0 1.5rem 0 1.25rem
+            &:hover
+              color $accentColor
+            &.router-link-active
+              color $accentColor
+              &::after
+                content ""
+                width 0
+                height 0
+                border-left 5px solid $accentColor
+                border-top 4px solid transparent
+                border-bottom 4px solid transparent
+                position absolute
+                top calc(50% - 3px)
+                left 10px
+          &:first-child h4
+            margin-top 0
+            padding-top 0
+            border-top 0
+  .github-link
+    margin-left 1.5rem
 
 @media (max-width: $MQMobile)
-  .nav-links a
-    margin-left 0
+  .nav-links
+    .nav-item, .github-link
+      margin-left 0
 
 @media (min-width: $MQMobile)
-  .nav-links a
-    &:hover, &.router-link-active
-      color $textColor
-      margin-bottom -2px
-      border-bottom 2px solid lighten($accentColor, 5%)
+  .nav-links
+    a
+      &:hover, &.router-link-active
+        color $textColor
+        margin-bottom -2px
+        border-bottom 2px solid lighten($accentColor, 5%)
+    .nav-dropdown
+      display none
+      box-sizing border-box;
+      max-height calc(100vh - 2.7rem)
+      overflow-y auto
+      position absolute
+      top 100%
+      right 0
+      background-color #fff
+      padding 10px 0
+      border 1px solid #ddd
+      border-bottom-color #ccc
+      text-align left
+      border-radius 0.25rem
+      white-space nowrap
+      margin 0
 </style>
diff --git a/lib/default-theme/Sidebar.vue b/lib/default-theme/Sidebar.vue
@@ -81,11 +81,30 @@ function resolveOpenGroupIndex (route, items) {
     display none
     border-bottom 1px solid $borderColor
     padding 0.5rem 0 0.75rem 0
-    a
+    .nav-item, .github-link
       display block
+      line-height 1.25rem
       font-weight 600
       font-size 1.1em
       padding 0.5rem 0 0.5rem 1.5rem
+    .nav-item .dropdown-wrapper
+      .dropdown-title
+        display inline-block
+        margin-bottom 0.5rem
+      .nav-dropdown
+        .dropdown-item
+          h4
+            border-top 0
+            margin-top 0
+            padding-top 0
+          h4, & > a
+            font-size 15px
+            height 2rem
+            line-height 2rem
+          .dropdown-subitem
+            font-size 14px
+            padding-left 1rem
+
   .sidebar-links
     margin-top 1.5rem