Home / Snippets / Headers / Shop category header Try the design Preview widthFit panel Mobile · 390 px Tablet · 768 px Desktop · 1280 px Open demo ↗
Preview links stay in the example. Copy the source to use your own destinations. Form previews never send information.
Copy the source HTML CSS JavaScript Astro
Copy HTML <header class="fct-shop-category-header s-header s-shop" data-snippet="shop-category-header"><div class="s-announcement">Considered objects for everyday life · Sample announcement</div><div class="s-wrap s-header-row"><a href="index.html" class="s-brand">The Everyday Store</a><a class="s-header-action s-button" href="basket.html">Basket</a><button type="button" class="s-nav-toggle" aria-expanded="false" aria-controls="fct-shop-category-header-nav">Menu</button><nav aria-label="Primary" id="fct-shop-category-header-nav"><a href="new.html">New arrivals</a><a href="home.html">Home & living</a><a href="clothing.html">Clothing</a><a href="about.html">Our story</a></nav></div></header>
Copy CSS .fct-shop-category-header{--s-bg:#f7f4eb;--s-ink:#252d26;--s-accent:#4b5d36;font:16px/1.65 system-ui,sans-serif;color:var(--s-ink);background:var(--s-bg)}.fct-shop-category-header,.fct-shop-category-header *{box-sizing:border-box}.fct-shop-category-header :is(h2,h3,p,ul,figure){margin:0}.fct-shop-category-header h2,.fct-shop-category-header h3{line-height:1.2;letter-spacing:-.035em}.fct-shop-category-header h2{font-size:clamp(1.8rem,4vw,3.5rem)}.fct-shop-category-header a{color:inherit;text-underline-offset:5px;overflow-wrap:anywhere}.fct-shop-category-header :is(a,button,input,textarea,select,summary):focus-visible{outline:3px solid var(--s-accent);outline-offset:4px}.fct-shop-category-header button,.fct-shop-category-header input,.fct-shop-category-header textarea,.fct-shop-category-header select{font:inherit}.fct-shop-category-header a,.fct-shop-category-header button{touch-action:manipulation}.fct-shop-category-header .s-wrap{max-width:1200px;margin-inline:auto;padding:40px 28px}.fct-shop-category-header .s-kicker{font-size:.8125rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:18px}.fct-shop-category-header .s-button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 21px;border:1px solid currentColor;text-decoration:none;background:transparent;color:inherit;cursor:pointer;border-radius:2px;font-weight:600}.fct-shop-category-header .s-muted{opacity:.82}.fct-shop-category-header .s-links{display:flex;gap:8px 26px;flex-wrap:wrap}.fct-shop-category-header .s-links a{display:inline-flex;align-items:center;min-height:44px}.fct-shop-category-header .s-rule{border-top:1px solid currentColor;padding-top:20px;margin-top:30px}.fct-shop-category-header .s-grid{display:grid;gap:28px;grid-template-columns:repeat(3,minmax(0,1fr))}.fct-shop-category-header img{max-width:100%;height:auto;display:block}.fct-shop-category-header .s-brand{font-size:1.3rem;font-weight:700;letter-spacing:-.05em;text-decoration:none}@media(max-width:640px){.fct-shop-category-header .s-wrap{padding:30px 20px}.fct-shop-category-header .s-grid{grid-template-columns:1fr}}
.fct-shop-category-header .s-header-row{padding-block:22px;display:flex;align-items:center;gap:30px;justify-content:space-between;flex-wrap:wrap}.fct-shop-category-header nav{display:flex;gap:24px;align-items:center;flex-wrap:wrap}.fct-shop-category-header nav>a{min-height:44px;display:inline-flex;align-items:center;text-decoration:none}.fct-shop-category-header .s-nav-toggle{display:none;color:inherit;background:transparent;border:1px solid currentColor;padding:10px 16px;min-height:44px;cursor:pointer}.fct-shop-category-header .s-top{display:flex;justify-content:space-between;gap:20px;padding:10px max(24px,calc((100% - 1144px)/2));font-size:.875rem;border-bottom:1px solid currentColor;flex-wrap:wrap}.fct-shop-category-header .s-top a{min-height:24px}.fct-shop-category-header .s-announcement{text-align:center;background:#252d26;color:#fff;padding:10px;font-size:.875rem}.fct-shop-category-header.s-line{border-bottom:1px solid #acb19f}.fct-shop-category-header.s-line .s-brand{font-weight:500;letter-spacing:.1em;font-size:1.1rem}.fct-shop-category-header.s-centered .s-brand{font:500 clamp(2rem,5vw,4rem)/1.1 Georgia,serif;letter-spacing:.04em}.fct-shop-category-header.s-centered .s-header-row{justify-content:center}.fct-shop-category-header.s-centered nav{width:100%;justify-content:center;border-top:1px solid currentColor;padding-top:15px}.fct-shop-category-header.s-shop nav{width:100%;border-top:1px solid #aab09f;padding-top:12px}.fct-shop-category-header.s-shop .s-header-action{margin-left:auto}.fct-shop-category-header.s-editorial .s-brand{font:700 clamp(2rem,5vw,4rem)/1 Georgia,serif;letter-spacing:-.06em}.fct-shop-category-header.s-editorial nav{width:100%;justify-content:center;border-block:3px double currentColor;padding-block:8px}.fct-shop-category-header .s-disclosure{position:relative}.fct-shop-category-header .s-disclosure summary{min-height:44px;cursor:pointer;align-content:center}.fct-shop-category-header .s-disclosure>div{position:absolute;z-index:3;background:var(--s-bg);border:1px solid currentColor;padding:15px;min-width:200px;right:0}.fct-shop-category-header .s-disclosure a{display:block;min-height:44px;padding:8px}@media(max-width:800px){.fct-shop-category-header .s-header-row{gap:16px}.fct-shop-category-header.s-ready .s-nav-toggle{display:block;margin-left:auto}.fct-shop-category-header .s-brand{max-width:calc(100% - 100px)}.fct-shop-category-header.s-ready nav{display:none}.fct-shop-category-header.s-ready.s-open nav{display:flex;flex-direction:column;align-items:stretch;width:100%;gap:4px;padding-top:10px}.fct-shop-category-header .s-disclosure>div{position:static}.fct-shop-category-header .s-header-action{order:3}.fct-shop-category-header .s-top{padding:12px 20px}.fct-shop-category-header.s-centered .s-header-row{justify-content:space-between}}Copy JavaScript (()=>{for(const root of document.querySelectorAll('[data-snippet="shop-category-header"]')){if(root.dataset.initialized)continue;root.dataset.initialized='true';root.classList.add('s-ready');const toggle=root.querySelector('.s-nav-toggle');toggle.addEventListener('click',()=>{const open=toggle.getAttribute('aria-expanded')!=='true';toggle.setAttribute('aria-expanded',String(open));root.classList.toggle('s-open',open);});root.addEventListener('keydown',e=>{if(e.key==='Escape'){root.querySelectorAll('details[open]').forEach(e=>e.open=false);if(root.classList.contains('s-open')){root.classList.remove('s-open');toggle.setAttribute('aria-expanded','false');toggle.focus();}}});}})();
Copy Astro ---
// Generated, escaped static markup. Use a distinct prefix for each instance.
const markup = "\u003cheader class=\"fct-shop-category-header s-header s-shop\" data-snippet=\"shop-category-header\"\u003e\u003cdiv class=\"s-announcement\"\u003eConsidered objects for everyday life · Sample announcement\u003c/div\u003e\u003cdiv class=\"s-wrap s-header-row\"\u003e\u003ca href=\"index.html\" class=\"s-brand\"\u003eThe Everyday Store\u003c/a\u003e\u003ca class=\"s-header-action s-button\" href=\"basket.html\"\u003eBasket\u003c/a\u003e\u003cbutton type=\"button\" class=\"s-nav-toggle\" aria-expanded=\"false\" aria-controls=\"fct-shop-category-header-nav\"\u003eMenu\u003c/button\u003e\u003cnav aria-label=\"Primary\" id=\"fct-shop-category-header-nav\"\u003e\u003ca href=\"new.html\"\u003eNew arrivals\u003c/a\u003e\u003ca href=\"home.html\"\u003eHome \u0026 living\u003c/a\u003e\u003ca href=\"clothing.html\"\u003eClothing\u003c/a\u003e\u003ca href=\"about.html\"\u003eOur story\u003c/a\u003e\u003c/nav\u003e\u003c/div\u003e\u003c/header\u003e";
---
<Fragment set:html={markup} />
<style is:global>
.fct-shop-category-header{--s-bg:#f7f4eb;--s-ink:#252d26;--s-accent:#4b5d36;font:16px/1.65 system-ui,sans-serif;color:var(--s-ink);background:var(--s-bg)}.fct-shop-category-header,.fct-shop-category-header *{box-sizing:border-box}.fct-shop-category-header :is(h2,h3,p,ul,figure){margin:0}.fct-shop-category-header h2,.fct-shop-category-header h3{line-height:1.2;letter-spacing:-.035em}.fct-shop-category-header h2{font-size:clamp(1.8rem,4vw,3.5rem)}.fct-shop-category-header a{color:inherit;text-underline-offset:5px;overflow-wrap:anywhere}.fct-shop-category-header :is(a,button,input,textarea,select,summary):focus-visible{outline:3px solid var(--s-accent);outline-offset:4px}.fct-shop-category-header button,.fct-shop-category-header input,.fct-shop-category-header textarea,.fct-shop-category-header select{font:inherit}.fct-shop-category-header a,.fct-shop-category-header button{touch-action:manipulation}.fct-shop-category-header .s-wrap{max-width:1200px;margin-inline:auto;padding:40px 28px}.fct-shop-category-header .s-kicker{font-size:.8125rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:18px}.fct-shop-category-header .s-button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 21px;border:1px solid currentColor;text-decoration:none;background:transparent;color:inherit;cursor:pointer;border-radius:2px;font-weight:600}.fct-shop-category-header .s-muted{opacity:.82}.fct-shop-category-header .s-links{display:flex;gap:8px 26px;flex-wrap:wrap}.fct-shop-category-header .s-links a{display:inline-flex;align-items:center;min-height:44px}.fct-shop-category-header .s-rule{border-top:1px solid currentColor;padding-top:20px;margin-top:30px}.fct-shop-category-header .s-grid{display:grid;gap:28px;grid-template-columns:repeat(3,minmax(0,1fr))}.fct-shop-category-header img{max-width:100%;height:auto;display:block}.fct-shop-category-header .s-brand{font-size:1.3rem;font-weight:700;letter-spacing:-.05em;text-decoration:none}@media(max-width:640px){.fct-shop-category-header .s-wrap{padding:30px 20px}.fct-shop-category-header .s-grid{grid-template-columns:1fr}}
.fct-shop-category-header .s-header-row{padding-block:22px;display:flex;align-items:center;gap:30px;justify-content:space-between;flex-wrap:wrap}.fct-shop-category-header nav{display:flex;gap:24px;align-items:center;flex-wrap:wrap}.fct-shop-category-header nav>a{min-height:44px;display:inline-flex;align-items:center;text-decoration:none}.fct-shop-category-header .s-nav-toggle{display:none;color:inherit;background:transparent;border:1px solid currentColor;padding:10px 16px;min-height:44px;cursor:pointer}.fct-shop-category-header .s-top{display:flex;justify-content:space-between;gap:20px;padding:10px max(24px,calc((100% - 1144px)/2));font-size:.875rem;border-bottom:1px solid currentColor;flex-wrap:wrap}.fct-shop-category-header .s-top a{min-height:24px}.fct-shop-category-header .s-announcement{text-align:center;background:#252d26;color:#fff;padding:10px;font-size:.875rem}.fct-shop-category-header.s-line{border-bottom:1px solid #acb19f}.fct-shop-category-header.s-line .s-brand{font-weight:500;letter-spacing:.1em;font-size:1.1rem}.fct-shop-category-header.s-centered .s-brand{font:500 clamp(2rem,5vw,4rem)/1.1 Georgia,serif;letter-spacing:.04em}.fct-shop-category-header.s-centered .s-header-row{justify-content:center}.fct-shop-category-header.s-centered nav{width:100%;justify-content:center;border-top:1px solid currentColor;padding-top:15px}.fct-shop-category-header.s-shop nav{width:100%;border-top:1px solid #aab09f;padding-top:12px}.fct-shop-category-header.s-shop .s-header-action{margin-left:auto}.fct-shop-category-header.s-editorial .s-brand{font:700 clamp(2rem,5vw,4rem)/1 Georgia,serif;letter-spacing:-.06em}.fct-shop-category-header.s-editorial nav{width:100%;justify-content:center;border-block:3px double currentColor;padding-block:8px}.fct-shop-category-header .s-disclosure{position:relative}.fct-shop-category-header .s-disclosure summary{min-height:44px;cursor:pointer;align-content:center}.fct-shop-category-header .s-disclosure>div{position:absolute;z-index:3;background:var(--s-bg);border:1px solid currentColor;padding:15px;min-width:200px;right:0}.fct-shop-category-header .s-disclosure a{display:block;min-height:44px;padding:8px}@media(max-width:800px){.fct-shop-category-header .s-header-row{gap:16px}.fct-shop-category-header.s-ready .s-nav-toggle{display:block;margin-left:auto}.fct-shop-category-header .s-brand{max-width:calc(100% - 100px)}.fct-shop-category-header.s-ready nav{display:none}.fct-shop-category-header.s-ready.s-open nav{display:flex;flex-direction:column;align-items:stretch;width:100%;gap:4px;padding-top:10px}.fct-shop-category-header .s-disclosure>div{position:static}.fct-shop-category-header .s-header-action{order:3}.fct-shop-category-header .s-top{padding:12px 20px}.fct-shop-category-header.s-centered .s-header-row{justify-content:space-between}}
</style>
<script is:inline>
(()=>{for(const root of document.querySelectorAll('[data-snippet="shop-category-header"]')){if(root.dataset.initialized)continue;root.dataset.initialized='true';root.classList.add('s-ready');const toggle=root.querySelector('.s-nav-toggle');toggle.addEventListener('click',()=>{const open=toggle.getAttribute('aria-expanded')!=='true';toggle.setAttribute('aria-expanded',String(open));root.classList.toggle('s-open',open);});root.addEventListener('keydown',e=>{if(e.key==='Escape'){root.querySelectorAll('details[open]').forEach(e=>e.open=false);if(root.classList.contains('s-open')){root.classList.remove('s-open');toggle.setAttribute('aria-expanded','false');toggle.focus();}}});}})();
</script>
Code tabs need JavaScript. All source formats are included in the open downloads.
Where this design fits Three distinct rows separate an announcement, the store identity and product categories. Basket and shop destinations are ordinary links for you to connect to your commerce system.
Announcement strip Product-category links Commerce destinations What is included The HTML ZIP includes a standalone demo, reusable markup, scoped CSS, its small JavaScript runtime, a license and setup notes. The Astro ZIP includes Snippet.astro. It can be imported into an existing Astro page or layout.
Set the right destinations Example navigation, policy and contact links must point to your actual pages. Update visible business details and telephone/email links together. Remove sections that your website does not need.
Add it to an HTML website Copy snippet.html into the relevant page section. Load snippet.css after your existing site stylesheet. The class prefix identifies this design. Load snippet.js once with defer. Keep the included keyboard behavior when adapting interactions. Replace example content and check mobile widths, zoom, links and keyboard focus in your actual website. Use it in Astro Copy Snippet.astro into src/components/, import it into your page or shared layout, and insert the component where the section belongs. Keep each generated prefix unique if you duplicate a component on one page.
Keep the section maintainable Start with the variables at the top of the CSS for background, text and accent colors. Preserve semantic labels and focus styles. Existing site selectors can still affect imported markup, so test the combined result. Read the complete setup notes .
