Dropdown Menu

Dropdown menu with keyboard navigation and ARIA management.

Dropdown Menu

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

<div style="position: relative;">
  <button
  class="af-btn"
  aria-haspopup="menu"
  aria-expanded="false"
  onclick="toggleDropdown(this)"
>
    Menu
  </button>
  <ul
  class="af-dropdown-menu"
  role="menu"
  hidden
  id="dropdown-menu"
>
    <li>
      <a href="#" role="menuitem">
        Item 1
      </a>
    </li>
    <li>
      <a href="#" role="menuitem">
        Item 2
      </a>
    </li>
    <li>
      <a href="#" role="menuitem">
        Item 3
      </a>
    </li>
  </ul>
</div>
<script>
  function toggleDropdown(button) { const menu = document.getElementById('dropdown-menu'); const isOpen = !menu.hidden; menu.hidden = isOpen; button.setAttribute('aria-expanded', !isOpen); }
</script>

CSS classes

• .af-dropdown-menu - Dropdown menu container
• .af-dropdown-menu-open - Show menu (alternative to removing hidden)
• [role="menu"] - ARIA role for menu pattern

Required ARIA

• role="menu" on the <ul> element
• role="menuitem" on each <a> or <button> inside
• aria-haspopup="menu" on trigger button
• aria-expanded on trigger button (true/false)
• hidden attribute to show/hide menu

Keyboard navigation (you must implement)

• Arrow keys to navigate items
• Enter/Space to activate
• Escape to close
• Home/End to jump to first/last item