diff --git a/docs/component/_sidebar.md b/docs/component/_sidebar.md
index 8d2e47eac2e48c322ec3e1138b63bef08fa9f548..121c0f78be86effa72e51cf64e00f9327ab1f0de 100644
--- a/docs/component/_sidebar.md
+++ b/docs/component/_sidebar.md
@@ -78,8 +78,10 @@
   * [SwiperDot 轮播图指示点](https://ext.dcloud.net.cn/plugin?id=284)
   * [Tag 标签](https://ext.dcloud.net.cn/plugin?id=35)
   * [更多插件市场的组件](https://ext.dcloud.net.cn/?cat1=2)
+* 导航栏
+  * [navigation-bar](component/page-meta.md)
 * 页面属性配置节点
-  * [page-meta](component/page-meta.md)
+  * [page-meta](component/navigation-bar.md)
 * [配置微信小程序插件](component/mp-weixin-plugin.md)
 * [原生组件说明](component/native-component.md)
 <div class="contact-box">
diff --git a/docs/component/navigation-bar.md b/docs/component/navigation-bar.md
new file mode 100644
index 0000000000000000000000000000000000000000..e84c960039fb4fe9141cb98915c842b04f106608
--- /dev/null
+++ b/docs/component/navigation-bar.md
@@ -0,0 +1,54 @@
+#### navigation-bar
+
+页面导航条配置节点，用于指定导航栏的一些属性。只能是 [page-meta](https://uniapp.dcloud.io/component/page-meta) 组件内的第一个节点，需要配合它一同使用。
+
+HBuilderX 2.6.3+ 支持
+
+|属性|类型|默认值|必填|说明|最低版本
+|:-|:-|:-|:-|:-|:-|
+|title|string||否|导航条标题|微信基础库 2.9.0|
+|loading|string|false|否|是否在导航条显示 loading 加载提示|微信基础库 2.9.0|
+|front-color|string||否|导航条前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000|微信基础库 2.9.0|
+|background-color|string||否|导航条背景颜色值，有效值为十六进制颜色|微信基础库 2.9.0|
+|color-animation-duration|number|0|否|改变导航栏颜色时的动画时长，默认为 0 （即没有动画效果）|微信基础库 2.9.0|
+|color-animation-timing-func|string|"linear"|否|改变导航栏颜色时的动画方式，支持 linear 、 easeIn 、 easeOut 和 easeInOut|微信基础库 2.9.0|
+
+**注意**
+- `<navigation-bar>` 会覆盖 page.json style 节点配置
+
+
+#### 示例代码
+
+```
+<template>
+  <page-meta>
+    <navigation-bar
+      :title="nbTitle"
+      :loading="nbLoading"
+      :front-color="nbFrontColor"
+      :background-color="nbBackgroundColor"
+      :color-animation-duration="2000"
+      color-animation-timing-func="easeIn"
+    />
+  </page-meta>
+  <view class="content">
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        nbTitle: '标题',
+        nbLoading: false,
+        nbFrontColor: '#000000',
+        nbBackgroundColor: '#ffffff'
+      }
+    },
+    onLoad() {
+    },
+    methods: {
+    }
+  }
+</script>
+```
diff --git a/docs/component/page-meta.md b/docs/component/page-meta.md
index fa7a6fe87d4f36c6b23f900f0be14d39c9760a10..624d736e79f6c33a3a8de06b1c13080961370b01 100644
--- a/docs/component/page-meta.md
+++ b/docs/component/page-meta.md
@@ -1,14 +1,10 @@
 #### page-meta
 
-**平台差异说明**
+页面属性配置节点，用于指定页面的一些属性、监听页面事件。只能是页面内的第一个节点。可以配合 [navigation-bar](https://uniapp.dcloud.io/component/navigation-bar) 组件一同使用。
 
-|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
-|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
-|√（2.6.3+）|√（2.6.3+）|√|x|x|x|x|
+HBuilderX 2.6.3+ 支持
 
 
-页面属性配置节点，用于指定页面的一些属性、监听页面事件。只能是页面内的第一个节点。可以配合 navigation-bar 组件一同使用。
-
 |属性|类型|默认值|必填|说明|最低版本
 |:-|:-|:-|:-|:-|:-|
 |background-text-style|string||否|下拉背景字体、loading 图的样式，仅支持 dark 和 light|微信基础库 2.9.0|
@@ -44,27 +40,29 @@
       :background-color="nbBackgroundColor"
     />
   </page-meta>
+  <view class="content">
+  </view>
 </template>
 
 <script>
-    export default {
-        data() {
-            return {
-                bgTextStyle: 'dark',
-                scrollTop: '200rpx',
-                bgColor: '#ff0000',
-                bgColorTop: '#00ff00',
-                bgColorBottom: '#0000ff',
-                nbTitle: '标题',
-                nbLoading: false,
-                nbFrontColor: '#000000',
-                nbBackgroundColor: '#ffffff'
-            }
-        },
-        onLoad() {
-        },
-        methods: {
-        }
+  export default {
+    data() {
+      return {
+        bgTextStyle: 'dark',
+        scrollTop: '200rpx',
+        bgColor: '#ff0000',
+        bgColorTop: '#00ff00',
+        bgColorBottom: '#0000ff',
+        nbTitle: '标题',
+        nbLoading: false,
+        nbFrontColor: '#000000',
+        nbBackgroundColor: '#ffffff'
+      }
+    },
+    onLoad() {
+    },
+    methods: {
     }
+  }
 </script>
 ```