Notch Pill Nav
介绍
贴在屏幕顶部的黑色刘海胶囊导航：左侧应用图标与品牌名，中间是功能、常见问题、更新与定价链接，右侧白色下载按钮；两侧带内凹圆角肩部，窄屏收起为汉堡按钮并展开下拉菜单。
拆自整页模板 随贴 Mac 剪贴板历史官网，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Notch Pill Nav 加进你的项目并换成你的配色。
适用场景
官网顶部导航、标签切换、分段控制、侧边导航和页脚。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add notch-pill-nav
mcp › 使用 8pt MCP 调用 get_component("notch-pill-nav")
代码
Notch Pill Nav 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-snv"><nav class="x-snv__bar" aria-label="主导航"><a class="x-snv__brand" href="#"><img src="https://8pt.dev/api/media/0b8c42a8ad950197eb176023.webp" alt="随贴图标" width="28" height="28"><b>随贴</b></a><span class="x-snv__links"><a href="#features">功能</a><a href="#faq">常见问题</a><a href="#more">更新</a><a href="#pricing">定价</a></span><a class="x-snv__dl" href="#pricing"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4v11"/><path d="M7.5 10.5L12 15l4.5-4.5"/><path d="M5 19.5h14"/></svg>下载</a><button type="button" class="x-snv__burger" aria-label="打开菜单" aria-expanded="false"><svg class="i-menu" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16"/><path d="M4 12h16"/><path d="M4 17h16"/></svg><svg class="i-close" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 6.5l11 11"/><path d="M17.5 6.5l-11 11"/></svg></button></nav><div class="x-snv__menu"><a href="#features">功能</a><a href="#faq">常见问题</a><a href="#more">更新</a><a href="#pricing">定价</a><a class="x-snv__menu-dl" href="#pricing"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4v11"/><path d="M7.5 10.5L12 15l4.5-4.5"/><path d="M5 19.5h14"/></svg>下载 Mac 版</a></div></div>
.x-snv{box-sizing:border-box;position:relative;width:100%;max-width:1100px;height:320px;margin:0 auto;border-radius:28px;overflow:hidden;background:linear-gradient(180deg,#1c46d8 0%,rgba(47,134,255,.85) 45%,rgba(143,208,255,0) 80%),url(https://8pt.dev/api/media/e21eafd697bcecf7b9816709.webp) center 75%/cover #8fd0ff;font-family:"PingFang SC","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased}.x-snv *,.x-snv *::before,.x-snv *::after{box-sizing:border-box}.x-snv svg{width:1em;height:1em;flex:none}.x-snv__bar{position:absolute;left:50%;top:0;z-index:2;display:flex;align-items:center;gap:28px;width:min(720px,calc(100% - 32px));height:54px;padding:0 10px 0 12px;border-radius:0 0 22px 22px;background:#050506;color:#fff;transform:translateX(-50%);box-shadow:0 10px 30px -12px rgba(0,0,0,.45)}.x-snv__bar::before,.x-snv__bar::after{content:"";position:absolute;top:0;width:18px;height:18px;background:radial-gradient(circle at 0 100%,transparent 17.5px,#050506 18px)}.x-snv__bar::before{left:-18px;transform:scaleX(-1)}.x-snv__bar::after{right:-18px;background:radial-gradient(circle at 100% 100%,transparent 17.5px,#050506 18px);transform:scaleX(-1)}.x-snv__brand{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-size:15px;font-weight:650}.x-snv__brand img{width:28px;height:28px;border-radius:8px}.x-snv__links{display:flex;gap:22px;flex:1}.x-snv__links a{color:rgba(255,255,255,.72);text-decoration:none;font-size:13.5px;transition:color .2s}.x-snv__links a:hover{color:#fff}.x-snv__dl{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:10px;background:#fff;color:#0b0b0f;text-decoration:none;font-size:13px;font-weight:650;transition:transform .2s}.x-snv__dl:hover{transform:translateY(-1px)}.x-snv__burger{display:none;place-items:center;width:38px;height:38px;margin-left:auto;border:0;border-radius:10px;background:transparent;color:#fff;font-size:22px;cursor:pointer}.x-snv__burger .i-close{display:none}.x-snv__burger[aria-expanded="true"] .i-close{display:block}.x-snv__burger[aria-expanded="true"] .i-menu{display:none}.x-snv__menu{position:absolute;left:50%;top:62px;z-index:1;display:grid;gap:2px;width:min(360px,calc(100% - 32px));padding:10px;border-radius:20px;background:#050506;transform:translate(-50%,-8px);opacity:0;visibility:hidden;transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1),visibility .25s}.x-snv__menu.is-open{opacity:1;visibility:visible;transform:translate(-50%,0)}.x-snv__menu a{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:12px;color:#fff;text-decoration:none;font-size:15px}.x-snv__menu a:hover{background:rgba(255,255,255,.08)}.x-snv__menu-dl{justify-content:center;margin-top:6px;background:#fff;color:#0b0b0f!important;font-weight:650}.x-snv__menu-dl:hover{background:#f1f1f3!important}@media (max-width:760px){.x-snv__links,.x-snv__dl{display:none}.x-snv__burger{display:grid}.x-snv__bar{border-radius:0 0 20px 20px}}@media (prefers-reduced-motion:reduce){.x-snv__menu,.x-snv__dl,.x-snv__links a{transition:none}}(root) => {
const btn = root.querySelector('.x-snv__burger');
const menu = root.querySelector('.x-snv__menu');
const toggle = (open) => { btn.setAttribute('aria-expanded', String(open)); menu.classList.toggle('is-open', open); };
const onBtn = () => toggle(btn.getAttribute('aria-expanded') !== 'true');
const onMenu = (e) => { if (e.target.closest('a')) toggle(false); };
btn.addEventListener('click', onBtn);
menu.addEventListener('click', onMenu);
return () => { btn.removeEventListener('click', onBtn); menu.removeEventListener('click', onMenu); };
}订阅 Builder 查看完整源码。查看价格