# 页面组件：导航菜单

来源快照：`result_data_new_260518.json`

- 来源 ID：`1966139488879997478`
- 模块：低代码平台e-builder
- 目录：专题学习 - 功能点专题 - 页面图表
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

# 1\. 场景说明

  


导航栏目可以通过链接地址实现一键跳转到别的菜单，比如页面，表单等。

展示效果如下：![](https://weapp.eteams.cn/papi/file/preview?fileId=1157708662343958570&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

#   


# 2\. 功能简介

  


上述场景需要通过设置导航菜单组件实现，在导航菜单中，点击右侧属性面板对【导航项】进行编辑。

#   


# 3\. 操作说明

  


1.将导航菜单组件拖入设计器面板中。![](https://weapp.eteams.cn/papi/file/preview?fileId=1157708666745151513&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


2.右侧属性面板对【导航项】进行编辑，设置菜单名称与图标。![](https://weapp.eteams.cn/papi/file/preview?fileId=1157708671017779209&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157708670941397108&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157708675359514677&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)![](https://weapp.eteams.cn/papi/file/preview?fileId=1157708675354689626&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


3.设置链接地址，打开方式，可见范围。

（1）设置链接地址，通过链接地址实现一键跳转到别的菜单，比如页面，表单等。![](https://weapp.eteams.cn/papi/file/preview?fileId=1157708679666434062&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

（2）设置打开方式，支持当前页面、新窗口、弹出窗口与右侧滑出。![](https://weapp.eteams.cn/papi/file/preview?fileId=1157708679630053400&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)（3）设置可见范围。![](https://weapp.eteams.cn/papi/file/preview?fileId=1157708683851464708&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


4.导航菜单支持添加子菜单的设置，点击添加子菜单。![](https://weapp.eteams.cn/papi/file/preview?fileId=1157708683902681113&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)编辑子菜单内容，菜单名称，链接地址，打开方式，可见范围等，点击确定。![](https://weapp.eteams.cn/papi/file/preview?fileId=1157708688289038348&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


5.设置导航菜单隐藏。![](https://weapp.eteams.cn/papi/file/preview?fileId=1157708688239591457&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)![](https://weapp.eteams.cn/papi/file/preview?fileId=1157708692349124662&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


6.设置导航菜单样式。![](https://weapp.eteams.cn/papi/file/preview?fileId=1157708696801533967&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)![](https://weapp.eteams.cn/papi/file/preview?fileId=1157708705450188902&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)
