Nav Collapse

Mobile navigation menu toggle with focus trap. Perfect for responsive navigation menus.

Nav Collapse

Use CSS classes with your own JavaScript for toggle behaviour. You manage ARIA attributes and focus trapping:

<div class="af-nav-collapse">
  <button
  class="af-btn"
  aria-expanded="false"
  aria-controls="nav-menu"
  onclick="toggleNav(this)"
>
    ☰ Menu
  </button>
  <nav id="nav-menu" hidden>
    <ul>
      <li>
        <a href="#">
          Home
        </a>
      </li>
      <li>
        <a href="#">
          About
        </a>
      </li>
      <li>
        <a href="#">
          Contact
        </a>
      </li>
    </ul>
  </nav>
</div>
<script>
  function toggleNav(button) { const menu = document.getElementById('nav-menu'); const isOpen = !menu.hidden; menu.hidden = isOpen; button.setAttribute('aria-expanded', !isOpen); // Implement focus trap when open if (!isOpen) { // Focus first link const firstLink = menu.querySelector('a'); if (firstLink) firstLink.focus(); } }
</script>

CSS classes

• .af-nav-collapse - Container for collapsible navigation
• .af-nav-collapse-open - Show menu (alternative to removing hidden)

Required ARIA

• aria-expanded on trigger button (true/false)
• aria-controls linking trigger to menu
• hidden attribute to show/hide menu

Features you must implement

• Focus trapping when menu is open
• Escape key to close
• Return focus to trigger on close
• Outside click to close (optional)