Open demo

CSS code

HTML 
<header class="hs">
  <div class="main">
    <button class="toggle" type="button" aria-expanded="false" aria-controls="hs-cats" aria-label="Categories"><i></i><i></i><i></i></button>
    <a class="logo" href="#">martkt</a>
    <form class="searchbar" role="search" action="#"><input type="search" name="q" placeholder="Search 40,000 products…" aria-label="Search products"><button type="submit">Search</button></form>
    <div class="acts">
      <a class="act" href="#"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"><path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z"/></svg><span class="lbl">Saved</span><span class="badge">4<span class="sr-only"> items</span></span></a>
      <a class="act" href="#"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg><span class="lbl">Account</span></a>
      <a class="act" href="#"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4h2l2.4 11h11l2-8H6.3"/><circle cx="9.5" cy="19.5" r="1.5"/><circle cx="17.5" cy="19.5" r="1.5"/></svg><span class="lbl">Cart</span><span class="badge">2<span class="sr-only"> items</span></span></a>
    </div>
  </div>
  <nav class="cats" id="hs-cats" aria-label="Categories">
    <ul>
      <li><a class="deal" href="#"><svg aria-hidden="true" width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M13 2 4 14h7l-1 8 9-12h-7z"/></svg>Deals</a></li>
      <li><a href="#" aria-current="page">Electronics</a></li><li><a href="#">Home & Kitchen</a></li><li><a href="#">Fashion</a></li><li><a href="#">Beauty</a></li>
      <li><a href="#">Sports</a></li><li><a href="#">Toys</a></li><li><a href="#">Books</a></li><li><a href="#">Garden</a></li>
    </ul>
  </nav>
</header>
CSS 
/* Storefront header: logo, a search form, Saved / Account / Cart with count badges, and a category strip.
   The strip scrolls sideways if it runs out of room; below 992px it becomes a list behind the Categories button
   and the search moves onto its own row. */
