Kodza
Browse · 142

Multi-Level Menu

A burger drawer for menus with levels: each sub-menu slides in over the last, the top row rolls to the level's name and leads back, and it reads the list wp_nav_menu() writes.

View the code Ask your AI
Navigation No dependencies menusubmenudrill downburgernavmobile menuwp_nav_menu Added Oct 2026
/anim/multi-level-menu/ 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 Multi-Level Menu 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-multi-level-menu.html 
<div class="kodza-multi-level">
  <button class="kodza-multi-level__toggle" type="button" aria-haspopup="dialog" aria-expanded="false"><span class="kodza-multi-level__lines" aria-hidden="true"></span>Menu</button>
  <div class="kodza-multi-level__panel" role="dialog" aria-modal="true" aria-label="Menu" tabindex="-1" hidden>
    <span class="kodza-multi-level__shade" aria-hidden="true"></span>
    <div class="kodza-multi-level__sheet">
      <div class="kodza-multi-level__bar">
        <button class="kodza-multi-level__close" type="button"><span class="kodza-multi-level__cross" aria-hidden="true"></span><span class="kodza-multi-level__say"><span>Close</span></span></button>
      </div>
      <button class="kodza-multi-level__back" type="button" disabled aria-hidden="true"><span class="kodza-multi-level__arrow" aria-hidden="true"></span><span class="kodza-multi-level__title"><span class="kodza-multi-level__heading"><span>Shop</span></span></span></button>
      <nav class="kodza-multi-level__nav" aria-label="Shop">
        <ul>
          <li><a href="#">New in</a></li>
          <li><a href="#keyboards">Keyboards</a>
            <ul>
              <li><a href="#">Full size</a></li>
              <li><a href="#compact">Compact</a>
                <ul>
                  <li><a href="#" aria-current="page">75%</a></li>
                  <li><a href="#">65%</a></li>
                  <li><a href="#">60%</a></li>
                </ul>
              </li>
              <li><a href="#">Low profile</a></li>
              <li><a href="#">Keycaps</a></li>
            </ul>
          </li>
          <li><a href="#desks">Desks</a>
            <ul>
              <li><a href="#">Standing</a></li>
              <li><a href="#">Fixed</a></li>
              <li><a href="#">Cable trays</a></li>
            </ul>
          </li>
          <li><a href="#lighting">Lighting</a>
            <ul>
              <li><a href="#">Desk lamps</a></li>
              <li><a href="#">Monitor bars</a></li>
              <li><a href="#">Light strips</a></li>
            </ul>
          </li>
          <li><a href="#audio">Audio</a>
            <ul>
              <li><a href="#">Headphones</a></li>
              <li><a href="#">Speakers</a></li>
              <li><a href="#">Microphones</a></li>
            </ul>
          </li>
          <li><a href="#">Sale</a></li>
        </ul>
      </nav>
      <div class="kodza-multi-level__foot">
        <p class="kodza-multi-level__more"><a href="#">Account</a><a href="#">Orders</a><a href="#">Help</a></p>
        <p class="kodza-multi-level__small">Ships in 48 h. Returns are free.</p>
      </div>
    </div>
  </div>
</div>

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 button
  • Opens it on the current branch, or the first rowEnter/Space
On a row with a level
  • Opens its level, focus on its first row→/Enter/Space
Inside a level
  • Back up one level, focus on the row you came from←/Esc
In the menu
  • Next or previous row, round and round↓/↑
  • First or last rowHome/End
  • Stays inside the menu, round and roundTab/⇧Tab
  • Held back, the page behind stays putPage Up/Page Down
Anywhere, while it's open
  • Closes it from the first level, focus back on MenuEsc

More like this

More in Navigation

See all Navigation Request a component