diff --git a/example/pages/sidebar/index.js b/example/pages/sidebar/index.js
index 2cae4c79..5ba0e5d6 100644
--- a/example/pages/sidebar/index.js
+++ b/example/pages/sidebar/index.js
@@ -1,10 +1,11 @@
 import Page from '../../common/page';
+import Notify from '../../dist/notify/notify';
 
 Page({
   onChange(event) {
-    wx.showToast({
-      icon: 'none',
-      title: `切换至第${event.detail}项`
+    Notify({
+      type: 'primary',
+      message: `切换至第${event.detail}项`
     });
   }
 });
diff --git a/example/pages/sidebar/index.wxml b/example/pages/sidebar/index.wxml
index 6163abff..16852a19 100644
--- a/example/pages/sidebar/index.wxml
+++ b/example/pages/sidebar/index.wxml
@@ -1,28 +1,39 @@
-<demo-block title="基础用法">
-  <van-sidebar custom-class="custom-sidebar" bind:change="onChange">
-    <van-sidebar-item title="标签名称" />
-    <van-sidebar-item title="标签名称" />
-    <van-sidebar-item title="标签名称" />
-  </van-sidebar>
-</demo-block>
+<van-grid column-num="{{ 2 }}" border="{{ false }}">
+  <van-grid-item use-slot>
+    <h3 class="demo-sidebar-title">基础用法</h3>
+    <van-sidebar custom-class="custom-sidebar">
+      <van-sidebar-item title="标签名称" />
+      <van-sidebar-item title="标签名称" />
+      <van-sidebar-item title="标签名称" />
+    </van-sidebar>
+  </van-grid-item>
 
-<demo-block title="显示徽标">
-  <van-sidebar custom-class="custom-sidebar" bind:change="onChange">
-    <van-sidebar-item title="标签名称" dot />
-    <van-sidebar-item title="标签名称" info="5" />
-    <van-sidebar-item title="标签名称" info="99+" />
-  </van-sidebar>
-</demo-block>
+  <van-grid-item use-slot>
+    <h3 class="demo-sidebar-title">徽标提示</h3>
+    <van-sidebar custom-class="custom-sidebar">
+      <van-sidebar-item title="标签名称" dot />
+      <van-sidebar-item title="标签名称" info="5" />
+      <van-sidebar-item title="标签名称" info="99+" />
+    </van-sidebar>
+  </van-grid-item>
 
-<demo-block title="自定义标题" class="custom-sidebar-slot">
-  <van-sidebar custom-class="custom-sidebar"  bind:change="onChange">
-    <van-sidebar-item info="5">
-      <view slot="title">
-        <van-icon name="wap-home-o" />
-        标签名称
-      </view>
-    </van-sidebar-item>
-    <van-sidebar-item title="标签名称" info="5" />
-    <van-sidebar-item title="标签名称" info="99+" />
-  </van-sidebar>
-</demo-block>
+  <van-grid-item use-slot>
+    <h3 class="demo-sidebar-title">禁用选项</h3>
+    <van-sidebar custom-class="custom-sidebar">
+      <van-sidebar-item title="标签名称" />
+      <van-sidebar-item title="标签名称" disabled />
+      <van-sidebar-item title="标签名称" />
+    </van-sidebar>
+  </van-grid-item>
+
+  <van-grid-item use-slot>
+    <h3 class="demo-sidebar-title">监听切换事件</h3>
+    <van-sidebar custom-class="custom-sidebar" bind:change="onChange">
+      <van-sidebar-item title="标签名称1" />
+      <van-sidebar-item title="标签名称2" />
+      <van-sidebar-item title="标签名称3" />
+    </van-sidebar>
+  </van-grid-item>
+</van-grid>
+
+<van-notify id="van-notify" />
diff --git a/example/pages/sidebar/index.wxss b/example/pages/sidebar/index.wxss
index 909c88d2..5210c512 100644
--- a/example/pages/sidebar/index.wxss
+++ b/example/pages/sidebar/index.wxss
@@ -3,9 +3,16 @@ page {
 }
 
 .custom-sidebar {
-  margin-left: 15px;
+  margin-left: 16px;
 }
 
-.custom-sidebar-slot {
-  --sidebar-width: 100px;
+.demo-sidebar {
+  background-color: #fff;
+}
+
+.demo-sidebar-title {
+  margin-bottom: 16px;
+  color: #969799;
+  font-weight: normal;
+  font-size: 14px;
 }
diff --git a/packages/sidebar/README.md b/packages/sidebar/README.md
index 56385702..e10975d3 100644
--- a/packages/sidebar/README.md
+++ b/packages/sidebar/README.md
@@ -20,82 +20,116 @@
 通过在`van-sidebar`上设置`activeKey`属性来控制选中项
 
 ```html
-<van-sidebar active-key="{{ activeKey }}" bind:change="onChange">
+<van-sidebar active-key="{{ activeKey }}">
   <van-sidebar-item title="标签名称" />
   <van-sidebar-item title="标签名称" />
   <van-sidebar-item title="标签名称" />
 </van-sidebar>
 ```
 
-``` javascript
+```javascript
+Page({
+  data: {
+    activeKey: 0
+  }
+});
+```
+
+### 徽标提示
+
+设置`dot`属性后，会在右上角展示一个小红点。设置`dot`属性后，会在右上角展示相应的徽标
+
+```html
+<van-sidebar active-key="{{ activeKey }}">
+  <van-sidebar-item title="标签名称" dot />
+  <van-sidebar-item title="标签名称" dot="5" />
+  <van-sidebar-item title="标签名称" dot="99+" />
+</van-sidebar>
+```
+
+### 禁用选项
+
+通过`disabled`属性禁用选项
+
+```html
+<van-sidebar active-key="{{ activeKey }}">
+  <van-sidebar-item title="标签名称" />
+  <van-sidebar-item title="标签名称" disabled />
+  <van-sidebar-item title="标签名称" />
+</van-sidebar>
+```
+
+### 监听切换事件
+
+设置`change`方法来监听切换导航项时的事件
+
+```html
+<van-sidebar active-key="{{ activeKey }}" bind:change="onChange">
+  <van-sidebar-item title="标签名1" />
+  <van-sidebar-item title="标签名2" />
+  <van-sidebar-item title="标签名3" />
+</van-sidebar>
+
+<van-notify id="van-notify" />
+```
+
+```js
+import Notify from '@vant/weapp/dist/notify/notify';
+
 Page({
   data: {
     activeKey: 0
   },
 
   onChange(event) {
-    wx.showToast({
-      icon: 'none',
-      title: `切换至第${event.detail}项`
-    });
+    Notify({ type: 'primary', message: event.detail });
   }
 });
 ```
 
-### 提示信息
-
-设置`dot`属性后，会在右上角展示一个小红点。设置`info`属性后，会在右上角展示相应的徽标
-
-```html
-<van-sidebar active-key="{{ activeKey }}">
-  <van-sidebar-item title="标签名称" dot />
-  <van-sidebar-item title="标签名称" info="5" />
-  <van-sidebar-item title="标签名称" info="99+" />
-</van-sidebar>
-```
-
 ## API
 
 ### Sidebar Props
 
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|-----------|-----------|-----------|-------------|-------------|
-| activeKey | 选中项的索引 | *string \| number* | `0` | - |
+| 参数      | 说明         | 类型               | 默认值 | 版本 |
+| --------- | ------------ | ------------------ | ------ | ---- |
+| activeKey | 选中项的索引 | _string \| number_ | `0`    | -    |
 
 ### Sidebar Event
 
-| 事件名 | 说明 | 参数 |
-|------|------|------|
+| 事件名 | 说明           | 参数               |
+| ------ | -------------- | ------------------ |
 | change | 切换徽章时触发 | 当前选中徽章的索引 |
 
 ### Sidebar 外部样式类
 
-| 类名 | 说明 |
-|-----------|-----------|
+| 类名         | 说明         |
+| ------------ | ------------ |
 | custom-class | 根节点样式类 |
 
 ### SidebarItem Props
 
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|-----------|-----------|-----------|-------------|-------------|
-| title | 内容 | *string* | `''` | - |
-| dot | 是否显示右上角小红点 | *boolean* | `false` | - |
-| info | 提示消息 | *string \| number* | `''` | - |
+| 参数     | 说明                 | 类型               | 默认值  |
+| -------- | -------------------- | ------------------ | ------- |
+| title    | 内容                 | _string_           | `''`    |
+| dot      | 是否显示右上角小红点 | _boolean_          | `false` |
+| info     | 提示消息             | _string \| number_ | `''`    |
+| disabled | 是否禁用该项         | _boolean_          | `false` |
 
 ### SidebarItem Slot
 
-| 名称 | 说明 |
-|-----------|-----------|
+| 名称  | 说明                                        |
+| ----- | ------------------------------------------- |
 | title | 自定义标题栏，如果设置了`title`属性则不生效 |
 
 ### SidebarItem Event
 
-| 事件名 | 说明 | 参数 |
-|------|------|------|
-| click | 点击徽章时触发 | 当前徽章的索引 |
+| 事件名 | 说明           | 参数                            |
+| ------ | -------------- | ------------------------------- |
+| click  | 点击徽章时触发 | `event.detail` 为当前徽章的索引 |
 
 ### SidebarItem 外部样式类
 
-| 类名 | 说明 |
-|-----------|-----------|
+| 类名         | 说明         |
+| ------------ | ------------ |
 | custom-class | 根节点样式类 |