Pill Dropdown Header
介绍
暖白底的研究机构页头：左右两组浅灰胶囊按钮各带下拉菜单，中间是天平图形标志与疏朗字标，页面滚动后字标收拢只留图形；右侧搜索与菜单方块按钮，窄屏改为图形标志加展开式全屏菜单。
拆自整页模板 知衡 AI 研究公司首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Pill Dropdown Header 加进你的项目并换成你的配色。
适用场景
官网顶部导航、标签切换、分段控制、侧边导航和页脚。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add pill-dropdown-header
mcp › 使用 8pt MCP 调用 get_component("pill-dropdown-header")
代码
Pill Dropdown Header 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-pdh"><div class="x-pdh__bar"><nav class="x-pdh__left" aria-label="主导航"><a class="x-pdh__pill" href="#news">新闻</a><div class="x-pdh__item" data-dd="r"><button type="button" class="x-pdh__pill" aria-expanded="false" aria-haspopup="true">研究<svg class="cv" 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 9.5L12 15l5.5-5.5"/></svg></button><div class="x-pdh__menu" role="menu"><a href="#research">研究概览</a><a href="#research">可解释性</a><a href="#research">对齐科学</a><a href="#research">社会影响</a></div></div><div class="x-pdh__item" data-dd="p"><button type="button" class="x-pdh__pill" aria-expanded="false" aria-haspopup="true">政策<svg class="cv" 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 9.5L12 15l5.5-5.5"/></svg></button><div class="x-pdh__menu" role="menu"><a href="#learn">政策观点</a><a href="#learn">透明度报告</a><a href="#learn">公共事务</a></div></div><div class="x-pdh__item" data-dd="c"><button type="button" class="x-pdh__pill" aria-expanded="false" aria-haspopup="true">承诺<svg class="cv" 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 9.5L12 15l5.5-5.5"/></svg></button><div class="x-pdh__menu" role="menu"><a href="#commitments">审慎扩展政策</a><a href="#commitments">模型准则</a><a href="#commitments">安全与隐私</a></div></div></nav><a class="x-pdh__brand" href="#" aria-label="知衡 首页"><svg class="mk" viewBox="0 0 32 32" aria-hidden="true"><path d="M4 11h24" stroke="currentColor" stroke-width="3" stroke-linecap="round"/><path d="M16 11L9.5 27h13L16 11z" fill="currentColor"/><circle cx="6" cy="17.5" r="2.6" fill="currentColor"/><circle cx="26" cy="17.5" r="2.6" fill="currentColor"/></svg><span class="x-pdh__word">知衡</span></a><div class="x-pdh__right"><div class="x-pdh__item x-pdh__item--r" data-dd="co"><button type="button" class="x-pdh__pill" aria-expanded="false" aria-haspopup="true">公司<svg class="cv" 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 9.5L12 15l5.5-5.5"/></svg></button><div class="x-pdh__menu" role="menu"><a href="#brief">关于我们</a><a href="#brief">加入我们</a><a href="#news">新闻中心</a></div></div><div class="x-pdh__item x-pdh__item--r" data-dd="t"><button type="button" class="x-pdh__pill" aria-expanded="false" aria-haspopup="true">试用知衡助手<svg class="cv" 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 9.5L12 15l5.5-5.5"/></svg></button><div class="x-pdh__menu" role="menu"><a href="#brief">网页版助手</a><a href="#brief">开发者平台</a><a href="#brief">桌面客户端</a></div></div><button type="button" class="x-pdh__ic x-pdh__search" aria-label="搜索"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="6.5"/><path d="M16 16l4 4"/></svg></button><button type="button" class="x-pdh__ic x-pdh__burger" aria-label="打开菜单" aria-expanded="false"><svg class="i-m" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 8h14"/><path d="M5 12h14"/><path d="M5 16h9"/></svg><svg class="i-x" 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></div></div><div class="x-pdh__sheet"><a href="#news">新闻</a><a href="#research">研究</a><a href="#learn">政策</a><a href="#commitments">承诺</a><a href="#brief">公司</a><a class="x-pdh__sheet-cta" href="#brief">试用知衡助手</a></div></div>
.x-pdh{box-sizing:border-box;position:relative;width:100%;padding:18px clamp(20px,5.5vw,80px);background:#faf9f5;color:#141413;font-family:"PingFang SC","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased}.x-pdh *,.x-pdh *::before,.x-pdh *::after{box-sizing:border-box}.x-pdh svg{width:1em;height:1em;flex:none}.x-pdh__bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px}.x-pdh__left,.x-pdh__right{display:flex;align-items:center;gap:8px}.x-pdh__right{justify-content:flex-end}.x-pdh__item{position:relative}.x-pdh__pill{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:1px solid #e3e0d6;border-radius:99px;background:#f0eee6;color:inherit;font:inherit;font-size:12.5px;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .2s,border-color .2s}.x-pdh__pill:hover,.x-pdh__item.is-open>.x-pdh__pill{background:#e8e5dc;border-color:#d6d2c6}.x-pdh__pill .cv{font-size:12px;transition:transform .25s}.x-pdh__item.is-open .cv{transform:rotate(180deg)}.x-pdh__menu{position:absolute;top:calc(100% + 8px);left:0;z-index:5;display:grid;min-width:200px;padding:6px;border:1px solid #e3e0d6;border-radius:14px;background:#fff;box-shadow:0 22px 44px -22px rgba(20,20,19,.3);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility .2s}.x-pdh__item--r .x-pdh__menu{left:auto;right:0}.x-pdh__item.is-open .x-pdh__menu{opacity:1;visibility:visible;transform:none}.x-pdh__menu a{padding:9px 12px;border-radius:9px;color:#141413;font-size:13.5px;text-decoration:none}.x-pdh__menu a:hover{background:#f0eee6}.x-pdh__brand{display:inline-flex;align-items:center;gap:0;color:#141413;text-decoration:none}.x-pdh__brand .mk{width:28px;height:28px}.x-pdh__word{display:inline-block;max-width:120px;margin-left:10px;overflow:hidden;font-size:24px;font-weight:700;letter-spacing:.34em;white-space:nowrap;transition:max-width .45s cubic-bezier(.2,.8,.2,1),opacity .3s,margin .45s}.x-pdh.is-compact .x-pdh__word{max-width:0;margin-left:0;opacity:0}.x-pdh__ic{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid #e3e0d6;border-radius:8px;background:transparent;color:#141413;font-size:16px;cursor:pointer;transition:background .2s}.x-pdh__ic:hover{background:#f0eee6}.x-pdh__burger .i-x{display:none}.x-pdh.is-sheet .x-pdh__burger .i-m{display:none}.x-pdh.is-sheet .x-pdh__burger .i-x{display:block}.x-pdh__sheet{display:grid;gap:2px;max-height:0;overflow:hidden;opacity:0;transition:max-height .4s ease,opacity .3s,padding .4s}.x-pdh.is-sheet .x-pdh__sheet{max-height:420px;padding-top:14px;opacity:1}.x-pdh__sheet a{padding:12px 4px;border-bottom:1px solid #e3e0d6;color:#141413;font-size:16px;text-decoration:none}.x-pdh__sheet-cta{margin-top:10px;border:0!important;border-radius:99px;background:#141413;color:#faf9f5!important;text-align:center}@media (min-width:900px){.x-pdh__sheet{display:none}}@media (max-width:899px){.x-pdh__left,.x-pdh__right>.x-pdh__item:first-child{display:none}.x-pdh__bar{grid-template-columns:auto minmax(0,1fr)}.x-pdh__brand{order:-1}.x-pdh__word{display:none}.x-pdh__brand .mk{width:30px;height:30px}}@media (prefers-reduced-motion:reduce){.x-pdh *{transition:none!important}}(root) => {
const items = [...root.querySelectorAll('[data-dd]')];
const burger = root.querySelector('.x-pdh__burger');
const closeAll = (except) => items.forEach(it => { if (it !== except) { it.classList.remove('is-open'); it.querySelector('button').setAttribute('aria-expanded', 'false'); } });
const onClick = (e) => {
const btn = e.target.closest('.x-pdh__item > button');
if (btn) { const it = btn.parentElement; const open = !it.classList.contains('is-open'); closeAll(it); it.classList.toggle('is-open', open); btn.setAttribute('aria-expanded', String(open)); return; }
if (e.target.closest('.x-pdh__burger')) { const on = !root.classList.contains('is-sheet'); root.classList.toggle('is-sheet', on); burger.setAttribute('aria-expanded', String(on)); return; }
if (e.target.closest('.x-pdh__menu a, .x-pdh__sheet a')) { closeAll(); root.classList.remove('is-sheet'); burger.setAttribute('aria-expanded', 'false'); return; }
closeAll();
};
const onKey = (e) => { if (e.key === 'Escape') { closeAll(); root.classList.remove('is-sheet'); } };
…订阅 Builder 查看完整源码。查看价格