图鉴式导航Catalog Navbar
你可能会说
内容越加越多，用户进来却不知道能逛什么、该去哪找。
图鉴式导航是把全站内容分区摊进一条常驻顶栏：分区入口、特色胶囊、全站搜索、升级与身份各占其位。Appllama 是代表：Logo 字标 + Apps/Explore/Pricing 平铺分区 + 黑胶囊特色位 + 带 / 快捷键提示的搜索框 + Go Pro 与头像收尾。它卖的不是「菜单多」，而是目录站的逛法——三秒内知道自己在哪、能去哪。BuildHub 可直接映射为：术语 / 技能 / 产品 / 提示词 + 搜索 + PRO 位。
也常被叫作目录顶栏工具带导航Appllama 式导航
设计原则 · Principles
- 一条顶栏只做四件事：分区入口、特色胶囊、全站搜索、身份与升级——不塞第五件
- 分区平铺、不藏二级菜单：顶级分类控制在 5–7 个，放不下时先重组内容再考虑嵌套
- 搜索是一等公民：紧跟分区右侧常驻可见，带 / 或 ⌘K 快捷键提示，点开是命令面板
- PRO 位放最外圈：Go Pro 文本链紧贴头像，不与分区抢注意力，也不做成弹窗
- 深浅双态同一版式：胶囊浅色态用实底、深色态用描边，顶栏高度与间距不变
容易混淆？这样区分
图鉴式导航≠巨型菜单（Mega Menu）
Mega Menu 悬停垂下二级大面板，服务类目繁多的电商；图鉴式导航全部平铺，服务顶级分区有限的目录型内容站。
图鉴式导航≠侧边栏文档导航
侧栏适合深层级、单主线阅读（文档、知识库）；顶栏工具带服务横向逛——用户在分区之间跳，而不是在同一棵树里钻。
AI 提示词 · Prompt
把 BuildHub 顶栏改成图鉴式导航：左侧 logo 磁贴 + 字标；中间平铺一级分区「术语 / 技能 / 产品 / 提示词」，不做下拉；分区右侧一枚胶囊作为特色入口（素材库）；搜索框常驻右侧、圆角胶囊、内置 / 快捷键徽标，点击展开命令面板；最右 Go Pro 文本链 + 圆形头像（主题与语言切换收进头像菜单）。顶栏高 56px、下边框 1px，深浅双态同版式只换 token。保留现有一切路由与功能，不动文案。
典型使用场景
BuildHub 映射 · 浅色态
左右滑动查看完整示例
✦BUILDHUB术语技能产品提示词素材库⌕ 搜索术语、技能…/Go Pro✦
一个人的产品图鉴，逛起来。
图标库付费墙设计深色图鉴Next.js
BuildHub 映射 · 深色态
左右滑动查看完整示例
✦BUILDHUB术语技能产品提示词素材库⌕ 搜索术语、技能…/Go Pro✦
一个人的产品图鉴，逛起来。
图标库付费墙设计深色图鉴Next.js
搜索展开 · 命令面板
左右滑动查看完整示例
⌕ 输入「图标」搜索全站…esc
TERMS图标库 Lucide↵
ASSETSLogo 素材 · 8 种风格
SKILLSfrontend-design
SHOWCASEAppllama
↑↓ 选择↵ 打开BUILDHUB ⌘K
延伸阅读 · 权威出处