# 导航栏菜单

来源快照：`result_data_new_260518.json`

- 来源 ID：`1183975445552570480`
- 模块：低代码平台e-builder
- 目录：页面引擎 - 页面设计器 - 页面组件 - 模块组件 - 模块组件/主题
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

## 一、功能背景及价值用途

导航栏菜单是系统界面中用于导航和操作的组件。它能协助用户直接访问不同的页面或执行特定的操作，提高使用效率，是数字化办公系统中不可或缺的重要元素。

## 二、业务流程图

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163332041520627721&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)

 

## 三、功能概述及使用说明

### 1、功能入口

【页面设计器】-【模块组件/主题】-【导航栏菜单】-拖拽到设计器内，组件会根据【后台管理中心】-【界面配置中心】-【导航设置】-【PC网页版导航】中的配置信息来完成组件的展示。组件内容从左往右依次展示主导航菜单、工具栏菜单、更多菜单（图1）。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163332041707380740&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)

图1

### 2、主导航菜单

导航栏菜单组件默认开启【显示主导航菜单】配置。当此配置开启时，可通过【显示菜单】选择要展示的主导航菜单信息。

#### 2.1、显示菜单

显示菜单下拉框中可选数据来源于【后台管理中心】-【界面配置中心】-【导航设置】-【PC网页版导航】页面的【主导航中显示】分组中已启用的数据。（图2、图3）

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163332045782040580&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=1163332045859741705&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

#### 2.2、显示方式

当主导航菜单允许用户修改显示方式时，菜单最终的展示形式以当前用户在【个人设置】-【偏好设置】-【显示设置】-【导航设置】Tab页的个性化设置为准（图4、图5）。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163332045946552383&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=1163332050093785092&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

### 3、工具栏菜单

导航栏菜单组件默认开启【显示工具栏菜单】配置。当此配置开启时，可通过点击右侧的设置图标打开【菜单显示设置】弹窗，取消勾选不需要展示在工具栏区域的菜单信息。（图6）

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163332050130370573&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

菜单显示设置弹窗内展示的数据来源于【后台管理中心】-【界面配置中心】-【导航设置】-【PC网页版导航】页面的【工具栏中显示】分组中已启用的数据。（图7）

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163332050124079115&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)

图7

 

### 4、更多菜单

导航栏菜单组件默认开启【显示更多菜单】配置。当此配置开启时，会在导航栏菜单内容的右侧展示一个更多图标（图8）。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163332054550339587&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)

图8

更多菜单的数据来源于【后台管理中心】-【界面配置中心】-【导航设置】-【PC网页版导航】页面的【更多中显示】分组中已启用数据及【工具栏中显示】分组中的部分已启用数据（图7、图9）。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163332054550339591&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)

图9

### 5、其他配置项

#### 5.1、排列方式

新拖入的导航栏菜单组件默认采用横向排列。可选排列方式有：横向、纵向（图10）。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163332054460989460&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)

图10

 

#### 5.2、对齐方式

当导航栏菜单设置的排列方式为横向时，对齐方式可以选择居左或居右。一般组件放在页面的左侧时为居左，放在右侧为居右（图11）。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163332058708885508&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)

图11

## 四、延伸用法

在【后台管理中心】-【界面配置中心】-【界面主题管理】-【PC网页版主题】中可以针对不同用户群体设置个性化的特色主题。在特色主题中可以拖入导航栏菜单组件，设置主菜单、工具栏菜单及更多菜单信息。方便用户点击菜单访问不同的页面或执行特定的操作，提高使用效率（图12）。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163332058708885514&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)

图12

在前台【偏好设置】-【显示设置】的主题设置Tab页中启用特色主题，刷新页面后，就可以在页面顶部查看导航栏菜单的显示效果（图13）。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163332058846134292&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)

图13

## 五、使用注意点

导航栏菜单组件推荐在特色主题中使用。在搭建特色主题时拖入导航栏菜单组件，通过设置组件配置信息，搭建符合企业文件的个性化主题。如此才能充分发挥组件的功能，体现组件的价值。

# 六、上下游关联功能点

1、[组件标题](https://weapp.eteams.cn/sp/ebdpage/view/freepass/1152863419640021002?id=1159789715744890921&freepass_doc=1&space_id=1157961794811633670 "组件标题")

2、[组件样式](https://weapp.eteams.cn/sp/ebdpage/view/freepass/1152863419640021002?id=1159212708506116122&freepass_doc=1&space_id=1157961794811633670 "组件样式")

3、[组件外观样式](https://weapp.eteams.cn/sp/ebdpage/view/freepass/1152863419640021002/page/1152863419640021002?id=1159789238918479919&freepass_doc=1&space_id=1157961794811633670 "组件外观样式")

4、[事件与动作](https://weapp.eteams.cn/sp/ebdpage/view/freepass/1152863419640021002/page/1152863419640021002?id=1159192088358584536&freepass_doc=1&space_id=1157961794811633670 "事件与动作")

5、[组件权限](https://weapp.eteams.cn/sp/ebdpage/view/freepass/1152863419640021002/page/1152863419640021002?id=1159789964944113758&freepass_doc=1&space_id=1157961794811633670 "组件权限")
