diff --git a/components/affix/index.md b/components/affix/index.md
index 9c7a89f9ec..68068e53b9 100644
--- a/components/affix/index.md
+++ b/components/affix/index.md
@@ -2,6 +2,7 @@
 
 - category: Components
 - chinese: 固钉
+- type: 其它
 
 ---
 
diff --git a/components/queue-anim/index.md b/components/queue-anim/index.md
index 18911d2c3a..f2852196dc 100644
--- a/components/queue-anim/index.md
+++ b/components/queue-anim/index.md
@@ -2,6 +2,7 @@
 
 - category: Components
 - chinese: 进出场动画
+- type: 其它
 
 ---
 
diff --git a/components/spin/index.md b/components/spin/index.md
index c420475357..8097d51574 100644
--- a/components/spin/index.md
+++ b/components/spin/index.md
@@ -2,6 +2,7 @@
 
 - category: Components
 - chinese: 加载中
+- type: 其它
 
 ---
 
diff --git a/docs/practice/cases.md b/docs/practice/cases.md
index c0027f99bc..e7b857bb71 100644
--- a/docs/practice/cases.md
+++ b/docs/practice/cases.md
@@ -74,9 +74,6 @@ AntV 将数据图形小组近几年在探索数据可视化过程中取得的成
 .toc {
   display: none;
 }
-.outside-link.internal {
-  display: none;
-}
 </style>
 
 <script>
diff --git a/site/common/styles/common.less b/site/common/styles/common.less
index dd390f8eb3..3397b0e41b 100644
--- a/site/common/styles/common.less
+++ b/site/common/styles/common.less
@@ -29,4 +29,15 @@
   margin-left: 6px;
   font-weight: normal;
   opacity: .67;
+}
+
+.outside-link:after {
+  content: '\E669';
+  font-family: 'anticon';
+  margin-left: 5px;
+  font-size: 12px;
+}
+
+.outside-link.internal {
+  display: none;
 }
\ No newline at end of file
diff --git a/site/component/MainContent/index.jsx b/site/component/MainContent/index.jsx
index 6fd720a8f0..b99e816329 100644
--- a/site/component/MainContent/index.jsx
+++ b/site/component/MainContent/index.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router';
 import { Row, Col, Menu } from '../../../';
+import config from '../../website.config';
 const SubMenu = Menu.SubMenu;
 
 function dashed(name) {
@@ -39,13 +40,38 @@ export default class MainContent extends React.Component {
     );
   }
 
+  isNotTopLevel(level) {
+    return level !== 'topLevel';
+  }
+
+  generateSubMenuItems(obj) {
+    const topLevel = (obj.topLevel || []).map(this.generateMenuItem);
+    const itemGroups = Object.keys(obj).filter(this.isNotTopLevel)
+            .sort((a, b) => {
+              return config.typeOrder[a] - config.typeOrder[b];
+            })
+            .map((type, index) => {
+              const groupItems = obj[type].map(this.generateMenuItem);
+
+              return (
+                <Menu.ItemGroup title={type} key={index}>
+                  { groupItems }
+                </Menu.ItemGroup>
+              );
+            });
+    return [...topLevel, ...itemGroups];
+  }
+
   getMenuItems() {
     const props = this.props;
     const menuItems = props.menuItems;
-    const topLevel = menuItems.topLevel.map(this.generateMenuItem);
-    const subMenu = Object.keys(menuItems).filter((category) => category !== 'topLevel')
+    const topLevel = this.generateSubMenuItems(menuItems.topLevel);
+    const subMenu = Object.keys(menuItems).filter(this.isNotTopLevel)
+            .sort((a, b) => {
+              return config.categoryOrder[a] - config.categoryOrder[b];
+            })
             .map((category) => {
-              const subMenuItems = menuItems[category].map(this.generateMenuItem);
+              const subMenuItems = this.generateSubMenuItems(menuItems[category]);
 
               return (
                 <SubMenu title={<h4>{category}</h4>} key={category}>
diff --git a/site/component/utils.js b/site/component/utils.js
index 95d74a476e..accab7e6f2 100644
--- a/site/component/utils.js
+++ b/site/component/utils.js
@@ -7,6 +7,12 @@ function isHeading(type) {
   return /h[1-6]/i.test(type);
 }
 
+function mdLangToHljsLang(lang) {
+  return lang.toLowerCase() === 'jsx' ?
+    'javascript' :
+    lang;
+}
+
 export function objectToComponent(object, index) {
   if (object === null) return;
 
@@ -26,13 +32,26 @@ export function objectToComponent(object, index) {
 
   if (object.type === 'html') {
     return React.createElement('div', {
+      className: 'markdown',
       key: index,
       dangerouslySetInnerHTML: { __html: children }
     });
   }
 
+  if (isHeading(object.type)) {
+    return React.createElement(object.type, {
+      key: index,
+    }, [
+      object.children,
+      <a className="anchor" key="anchor">#</a>,
+    ]);
+  }
+
   if (object.type === 'code') {
-    const highlightedCode = hljs.highlight('javascript', children).value;
+    const highlightedCode = hljs.highlight(
+      mdLangToHljsLang(object.props.lang),
+      children
+    ).value;
     return (
       <div className="highlight" key={index}>
         <pre>
@@ -43,21 +62,13 @@ export function objectToComponent(object, index) {
     );
   }
 
-  if (isHeading(object.type)) {
-    return React.createElement(object.type, {
-      key: index,
-    }, [
-      object.children,
-      <a className="anchor" key="anchor">#</a>,
-    ]);
-  }
-
   if (typeof children === 'string') {
     return React.createElement(object.type, {
       key: index,
       dangerouslySetInnerHTML: { __html: children }
     });
   }
+
   return React.createElement(
     object.type, { key: index },
     children && children.map(objectToComponent) // `hr` has no children
diff --git a/site/entry/utils.js b/site/entry/utils.js
index b4394f243c..ef5c6694fd 100644
--- a/site/entry/utils.js
+++ b/site/entry/utils.js
@@ -19,10 +19,15 @@ function getMenuItems(data) {
   }).forEach((meta) => {
     const category = meta.category || 'topLevel';
     if (!menuItems[category]) {
-      menuItems[category] = [];
+      menuItems[category] = {};
     }
 
-    menuItems[category].push(meta);
+    const type = meta.type || 'topLevel';
+    if (!menuItems[category][type]) {
+      menuItems[category][type] = [];
+    }
+
+    menuItems[category][type].push(meta);
   });
 
   return menuItems;
@@ -56,7 +61,7 @@ export function generateChildren(data) {
         component={Wrapper} />
     );
   });
-  const firstChild = menuItems.topLevel.find((item) => {
+  const firstChild = menuItems.topLevel.topLevel.find((item) => {
     return item.disabled !== 'true';
   });
   children.unshift(
diff --git a/site/website.config.js b/site/website.config.js
new file mode 100644
index 0000000000..1259d86af4
--- /dev/null
+++ b/site/website.config.js
@@ -0,0 +1,15 @@
+export default {
+  categoryOrder: {
+    组件: 0,
+
+    基础: 0,
+    动画: 1,
+  },
+  typeOrder: {
+    基本: 0,
+    表单: 1,
+    展示: 2,
+    导航: 3,
+    其它: 4,
+  },
+};