Notch Pill Nav
Overview
A black notch-pill navigation stuck to the top of the screen: app icon and name on the left, links to features, FAQ, updates and pricing in the middle, a white download button on the right. Concave rounded shoulders on both sides; on narrow screens it folds into a hamburger with a dropdown.
Taken from the page template Suitie Mac Clipboard History Website. Use it on its own, or combine it with the other components from the same template to rebuild the full page.
Plain HTML, CSS and a little vanilla JS, with no framework dependency. Copy the prompt into Claude Code, Cursor, Trae or Codex and the model adds Notch Pill Nav to your project in your colors.
Where to use it
Site headers, tab switches, segmented controls, side navigation and footers.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
$ npm i -g @8pt-dev/cli && 8pt add notch-pill-nav
mcp › Use 8pt MCP to call get_component("notch-pill-nav")
Code
Source for Notch Pill Nav. Motion uses only transform and opacity and respects the Reduce motion setting.
<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); };
}Subscribe to Builder to see the full source.See pricing