---
url: /mobile/components/nav-bar.md
---
# NavBar 页头

移动端 H5 的**页面头部**：左区返回箭头/文案、居中标题（超长省略）、右区动作，
触控热区不小于 44px。中后台内容页头（标题 + 副标题 + 操作区）见 PageHeader，
二者一个面向 H5 导航、一个面向桌面文档流，不要混用。`fixed` 吸顶时自动吸收
`env(safe-area-inset-top)`（刘海屏独立 PWA 生效，普通浏览器为 0），配
`placeholder` 生成等高占位。与 evoke-ui 的 `EwNavBar` 同名同 API。

## 基础用法

```html
<eb-nav-bar
  title="审批详情"
  left-arrow
  left-text="返回"
  right-text="协办"
  @click-left="router.back()"
  @click-right="openAssignee"
/>
```

## 自定义两侧内容

左右都是完整插槽：左区放图标按钮，右区放主按钮（提交/下一步），
标题也能整体替换（如换成进度步骤或搜索框）。

## 吸顶与安全区

真机上页头通常吸顶滚动：`fixed` 定位到视口顶部并自动叠加
`env(safe-area-inset-top)`；`fixed` 必须配 `placeholder` 生成等高占位，
内容不会被头部遮挡：

```html
<eb-nav-bar title="订单详情" left-arrow left-text="返回" fixed placeholder @click-left="router.back()" />
```

## API