Pill Dropdown Header
Overview
A research-lab page header on warm white: two groups of light gray pill buttons with dropdowns on either side, a balance-scale emblem and airy wordmark in the middle that collapses to just the emblem on scroll; search and menu buttons on the right, and an emblem with a full-screen menu on narrow screens.
Taken from the page template Zhiheng AI Research Company Home. 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 Pill Dropdown Header 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 pill-dropdown-header
mcp › Use 8pt MCP to call get_component("pill-dropdown-header")
Code
Source for Pill Dropdown Header. Motion uses only transform and opacity and respects the Reduce motion setting.
<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'); } };
…Subscribe to Builder to see the full source.See pricing