Website Header
The header of a website: logo left, nav in the middle, sign-in / sign-up actions right — often sticky.
Top App Bar
顶部应用栏
The bar at the very top of a page: back button, title, and the page's key actions.
All platformsNavigationTop navigationComponent
大白话说明
顶部应用栏承载三件事：告诉用户当前页是什么（标题）、怎么回去（返回或菜单）、这一页最重要的操作（右侧 1–3 个图标按钮）。滚动时可固定在顶部，长标题截断省略。
什么时候用
几乎每个页面都需要它——尤其是从列表进入的二级页面，返回和标题缺一不可。
什么时候不用
沉浸式页面（图片详情、视频播放）可以让它透明或自动隐藏；全站级的网站导航不要用它代替（那是网站页眉）。
细节与变体
- 右侧操作超过 3 个就把低频的收进「更多」菜单，别一字排开
- 标题过长用省略号，不要缩小字号硬塞
- 返回按钮的热区至少 44×44，哪怕图标只有 20px
配套效果见下方「可用效果」。
Matching prompt (fill in & copy)
Effects you can apply
Reference implementations (open source)
- Ant Design ↗ MIT · 免费（MIT）
The de-facto standard for admin interfaces in China — tables, forms, lists.
- MUI ↗ MIT · 免费（MIT，核心）
The most established Material component library for React.
- TDesign ↗ MIT · 免费（MIT）
Tencent's full-stack design system covering web, mobile, mini-programs, and desktop.