导航栏 Navigation Bar

清晰的导航能告诉用户当前在哪里、能到哪里去、并能原路返回。

导航栏组件构成

• 导航栏分为一级导航栏和二级导航栏

一级导航栏包括：

1.开发者品牌 logo

2.页面标题

3.小程序导航按钮（反馈、更多、关闭）

4.导航栏背景

二级导航栏包括：

1.二级页面导航按钮（返回上一级）

2.页面标题

3.小程序导航按钮（反馈、更多、关闭）

4.导航栏背景

• 根据页面【深色模式】和【浅色模式】，导航栏组件有深、浅两种模式可适配，开发者需在保证可读性的前提下，对页面配色和组件进行选择及使用。

导航栏类型

• 根据开发者可自定义程度的递增，可分为默认导航、自定义导航、特殊导航三种类型。

默认导航栏：仅可配置导航背景色值（不含透明度），其余元素均不可配置；

自定义导航：标题、背景色值（含透明度）可配置；

特殊导航：可通过申请，标题、背景色值（含透明度）、logo 均可配置。

X 分屏导航

• 在 X 分屏场景下，为保持容器在有限空间内的使用效率，右侧小程序导航按钮需遵循以下原则：

仅展示一个按钮；

默认展示【更多】按钮；

可通过 schema 或者 settings 配置其他参数。

导航栏品牌透出原则

为保证更好地传递开发者品牌信息，导航栏 logo 透出遵循以下原则：

• 小程序内常规路径：一级导航栏左侧必须显示品牌 logo，二级页面显示返回按钮
• 从小程序外部链接进入的第一个页面：无论是一级或二级页面，导航栏左侧须显示品牌 logo，二级页面的 logo 点击可返回首页