Kodza
Browse · 148

Header Shop

A shop header: the name, the categories, a search that opens over them, the account and a bag whose count rolls when something is added. Below 900 px, a menu the page steps aside for.

View the code Ask your AI
Header No dependencies headershop headerecommerce headerwoocommerce headersearch barcart iconcart countsticky headermobile menuside menu Added Oct 2026
/anim/header-shop/ GitHub Fullscreen

With your AI

Just ask.

Say it to your AI. It gets the exact code below, not its best guess, and knows where it goes.

Add the Kodza Header Shop to my page.

Not plugged in yet?
claude mcp add -t http kodza https://kodza.dev/api/mcp
Also in Codex, Cursor and VS Code.
kodza-header-shop.html 
<header class="kodza-header-shop">
  <div class="kodza-header-shop__row">
    <a class="kodza-header-shop__logo" href="/" aria-label="Galet, home">
      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 12.5C3 7 7.5 3 13 3s8 3.4 8 7.6C21 15.6 16.6 18 11.4 18 6.4 18 3 16.2 3 12.5z" /></svg>
      <span>galet</span>
    </a>
    <nav class="kodza-header-shop__menu" aria-label="Shop">
      <ul class="kodza-header-shop__links">
        <li><a class="kodza-header-shop__item" href="#" aria-current="page">New in</a></li>
        <li><a class="kodza-header-shop__item" href="#">Kitchen</a></li>
        <li><a class="kodza-header-shop__item" href="#">Table</a></li>
        <li><a class="kodza-header-shop__item" href="#">Bath</a></li>
        <li><a class="kodza-header-shop__item" href="#">Linen</a></li>
        <li><a class="kodza-header-shop__item" href="#">Sale</a></li>
      </ul>
    </nav>
    <form class="kodza-header-shop__search" role="search" action="/">
      <div class="kodza-header-shop__field">
        <input class="kodza-header-shop__input" type="search" name="s" placeholder="Search Galet" aria-label="Search the shop">
        <input type="hidden" name="post_type" value="product">
      </div>
      <button class="kodza-header-shop__find" type="button" aria-label="Search" aria-expanded="false" data-close="Close search">
        <svg class="kodza-header-shop__glass" viewBox="0 0 24 24" aria-hidden="true"><circle cx="10.8" cy="10.8" r="6.2" /><path d="m15.4 15.4 4.6 4.6" /></svg>
        <span class="kodza-header-shop__x" aria-hidden="true"></span>
      </button>
    </form>
    <div class="kodza-header-shop__end">
      <a class="kodza-header-shop__account" href="/account/" aria-label="Account">
        <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8.2" r="3.6" /><path d="M4.8 20.2c.9-3.6 3.7-5.6 7.2-5.6s6.3 2 7.2 5.6" /></svg>
      </a>
      <a class="kodza-header-shop__cart" href="/cart/" aria-label="Bag, 2 items" data-count="2">
        <svg class="kodza-header-shop__bag" viewBox="0 0 24 24" aria-hidden="true"><path d="M5.2 8.2h13.6l-1 11a2 2 0 0 1-2 1.8H8.2a2 2 0 0 1-2-1.8z" /><path d="M9 8.2V6.8a3 3 0 0 1 6 0v1.4" /></svg>
        <span class="kodza-header-shop__count" aria-hidden="true">2</span>
      </a>
      <button class="kodza-header-shop__toggle" type="button" aria-haspopup="dialog" aria-expanded="false"><span class="kodza-header-shop__lines" aria-hidden="true"></span>Menu</button>
    </div>
  </div>
  <div class="kodza-header-shop__panel" role="dialog" aria-modal="true" aria-label="Menu" tabindex="-1" hidden>
    <span class="kodza-header-shop__ground" aria-hidden="true"></span>
    <span class="kodza-header-shop__card" aria-hidden="true"></span>
    <span class="kodza-header-shop__shade" aria-hidden="true"></span>
    <div class="kodza-header-shop__side">
      <div class="kodza-header-shop__bar">
        <p class="kodza-header-shop__label">Your bag stays put.</p>
        <button class="kodza-header-shop__close" type="button"><span class="kodza-header-shop__cross" aria-hidden="true"></span><span class="kodza-header-shop__say"><span>Close</span></span></button>
      </div>
      <!-- Written from the categories in the bar, unless you put your own links here -->
      <nav class="kodza-header-shop__nav" aria-label="Shop, menu"></nav>
      <div class="kodza-header-shop__info">
        <div class="kodza-header-shop__group">
          <p class="kodza-header-shop__small">Your account</p>
          <p class="kodza-header-shop__pair"><a href="/account/">Sign in</a><a href="/account/orders/">Your orders</a></p>
        </div>
        <div class="kodza-header-shop__group">
          <p class="kodza-header-shop__small">Help</p>
          <p class="kodza-header-shop__pair"><a href="mailto:hello@galet.example">hello@galet.example</a><span>Free returns, 30 days</span></p>
        </div>
        <p class="kodza-header-shop__small">Esc, or click the page.</p>
      </div>
    </div>
  </div>
</header>

Checked

Checked before you paste.

Robots poked at it before you did. Every component goes through the same checks, and again each time it changes.

What ranLast run
Accessibilityaxe-core 4.10.2: the WCAG 2.1 A and AA rules, plus best practices. 0 issues
KeyboardThe Tab key gets there, and the focus ring shows when it does. Passed
Reduced motionTurn on reduced motion and what moved just appears. Nothing loops. Passed
Light and darkThe same checks on both themes, contrast included. Passed
WordPressPasted into Twenty Twenty-Five, Twenty Twenty-One, Astra, Blocksy, GeneratePress, Hello Elementor, Kadence and OceanWP. Nothing to flag. 8 / 8 themes
Robots checked this. A human with VoiceOver hasn't yet.
KeyboardPress them in the preview
On the glass
  • Opens the search over the categories, or folds itEnter/Space
In the search field
  • Searches the shopEnter
  • Folds the search, focus back on the glassEsc
On the Menu button, below 900 px
  • Opens the menu on the current link, or the firstEnter/Space
In the menu
  • Next or previous link, round and round↓/↑
  • First or last linkHome/End
  • Stays inside the menu, round and roundTab/⇧Tab
  • Held back, the page behind stays putPage Up/Page Down
Anywhere, while it's open
  • Brings the page back, focus back on MenuEsc

More like this

More in Header

See all Header Request a component