.hs{--hs-red:#e11d48;--hs-ink:#191c20;--hs-muted:#3d434c;
  color:var(--hs-ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.hs,.hs *{box-sizing:border-box}
.hs ul{list-style:none;margin:0;padding:0}
.hs a{text-decoration:none}
.hs a:focus-visible,.hs button:focus-visible{outline:2px solid var(--hs-red);outline-offset:2px}
.hs .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hs .main{display:flex;align-items:center;gap:26px;padding:14px 32px;background:#fff}
.hs .logo{font-weight:900;font-size:1.3rem;letter-spacing:-.03em;color:var(--hs-red);border-radius:6px}
.hs .searchbar{flex:1;display:flex;max-width:560px;border-radius:10px}
.hs .searchbar:focus-within{outline:2px solid var(--hs-red);outline-offset:2px}
.hs .searchbar input{flex:1;min-width:0;padding:11px 16px;font:inherit;font-size:.9rem;color:var(--hs-ink);border:2px solid var(--hs-red);border-right:0;border-radius:10px 0 0 10px;outline:0}
.hs .searchbar button{font:inherit;font-weight:700;font-size:.88rem;color:#fff;background:var(--hs-red);border:2px solid var(--hs-red);padding:0 20px;border-radius:0 10px 10px 0;cursor:pointer}
.hs .searchbar button:hover{background:#c81a40;border-color:#c81a40}
.hs .acts{display:flex;gap:8px;margin-left:auto}
.hs .act{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 12px;border-radius:10px;color:var(--hs-muted);font-size:.7rem;font-weight:600}
.hs .act:hover{background:#f4f5f7}
.hs .badge{position:absolute;top:0;right:6px;min-width:17px;height:17px;padding:0 4px;display:flex;align-items:center;justify-content:center;border-radius:99px;background:var(--hs-red);color:#fff;font-size:.62rem;font-weight:800}
.hs .cats{background:#fff;border-top:1px solid #f0f1f3;border-bottom:1px solid #e7e9ec}
.hs .cats ul{display:flex;gap:2px;padding:0 32px;overflow-x:auto}
.hs .cats a{display:flex;align-items:center;gap:4px;padding:12px 14px;font-size:.85rem;font-weight:600;color:#4a515c;white-space:nowrap;border-bottom:2.5px solid transparent;transition:color .15s,border-color .15s}
.hs .cats a:focus-visible{outline-offset:-3px;border-radius:6px}
.hs .cats a:hover,.hs .cats a[aria-current="page"]{color:var(--hs-red);border-bottom-color:var(--hs-red)}
.hs .cats a.deal{color:var(--hs-red);font-weight:800}
.hs .toggle{display:none;width:42px;height:42px;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:none;border:1px solid #dcdfe4;border-radius:10px;cursor:pointer}
.hs .toggle i{display:block;width:18px;height:2px;border-radius:2px;background:var(--hs-ink);transition:transform .2s,opacity .2s}
.hs .toggle[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hs .toggle[aria-expanded="true"] i:nth-child(2){opacity:0}
.hs .toggle[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:991.98px){
  .hs .main{flex-wrap:wrap;gap:12px 10px;padding:12px 16px}
  .hs .toggle{display:flex}
  .hs .searchbar{order:9;flex-basis:100%;max-width:none}
  .hs .acts{gap:2px}
  .hs .cats{display:none}
  .hs .cats[data-open]{display:block}
  .hs .cats ul{flex-direction:column;padding:6px 16px 10px}
  .hs .cats a{padding:12px 10px;border-bottom:0;border-left:2.5px solid transparent}
  .hs .cats a:hover,.hs .cats a[aria-current="page"]{border-left-color:var(--hs-red);background:#fff1f3}
}
@media (max-width:480px){.hs .act{padding:8px 10px}.hs .act .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}}
@media (prefers-reduced-motion:reduce){.hs *{transition:none!important}}
JavaScript 
/* The Categories button (below 992px) toggles aria-expanded and data-open on the category nav;
   Esc closes it and returns focus to the button. */
(() => {
  const toggle = document.querySelector('.hs .toggle'); if (!toggle) return;
  const panel = document.getElementById(toggle.getAttribute('aria-controls'));
  const isOpen = () => toggle.getAttribute('aria-expanded') === 'true';
  const set = open => { toggle.setAttribute('aria-expanded', open); panel.toggleAttribute('data-open', open); };
  toggle.addEventListener('click', () => set(!isOpen()));
  document.addEventListener('keydown', e => { if (e.key === 'Escape' && isOpen()) { set(false); toggle.focus(); } });
})();

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS, Bootstrap 5.3.8 JS bundle

HTML 
<header class="hs">
  <div class="main d-flex align-items-center">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#hs-cats" aria-controls="hs-cats" aria-expanded="false" aria-label="Categories"><i></i><i></i><i></i></button>
    <a class="logo" href="#">martkt</a>
    <form class="input-group" role="search" action="#"><input class="form-control" type="search" name="q" placeholder="Search 40,000 products…" aria-label="Search products"><button class="btn" type="submit">Search</button></form>
    <div class="acts d-flex ms-auto">
      <a class="act" href="#"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"><path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z"/></svg><span class="lbl">Saved</span><span class="badge rounded-pill">4<span class="visually-hidden"> items</span></span></a>
      <a class="act" href="#"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg><span class="lbl">Account</span></a>
      <a class="act" href="#"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4h2l2.4 11h11l2-8H6.3"/><circle cx="9.5" cy="19.5" r="1.5"/><circle cx="17.5" cy="19.5" r="1.5"/></svg><span class="lbl">Cart</span><span class="badge rounded-pill">2<span class="visually-hidden"> items</span></span></a>
    </div>
  </div>
  <nav class="cats navbar navbar-expand-lg" aria-label="Categories">
    <div class="collapse navbar-collapse" id="hs-cats">
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link deal" href="#"><svg aria-hidden="true" width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M13 2 4 14h7l-1 8 9-12h-7z"/></svg>Deals</a></li>
        <li class="nav-item"><a class="nav-link active" href="#" aria-current="page">Electronics</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Home & Kitchen</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Fashion</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Beauty</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Sports</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Toys</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Books</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Garden</a></li>
      </ul>
    </div>
  </nav>
</header>
CSS 
/* Storefront header: an .input-group search, .badge counters, and the category strip as a
   .navbar-expand-lg whose .navbar-collapse is opened by the Categories toggler in the top row. */
.hs{--hs-red:#e11d48;--hs-ink:#191c20;--hs-muted:#3d434c}
.hs .main{gap:26px;padding:14px 32px;background:#fff}
.hs .logo{font-weight:900;font-size:1.3rem;letter-spacing:-.03em;color:var(--hs-red);text-decoration:none;border-radius:6px}
.hs .input-group{flex:1;max-width:560px;border-radius:10px}
.hs .input-group:focus-within{outline:2px solid var(--hs-red);outline-offset:2px}
.hs .input-group .form-control{padding:11px 16px;font-size:.9rem;color:var(--hs-ink);border:2px solid var(--hs-red);border-right:0;border-radius:10px 0 0 10px;box-shadow:none}
.hs .input-group .btn{--bs-btn-font-weight:700;--bs-btn-font-size:.88rem;--bs-btn-padding-x:20px;--bs-btn-border-width:2px;--bs-btn-color:#fff;--bs-btn-bg:var(--hs-red);--bs-btn-border-color:var(--hs-red);
  --bs-btn-hover-color:#fff;--bs-btn-hover-bg:#c81a40;--bs-btn-hover-border-color:#c81a40;--bs-btn-active-color:#fff;--bs-btn-active-bg:#c81a40;--bs-btn-active-border-color:#c81a40;border-radius:0 10px 10px 0}
.hs .acts{gap:8px}
.hs .act{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 12px;border-radius:10px;color:var(--hs-muted);font-size:.7rem;font-weight:600;text-decoration:none}
.hs .act:hover{background:#f4f5f7;color:var(--hs-muted)}
.hs .act .badge{--bs-badge-padding-x:4px;--bs-badge-padding-y:0;--bs-badge-font-size:.62rem;--bs-badge-font-weight:800;position:absolute;top:0;right:6px;min-width:17px;height:17px;
  display:flex;align-items:center;justify-content:center;background:var(--hs-red)}
.hs .cats{--bs-navbar-padding-y:0;--bs-navbar-padding-x:0;--bs-navbar-color:#4a515c;--bs-navbar-hover-color:var(--hs-red);--bs-navbar-active-color:var(--hs-red);--bs-navbar-nav-link-padding-x:14px;
  background:#fff;border-top:1px solid #f0f1f3;border-bottom:1px solid #e7e9ec}
.hs .cats .navbar-nav{--bs-nav-link-padding-y:12px;--bs-nav-link-font-weight:600;--bs-nav-link-font-size:.85rem;gap:2px;padding:0 32px;overflow-x:auto}
.hs .cats .nav-link{display:flex;align-items:center;gap:4px;white-space:nowrap;border-bottom:2.5px solid transparent;transition:color .15s,border-color .15s}
.hs .cats .nav-link:hover,.hs .cats .nav-link.active{border-bottom-color:var(--hs-red)}
.hs .cats .nav-link.deal{color:var(--hs-red);font-weight:800}
.hs a:focus-visible,.hs button:focus-visible{outline:2px solid var(--hs-red);outline-offset:2px;box-shadow:none}
.hs .cats .nav-link:focus-visible{outline-offset:-3px;border-radius:6px}
.hs .navbar-toggler{width:42px;height:42px;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px solid #dcdfe4;border-radius:10px}
.hs .navbar-toggler i{display:block;width:18px;height:2px;border-radius:2px;background:var(--hs-ink);transition:transform .2s,opacity .2s}
.hs .navbar-toggler[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hs .navbar-toggler[aria-expanded="true"] i:nth-child(2){opacity:0}
.hs .navbar-toggler[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (min-width:992px){.hs .navbar-toggler{display:none}}
@media (max-width:991.98px){
  .hs .main{flex-wrap:wrap;gap:12px 10px;padding:12px 16px}
  .hs .input-group{order:9;flex-basis:100%;max-width:none}
  .hs .acts{gap:2px}
  .hs .cats{border:0}
  .hs .cats .navbar-nav{padding:6px 16px 10px;border-bottom:1px solid #e7e9ec}
  .hs .cats .nav-link{padding:12px 10px;border-bottom:0;border-left:2.5px solid transparent}
  .hs .cats .nav-link:hover,.hs .cats .nav-link.active{border-left-color:var(--hs-red);background:#fff1f3}
}
@media (max-width:480px){.hs .act{padding:8px 10px}.hs .act .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}}
@media (prefers-reduced-motion:reduce){.hs *{transition:none!important}}
JavaScript 
/* Esc closes the category menu (below 992px) and returns focus to the Categories button. */
document.addEventListener('keydown', e => {
  const panel = document.querySelector('.hs .navbar-collapse.show');
  if (e.key !== 'Escape' || !panel) return;
  bootstrap.Collapse.getOrCreateInstance(panel).hide();
  document.querySelector(`[data-bs-target="#${panel.id}"]`).focus();
});

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<header class="hs text-hs-ink">
  <div class="flex items-center gap-[26px] bg-white px-8 py-3.5 max-lg:flex-wrap max-lg:gap-x-2.5 max-lg:gap-y-3 max-lg:px-4 max-lg:py-3">
    <button class="toggle group flex size-[42px] cursor-pointer flex-col items-center justify-center gap-1 rounded-[10px] border border-[#dcdfe4] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-hs-red lg:hidden" type="button" aria-expanded="false" aria-controls="hs-cats" aria-label="Categories">
      <i class="block h-0.5 w-[18px] rounded-sm bg-hs-ink transition-transform duration-200 group-aria-expanded:translate-y-1.5 group-aria-expanded:rotate-45 motion-reduce:transition-none"></i>
      <i class="block h-0.5 w-[18px] rounded-sm bg-hs-ink transition-opacity duration-200 group-aria-expanded:opacity-0 motion-reduce:transition-none"></i>
      <i class="block h-0.5 w-[18px] rounded-sm bg-hs-ink transition-transform duration-200 group-aria-expanded:-translate-y-1.5 group-aria-expanded:-rotate-45 motion-reduce:transition-none"></i>
    </button>
    <a class="rounded-md text-[1.3rem] font-black tracking-[-.03em] text-hs-red focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-hs-red" href="#">martkt</a>
    <form class="flex max-w-[560px] flex-1 rounded-[10px] focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-hs-red max-lg:order-9 max-lg:max-w-none max-lg:basis-full" role="search" action="#">
      <input class="min-w-0 flex-1 rounded-l-[10px] border-2 border-r-0 border-hs-red px-4 py-[11px] text-[.9rem] text-hs-ink outline-0" type="search" name="q" placeholder="Search 40,000 products…" aria-label="Search products">
      <button class="cursor-pointer rounded-r-[10px] border-2 border-hs-red bg-hs-red px-5 text-[.88rem] font-bold text-white hover:border-hs-red-dark hover:bg-hs-red-dark" type="submit">Search</button>
    </form>
    <div class="ml-auto flex gap-2 max-lg:gap-0.5">
      <a class="relative flex flex-col items-center gap-0.5 rounded-[10px] px-3 py-1.5 text-[.7rem] font-semibold text-hs-muted hover:bg-[#f4f5f7] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-hs-red max-[480px]:px-2.5 max-[480px]:py-2" href="#"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"><path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z"/></svg><span class="max-[480px]:sr-only">Saved</span><span class="absolute top-0 right-1.5 flex h-[17px] min-w-[17px] items-center justify-center rounded-full bg-hs-red px-1 text-[.62rem] font-extrabold text-white">4<span class="sr-only"> items</span></span></a>
      <a class="relative flex flex-col items-center gap-0.5 rounded-[10px] px-3 py-1.5 text-[.7rem] font-semibold text-hs-muted hover:bg-[#f4f5f7] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-hs-red max-[480px]:px-2.5 max-[480px]:py-2" href="#"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg><span class="max-[480px]:sr-only">Account</span></a>
      <a class="relative flex flex-col items-center gap-0.5 rounded-[10px] px-3 py-1.5 text-[.7rem] font-semibold text-hs-muted hover:bg-[#f4f5f7] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-hs-red max-[480px]:px-2.5 max-[480px]:py-2" href="#"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4h2l2.4 11h11l2-8H6.3"/><circle cx="9.5" cy="19.5" r="1.5"/><circle cx="17.5" cy="19.5" r="1.5"/></svg><span class="max-[480px]:sr-only">Cart</span><span class="absolute top-0 right-1.5 flex h-[17px] min-w-[17px] items-center justify-center rounded-full bg-hs-red px-1 text-[.62rem] font-extrabold text-white">2<span class="sr-only"> items</span></span></a>
    </div>
  </div>
  <nav class="hidden border-t border-b border-t-[#f0f1f3] border-b-[#e7e9ec] bg-white data-open:block lg:block max-lg:border-t-0" id="hs-cats" aria-label="Categories">
    <ul class="flex gap-0.5 overflow-x-auto px-8 max-lg:flex-col max-lg:px-4 max-lg:pt-1.5 max-lg:pb-2.5">
      <li><a class="flex items-center gap-1 border-b-[2.5px] border-transparent px-3.5 py-3 text-[.85rem] font-extrabold whitespace-nowrap text-hs-red transition-colors duration-150 hover:border-hs-red focus-visible:rounded-md focus-visible:outline-2 focus-visible:-outline-offset-3 focus-visible:outline-hs-red motion-reduce:transition-none max-lg:border-b-0 max-lg:border-l-[2.5px] max-lg:px-2.5 max-lg:hover:bg-[#fff1f3]" href="#"><svg aria-hidden="true" width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M13 2 4 14h7l-1 8 9-12h-7z"/></svg>Deals</a></li>
      <li><a class="flex items-center border-b-[2.5px] border-hs-red px-3.5 py-3 text-[.85rem] font-semibold whitespace-nowrap text-hs-red focus-visible:rounded-md focus-visible:outline-2 focus-visible:-outline-offset-3 focus-visible:outline-hs-red max-lg:border-b-0 max-lg:border-l-[2.5px] max-lg:bg-[#fff1f3] max-lg:px-2.5" href="#" aria-current="page">Electronics</a></li>
      <li><a class="flex items-center border-b-[2.5px] border-transparent px-3.5 py-3 text-[.85rem] font-semibold whitespace-nowrap text-[#4a515c] transition-colors duration-150 hover:border-hs-red hover:text-hs-red focus-visible:rounded-md focus-visible:outline-2 focus-visible:-outline-offset-3 focus-visible:outline-hs-red motion-reduce:transition-none max-lg:border-b-0 max-lg:border-l-[2.5px] max-lg:px-2.5 max-lg:hover:bg-[#fff1f3]" href="#">Home & Kitchen</a></li>
      <li><a class="flex items-center border-b-[2.5px] border-transparent px-3.5 py-3 text-[.85rem] font-semibold whitespace-nowrap text-[#4a515c] transition-colors duration-150 hover:border-hs-red hover:text-hs-red focus-visible:rounded-md focus-visible:outline-2 focus-visible:-outline-offset-3 focus-visible:outline-hs-red motion-reduce:transition-none max-lg:border-b-0 max-lg:border-l-[2.5px] max-lg:px-2.5 max-lg:hover:bg-[#fff1f3]" href="#">Fashion</a></li>
      <li><a class="flex items-center border-b-[2.5px] border-transparent px-3.5 py-3 text-[.85rem] font-semibold whitespace-nowrap text-[#4a515c] transition-colors duration-150 hover:border-hs-red hover:text-hs-red focus-visible:rounded-md focus-visible:outline-2 focus-visible:-outline-offset-3 focus-visible:outline-hs-red motion-reduce:transition-none max-lg:border-b-0 max-lg:border-l-[2.5px] max-lg:px-2.5 max-lg:hover:bg-[#fff1f3]" href="#">Beauty</a></li>
      <li><a class="flex items-center border-b-[2.5px] border-transparent px-3.5 py-3 text-[.85rem] font-semibold whitespace-nowrap text-[#4a515c] transition-colors duration-150 hover:border-hs-red hover:text-hs-red focus-visible:rounded-md focus-visible:outline-2 focus-visible:-outline-offset-3 focus-visible:outline-hs-red motion-reduce:transition-none max-lg:border-b-0 max-lg:border-l-[2.5px] max-lg:px-2.5 max-lg:hover:bg-[#fff1f3]" href="#">Sports</a></li>
      <li><a class="flex items-center border-b-[2.5px] border-transparent px-3.5 py-3 text-[.85rem] font-semibold whitespace-nowrap text-[#4a515c] transition-colors duration-150 hover:border-hs-red hover:text-hs-red focus-visible:rounded-md focus-visible:outline-2 focus-visible:-outline-offset-3 focus-visible:outline-hs-red motion-reduce:transition-none max-lg:border-b-0 max-lg:border-l-[2.5px] max-lg:px-2.5 max-lg:hover:bg-[#fff1f3]" href="#">Toys</a></li>
      <li><a class="flex items-center border-b-[2.5px] border-transparent px-3.5 py-3 text-[.85rem] font-semibold whitespace-nowrap text-[#4a515c] transition-colors duration-150 hover:border-hs-red hover:text-hs-red focus-visible:rounded-md focus-visible:outline-2 focus-visible:-outline-offset-3 focus-visible:outline-hs-red motion-reduce:transition-none max-lg:border-b-0 max-lg:border-l-[2.5px] max-lg:px-2.5 max-lg:hover:bg-[#fff1f3]" href="#">Books</a></li>
      <li><a class="flex items-center border-b-[2.5px] border-transparent px-3.5 py-3 text-[.85rem] font-semibold whitespace-nowrap text-[#4a515c] transition-colors duration-150 hover:border-hs-red hover:text-hs-red focus-visible:rounded-md focus-visible:outline-2 focus-visible:-outline-offset-3 focus-visible:outline-hs-red motion-reduce:transition-none max-lg:border-b-0 max-lg:border-l-[2.5px] max-lg:px-2.5 max-lg:hover:bg-[#fff1f3]" href="#">Garden</a></li>
    </ul>
  </nav>
</header>
CSS 
@theme {
  --breakpoint-lg: 62rem; /* 992px, the same collapse point as Bootstrap's navbar-expand-lg */
  --color-hs-red: #e11d48;
  --color-hs-red-dark: #c81a40;
  --color-hs-ink: #191c20;
  --color-hs-muted: #3d434c;
}
JavaScript 
/* The Categories button (below 992px) toggles aria-expanded and data-open on the category nav;
   Esc closes it and returns focus to the button. */
(() => {
  const toggle = document.querySelector('.hs .toggle'); if (!toggle) return;
  const panel = document.getElementById(toggle.getAttribute('aria-controls'));
  const isOpen = () => toggle.getAttribute('aria-expanded') === 'true';
  const set = open => { toggle.setAttribute('aria-expanded', open); panel.toggleAttribute('data-open', open); };
  toggle.addEventListener('click', () => set(!isOpen()));
  document.addEventListener('keydown', e => { if (e.key === 'Escape' && isOpen()) { set(false); toggle.focus(); } });
})();

About this set

A storefront header in two rows. The top row has the red martkt wordmark, a wide search form with a red outlined field and a Search button, and three icon links, Saved, Account and Cart, where Saved and Cart carry red count badges. The second row is a category strip, Deals with a lightning icon in bold red and then eight departments, with a red underline on hover and on the current department; if you add more departments than fit, the strip scrolls sideways instead of wrapping. Below 992px the search moves onto its own full-width row, the icon labels become visually hidden under 480px, and the category strip turns into a vertical list behind a Categories button at the left of the bar. Badge counts include hidden text, so the links read as Saved 4 items and Cart 2 items. Use it for online shops, marketplaces and catalogues. The Bootstrap version uses .input-group, .form-control, .badge and a .navbar-expand-lg for the strip, opened by a toggler in the top row.

What’s included

  • Search form with a search landmark and a visible focus ring
  • Saved, Account and Cart links with count badges
  • Category strip that scrolls sideways if it outgrows the width
  • Categories become a list behind a button below 992px
  • Inline SVG icons that follow the text colour

Accessibility

The search is a form with role="search" and a labelled input; its focus ring is drawn on the whole field with :focus-within. Categories are a nav labelled Categories with aria-current="page" on the current department, and the Categories button has aria-expanded and aria-controls and closes on Esc. Badge numbers carry hidden item text, icons are hidden from screen readers, and transitions stop under prefers-reduced-motion.

Customise it

Change --hs-red, --hs-ink and --hs-muted on .hs, and max-width on .searchbar for the field width. Bootstrap uses the same variables with --bs-badge-* and --bs-btn-*; in Tailwind edit the --color-hs-* theme colours.