Drop-down menu

Sommaire

Principle

A drop-down menu is usually a series of “buttons” displayed side by side. A sub-menu is displayed below the activated button.

Core HTML base

<nav role="navigation" aria-label="Main menu">
  <ul>
    <li>
      <button aria-expanded="false">First-level button with a hidden submenu </button>
      <ul class="non-visible">
        <li><a href="…">Second-level link</a></li>
        <li><a href="…">Second-level link</a></li>
        […]
      </ul>
    </li>
    <li>
      <button aria-expanded="true">First-level button with a displayed sub-menu</button>
      <ul class="visible">
        <li><a href="…">Second-level link</a></li>
        <li><a href="…">Second-level link </a></li>
        […]
      </ul>
    </li>
    <li><a href="…">First-level link</a></li>
    […]
  </ul>
</nav>

ARIA roles, states and properties

Keyboard interactions

Enter or Spacebar

Esc

If the keyboard focus is positioned on one of the items in a displayed sub-menu, this key moves the keyboard focus to the first-level button that triggered the sub menu display, and then closes the sub menu.

Note

The sub-menus that are not displayed must be hidden using  display: none and/or visibility: hidden.

Comments

Add a comment

Required fields are marked *.

Back to top