diff --git a/packages/canvas/render/src/builtin/builtin.json b/packages/canvas/render/src/builtin/builtin.json
index b2a5d19221..aca588dd4c 100644
--- a/packages/canvas/render/src/builtin/builtin.json
+++ b/packages/canvas/render/src/builtin/builtin.json
@@ -109,7 +109,9 @@
                       "props": {
                         "language": "json",
                         "tips": {
-                          "title": { "zh_CN": "提示：数据为数组类型" },
+                          "title": {
+                            "zh_CN": "提示：数据为数组类型"
+                          },
                           "demo": {
                             "zh_CN": "示例：\n[\n  {\n    \"name\": \"text\",\n    \"value\": {\n      \"type\": \"JSExpression\",\n      \"value\": \"this.state.greetingMessage\"\n    }\n  },\n  {\n    \"name\": \"count\",\n    \"value\": 1\n  }\n]"
                           }
@@ -641,6 +643,212 @@
                 ]
               }
             },
+            {
+              "name": {
+                "zh_CN": "导航条"
+              },
+              "snippetName": "Navigation",
+              "icon": "navigation",
+              "schema": {
+                "componentName": "div",
+                "props": {
+                  "style": "text-align: center; padding: 8px 12px; box-shadow: 0 0 4px #0003;"
+                },
+                "children": [
+                  {
+                    "componentName": "RouterLink",
+                    "props": {
+                      "to": "",
+                      "style": "display: inline-flex; gap: 8px; padding: 10px 20px;"
+                    },
+                    "children": [
+                      {
+                        "componentName": "Icon",
+                        "props": {
+                          "name": "IconPublicHome",
+                          "style": "margin-top: 3px;"
+                        }
+                      },
+                      {
+                        "componentName": "Text",
+                        "props": {
+                          "text": "首页"
+                        }
+                      }
+                    ]
+                  },
+                  {
+                    "componentName": "RouterLink",
+                    "props": {
+                      "to": "",
+                      "style": "display: inline-flex; gap: 8px; padding: 10px 20px;"
+                    },
+                    "children": [
+                      {
+                        "componentName": "Icon",
+                        "props": {
+                          "name": "IconTaskCooperation",
+                          "style": "margin-top: 3px;"
+                        }
+                      },
+                      {
+                        "componentName": "Text",
+                        "props": {
+                          "text": "介绍"
+                        }
+                      }
+                    ]
+                  },
+                  {
+                    "componentName": "RouterLink",
+                    "props": {
+                      "to": "",
+                      "style": "display: inline-flex; gap: 8px; padding: 10px 20px;"
+                    },
+                    "children": [
+                      {
+                        "componentName": "Icon",
+                        "props": {
+                          "name": "IconText",
+                          "style": "margin-top: 3px;"
+                        }
+                      },
+                      {
+                        "componentName": "Text",
+                        "props": {
+                          "text": "文档"
+                        }
+                      }
+                    ]
+                  }
+                ]
+              }
+            },
+            {
+              "name": {
+                "zh_CN": "纵向导航"
+              },
+              "snippetName": "NavigationV",
+              "icon": "NavigationV",
+              "schema": {
+                "componentName": "div",
+                "props": {
+                  "style": "padding: 8px 12px; border-right: 1px solid #0003;"
+                },
+                "children": [
+                  {
+                    "componentName": "RouterLink",
+                    "props": {
+                      "to": "",
+                      "style": "display: flex; gap: 8px; padding: 10px 20px;"
+                    },
+                    "children": [
+                      {
+                        "componentName": "Icon",
+                        "props": {
+                          "name": "IconPublicHome",
+                          "style": "margin-top: 3px;"
+                        }
+                      },
+                      {
+                        "componentName": "Text",
+                        "props": {
+                          "text": "首页"
+                        }
+                      }
+                    ]
+                  },
+                  {
+                    "componentName": "RouterLink",
+                    "props": {
+                      "to": "",
+                      "style": "display: flex; gap: 8px; padding: 10px 20px;"
+                    },
+                    "children": [
+                      {
+                        "componentName": "Icon",
+                        "props": {
+                          "name": "IconTaskCooperation",
+                          "style": "margin-top: 3px;"
+                        }
+                      },
+                      {
+                        "componentName": "Text",
+                        "props": {
+                          "text": "介绍"
+                        }
+                      }
+                    ]
+                  },
+                  {
+                    "componentName": "RouterLink",
+                    "props": {
+                      "to": "",
+                      "style": "display: flex; gap: 8px; padding: 10px 20px;"
+                    },
+                    "children": [
+                      {
+                        "componentName": "Icon",
+                        "props": {
+                          "name": "IconText",
+                          "style": "margin-top: 3px;"
+                        }
+                      },
+                      {
+                        "componentName": "Text",
+                        "props": {
+                          "text": "文档"
+                        }
+                      }
+                    ]
+                  },
+                  {
+                    "componentName": "RouterLink",
+                    "props": {
+                      "to": "",
+                      "style": "display: flex; gap: 8px; padding: 10px 20px;"
+                    },
+                    "children": [
+                      {
+                        "componentName": "Icon",
+                        "props": {
+                          "name": "IconText",
+                          "style": "margin-top: 3px;"
+                        }
+                      },
+                      {
+                        "componentName": "Text",
+                        "props": {
+                          "text": "文档"
+                        }
+                      }
+                    ]
+                  },
+                  {
+                    "componentName": "RouterLink",
+                    "props": {
+                      "to": "",
+                      "style": "display: flex; gap: 8px; padding: 10px 20px;"
+                    },
+                    "children": [
+                      {
+                        "componentName": "Icon",
+                        "props": {
+                          "name": "IconText",
+                          "style": "margin-top: 3px;"
+                        }
+                      },
+                      {
+                        "componentName": "Text",
+                        "props": {
+                          "text": "文档"
+                        }
+                      }
+                    ]
+                  }
+                ]
+              }
+            },
             {
               "name": {
                 "zh_CN": "数据源容器"
diff --git a/packages/design-core/assets/navigation.svg b/packages/design-core/assets/navigation.svg
new file mode 100644
index 0000000000..ef1290d39a
--- /dev/null
+++ b/packages/design-core/assets/navigation.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+    .st0{fill:currentcolor;}
+    .st1{fill:none;stroke:currentcolor;stroke-width:4;stroke-linejoin:round;stroke-miterlimit:10;}
+    .st2{fill:none;stroke:currentcolor;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;}
+</style>
+<g id="Clip-30">
+</g>
+<g id="Clip-30_00000082359790372202237170000007339004850009255582_">
+</g>
+<rect x="6.2" y="11.6" class="st1" width="50.5" height="12"/>
+<line class="st2" x1="4.9" y1="22.4" x2="55.5" y2="22.4"/>
+<line class="st2" x1="23" y1="13.2" x2="23" y2="21.8"/>
+<line class="st2" x1="39.9" y1="13.2" x2="39.9" y2="21.8"/>
+</svg>
\ No newline at end of file
diff --git a/packages/design-core/assets/navigationv.svg b/packages/design-core/assets/navigationv.svg
new file mode 100644
index 0000000000..957aa31ac5
--- /dev/null
+++ b/packages/design-core/assets/navigationv.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+    .st0{fill:currentcolor;}
+    .st1{fill:none;stroke:currentcolor;stroke-width:4;stroke-linejoin:round;stroke-miterlimit:10;}
+    .st2{fill:none;stroke:currentcolor;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;}
+</style>
+<g id="Clip-30">
+</g>
+<g id="Clip-30_00000082359790372202237170000007339004850009255582_">
+</g>
+<rect x="6.2" y="11.6" class="st1" width="13.5" height="39.9"/>
+<line class="st2" x1="4.9" y1="24.4" x2="19.5" y2="24.4"/>
+<line class="st2" x1="4.9" y1="38.4" x2="19.5" y2="38.4"/>
+</svg>
\ No newline at end of file
diff --git a/packages/design-core/assets/routerlink.svg b/packages/design-core/assets/routerlink.svg
new file mode 100644
index 0000000000..ab4cde8bab
--- /dev/null
+++ b/packages/design-core/assets/routerlink.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+    .st0{fill:none;stroke:currentcolor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+    .st1{fill:none;stroke:currentcolor;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;}
+    .st2{fill:none;stroke:currentcolor;stroke-width:3;stroke-miterlimit:10;}
+    .st3{fill:none;stroke:currentcolor;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
+</style>
+<g id="Clip-30">
+</g>
+<g id="Clip-30_00000082359790372202237170000007339004850009255582_">
+</g>
+<desc>Created with Pixso.</desc>
+<desc>Created with Pixso.</desc>
+<polyline class="st0" points="30.6,54.7 12.8,54.7 12.8,10.4 51.8,10.4 51.8,32 "/>
+<line class="st1" x1="18.6" y1="23.1" x2="44.9" y2="23.1"/>
+<line class="st1" x1="18.6" y1="32.1" x2="35.1" y2="32.1"/>
+<g>
+    <path class="st2" d="M46.9,51.1L44,54c-1.9,1.9-4.9,1.9-6.7,0l0,0c-1.9-1.9-1.9-4.9,0-6.7l2.9-2.9"/>
+    <path class="st2" d="M48.8,49.2l2.9-2.9c1.9-1.9,1.9-4.9,0-6.7l0,0c-1.9-1.9-4.9-1.9-6.7,0l-2.9,2.9"/>
+    <line class="st3" x1="47.7" y1="43.6" x2="42.1" y2="49.2"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/packages/design-core/assets/routerview.svg b/packages/design-core/assets/routerview.svg
new file mode 100644
index 0000000000..aa830c9dd0
--- /dev/null
+++ b/packages/design-core/assets/routerview.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+    .st0{fill:currentcolor;}
+    .st1{fill:none;stroke:currentcolor;stroke-width:4;stroke-linejoin:round;stroke-miterlimit:10;}
+    .st2{fill:none;stroke:currentcolor;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;}
+</style>
+<g id="Clip-30">
+</g>
+<g id="Clip-30_00000082359790372202237170000007339004850009255582_">
+</g>
+<desc>Created with Pixso.</desc>
+<desc>Created with Pixso.</desc>
+<g>
+    <path class="st0" d="M13.8,32.1h3.1v1.5c0.6-0.6,1.1-1.3,1.4-2.1l1.3,0.2c-0.1,0.3-0.3,0.5-0.4,0.8h2.7v1c-0.3,0.7-0.7,1.3-1.3,1.7
+        c0.5,0.2,1,0.3,1.7,0.4c-0.1,0.3-0.2,0.7-0.3,1.2c-0.9-0.2-1.7-0.5-2.4-0.8c-0.7,0.4-1.5,0.6-2.4,0.8c-0.1-0.4-0.3-0.7-0.5-1
+        c0.7-0.1,1.3-0.3,1.9-0.5c-0.3-0.3-0.5-0.5-0.7-0.9c-0.1,0.1-0.3,0.3-0.4,0.4c-0.1-0.1-0.2-0.3-0.4-0.6v1.1h-0.8v1.1H17v1h-0.7v1.3
+        l1-0.1c0,0.2,0,0.6,0,1.2l-3.7,0.5L13.3,39h0.3v-3.1h0.9v3l0.5-0.1v-3.6h-1.2V32.1z M14.9,34.2h0.9v-0.9h-0.9V34.2z M17.5,40.5
+        v-3.7h4.2v3.7h-1.1V40h-2v0.5H17.5z M19.5,34.6c0.4-0.3,0.8-0.7,1-1.1h-2C18.8,34,19.1,34.3,19.5,34.6z M20.5,37.9h-2v1h2V37.9z"/>
+    <path class="st0" d="M23.1,40.4V33h3.2v-1.4h1.4V33h3.2v7.4h-1.3v-0.6h-5.1v0.6H23.1z M24.5,35.8h1.9v-1.6h-1.9V35.8z M24.5,38.6
+        h1.9V37h-1.9V38.6z M29.6,34.2h-1.9v1.6h1.9V34.2z M27.7,38.6h1.9V37h-1.9V38.6z"/>
+    <path class="st0" d="M35.2,37.6V37l-0.6,0.7c-0.2-0.3-0.5-0.5-0.7-0.7v3.6h-1.1v-3.1c-0.2,0.3-0.5,0.5-0.7,0.8
+        c-0.1-0.5-0.2-0.9-0.4-1.4c0.8-0.8,1.3-1.5,1.6-2.2h-1.5v-1.2h1.5c-0.3-0.4-0.6-0.8-1-1.3l1-0.6c0.3,0.3,0.7,0.8,1.1,1.3l-0.9,0.6
+        h1.3v1c-0.2,0.4-0.4,0.8-0.6,1.2c0.4,0.3,0.7,0.6,1.1,0.9V32h4.9v5.6H39v-4.4h-2.5v4.5L35.2,37.6L35.2,37.6z M39.6,37.9
+        c0.5,0.2,0.9,0.4,1.2,0.5c-0.1,1-0.3,1.6-0.5,1.8s-0.4,0.2-0.7,0.2h-0.9c-0.7,0-1.1-0.3-1.1-1v-1.1c-0.5,0.9-1.3,1.7-2.4,2.2
+        c-0.2-0.3-0.5-0.6-0.9-1c1.1-0.5,1.8-1.1,2.2-1.8s0.6-2.1,0.6-4.1h1.3c0,1.3-0.1,2.4-0.3,3.2h0.7V39c0,0.2,0.1,0.4,0.3,0.4h0.1
+        c0.1,0,0.2-0.1,0.3-0.2C39.5,39,39.5,38.6,39.6,37.9z"/>
+    <path class="st0" d="M41.4,40.5V32h8.2v8.5h-1.2v-0.4h-5.7v0.4H41.4z M44.4,33.1h-1.7v1.6C43.5,34.1,44,33.6,44.4,33.1z M43.3,35.3
+        c-0.2-0.2-0.4-0.4-0.6-0.6v1.1c0.7-0.1,1.3-0.3,1.8-0.4c-0.2-0.2-0.4-0.3-0.6-0.5C43.7,35,43.5,35.2,43.3,35.3z M43.3,37.4
+        c1.6,0.2,3.1,0.4,4.5,0.7l-0.3,1h0.8v-3.2c-0.1,0.2-0.3,0.5-0.5,0.8c-0.9-0.2-1.7-0.4-2.3-0.7c-0.3,0.1-0.7,0.3-1.1,0.4
+        c1,0.1,2,0.3,2.9,0.4l-0.2,0.9c-1-0.2-2.1-0.3-3.3-0.5l0.1-0.7c-0.3,0.1-0.6,0.1-0.9,0.2c-0.1-0.3-0.3-0.5-0.4-0.8v3.2h4.8
+        c-1.2-0.2-2.7-0.5-4.4-0.7L43.3,37.4z M45.6,35c0.4-0.2,0.8-0.4,1-0.7h-1.9C44.9,34.6,45.2,34.8,45.6,35z M48,33.5v0.7
+        c-0.3,0.4-0.7,0.8-1.3,1.1c0.5,0.1,1,0.2,1.7,0.3v-2.7h-2.7c-0.1,0.2-0.2,0.3-0.4,0.5H48V33.5z"/>
+</g>
+<rect x="6.2" y="11.6" class="st1" width="50.5" height="39.9"/>
+<line class="st2" x1="4.9" y1="22.4" x2="55.5" y2="22.4"/>
+<line class="st2" x1="23" y1="13.2" x2="23" y2="21.8"/>
+<line class="st2" x1="39.9" y1="13.2" x2="39.9" y2="21.8"/>
+</svg>
\ No newline at end of file