顶部导航栏

Navbar

UI 组件也叫：导航栏、顶栏、Header、App Bar、页头

一句话：固定在页面最上方的一条横栏，放网站标志、主要栏目链接，以及搜索、登录等全局入口。

详细解释

顶部导航栏横跨页面顶端，左边通常是 Logo，中间或左侧是几个主栏目，右边放搜索、消息、头像等全局操作。它在每个页面都出现，让用户随时知道自己在哪个网站、能去哪些地方。栏目在 7 个以内最合适，多了就会挤不下。

它和下拉菜单经常一起出现，但作用不同：导航栏是一直摆在页面上的常驻入口，下拉菜单是点击或悬停后才临时弹出的一组选项，用完就收起。导航栏里某个栏目下还有子页面时，才在它下面挂一个下拉菜单。

小屏幕上导航栏一般收成一个「汉堡」图标，点开后再展开栏目。页面较长时常配合吸顶，滚动时始终可见。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

页面顶部做一个高 64px 的白色导航栏，滚动时吸顶。左侧放 Logo，接着是「首页、产品、价格、文档」四个栏目，当前栏目加粗并带下划线；右侧放搜索框和用户头像，点击头像弹出下拉菜单。宽度小于 768px 时，栏目收进汉堡菜单。

由横向容器、左侧 Logo、栏目链接组和右侧操作区（搜索、通知、头像或登录按钮）组成，小屏时多一个汉堡菜单按钮。

插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。