Header 页头（导航栏）
/HED-er/ · noun · 导航类模式 · #093
网站每一页最上方的那条横栏：一边是 logo，中间或右边是主导航链接，常常还有搜索、登录或一个主要按钮。里面那组导航链接就是导航栏（navbar）。
别名：页头、网站导航栏、顶部导航栏、网站顶部、网页头部。
你可能会这样叫它
- “网站顶部那一条”
- “网页最上面的导航”
- “顶部菜单栏”
- “网站头部”
- “放 logo 和链接的那一栏”
……它的名字是 页头（导航栏）（Header）。
常见问题
网站顶部叫什么？
叫页头（header）。它是每一页最上方的横栏，放 logo、主导航，常常还有搜索或登录。里面那组导航链接叫导航栏（navbar）。页头上方偶尔还有一条放公告或促销的细条，那是公告栏，属于横幅（banner）的一种。
页头和导航栏有什么区别？
页头（header）指页面顶部整块区域；导航栏（navbar）指那一组导航链接，通常放在页头里面。页头里还可以有 logo、搜索、购物车或登录按钮。在 HTML 里，区域用 header 元素，链接放在 nav 元素里。
代码里叫什么
| Web (HTML / ARIA) | <header> <nav> 页面顶层的 header 就是 banner 地标，导航链接放在其中的 nav 里 |
|---|---|
| Web (CSS) | position: sticky top: 0 吸顶页头：页面滚动时保持可见 |
| SwiftUI | NavigationStack .toolbar App 每个页面有自己的导航栏，没有全站页头 |
| UIKit | UINavigationBar |
| Jetpack Compose | TopAppBar |
| Flutter | AppBar |
复制给 AI 编程工具
在每一页顶部加一个全站页头：左边是 logo，点击回首页；主导航链接放在 nav 元素里；右边是搜索和登录按钮。在导航中标出当前页，让页头吸顶、滚动时一直可见，窄屏时把链接收进一个菜单按钮。使用 header 和 nav 地标，所有链接都能用键盘访问。