组件分类 · 导航
导航组件
官网顶部导航、下拉菜单、标签切换、分段控制和页脚。结构清楚、能用键盘操作，复制提示词即可装进项目。
共 11 个 · 更新于
适合用在哪里
官网顶部导航、标签切换、分段控制、侧边导航和页脚。
怎么用
- 打开任意一个组件，看实时预览，切换深色 / 浅色背景。
- 点「复制提示词」，粘贴到 Claude Code、Cursor、Codex 或 Trae；模型会读你的项目，把组件改写成你的框架，并把颜色、字体接到你的设计变量。
- 或者在终端用 8pt CLI 装进项目，也可以在已接入 8pt MCP 的编辑器里直接说需求。
npm i -g @8pt-dev/cli 8pt login 8pt search "导航" 8pt add gradient-footer-panel
全部 11 个导航组件
- Gradient Footer Panel 渐变收尾页脚
收尾区：小标签、行动标题与带打字占位的输入框，背景由米白过渡到蓝、粉、红、橙的竖向渐变；下方米色圆角页脚卡片含标志、五列链接和向上弹出的语言切换菜单。
- Pill Dropdown Header 胶囊下拉页头
暖白底的研究机构页头：左右两组浅灰胶囊按钮各带下拉菜单，中间是天平图形标志与疏朗字标，页面滚动后字标收拢只留图形；右侧搜索与菜单方块按钮，窄屏改为图形标志加展开式全屏菜单。
- Motto Column Footer 格言分栏页脚
白底页脚：左侧大号标志和一句衬线体格言，右侧四列分组链接，底行版权、偏好设置与示意邮箱，右下角语言选择胶囊点击后向上弹出菜单并可切换显示。
- Pill Link Footer 药丸链接页脚
联系信息加页脚的收尾组合：等宽小标签下两行粗体联系语，细线分隔后左侧等宽版权，右侧关注、联系、条款三栏，每个链接都是带线性小图标的浅灰药丸按钮，底部露出半截镜面描边巨字。
- Notch Pill Nav 刘海胶囊导航
贴在屏幕顶部的黑色刘海胶囊导航：左侧应用图标与品牌名，中间是功能、常见问题、更新与定价链接，右侧白色下载按钮；两侧带内凹圆角肩部，窄屏收起为汉堡按钮并展开下拉菜单。
- Closing CTA Footer 收尾行动与页脚
灰色副句加绿色重点的两行收尾标题与黑色按钮，背后一团缓慢呼吸的绿色光晕；下方细线分隔的三栏链接页脚，中栏行业名录分两列，底行版权与条款。
- Giant Wordmark Footer 超大字标页脚
深色圆角顶边页脚：左侧品牌名，右侧三列链接并带「新」徽标，底行版权与条款链接，最下方一行几乎与底色融为一体的超大字标被裁去下半截。
- Connect Way Tabs 接入方式切换
三张接入方式卡片当作选项卡，选中的卡片描出主色边框、箭头转向，下方命令框随之淡入切换，并可一键复制。适合文档入口、安装引导。
- Animated Tabs 滑动标签页
指示条用 transform 平移和缩放跟随当前标签，面板淡入上移。
- Segmented Control 分段控制器
等宽分段 + 滑块，切换时滑块弹簧位移，下方内容淡入。支持方向键切换。
- Stepper 步骤条
多步流程指示：连接线按进度填充，完成的步骤变成对勾，当前步骤有呼吸光圈。附上一步 / 下一步。
常见问题
8pt 的导航组件能用在 React、Vue 或 Next.js 项目里吗？
能。组件源码是原生 HTML、CSS 和少量 JS；复制提示词交给模型后，它会按你项目的技术栈改写成 React、Vue、Svelte 等写法，并把颜色、字体接到你已有的设计变量上。
怎么把导航组件装进项目？
三种方式：在组件页复制提示词交给模型；用 8pt CLI 运行 8pt add <组件 slug>；或者接入 8pt MCP 后在对话里直接说需求。复制提示词、CLI 和 MCP 需要 Builder 方案（Builder 方案 ¥45/月、¥128/季或 ¥379/年；另有创始终身版 ¥899，一次付款，限 100 席）。
官网导航放几个链接合适？
顶部一级链接控制在五个左右，把次要入口收进下拉菜单或页脚；右侧保留一个最重要的操作按钮，例如「开始使用」。
可以用在商业项目里吗？
可以。你可以在自己的项目（含商业项目）中使用复制或安装的代码，但不能把 8pt 的内容整体转售或搭建同类素材库。