menu-button-pattern.md

title	ref	github	feedbackmail	permalink	sidebar	type_of_guidance	lang
Menu Button Pattern	/ARIA/apg/patterns/menu-button/	repository branch path w3c/aria-practices main content/patterns/menu-button/menu-button-pattern.html	public-aria-practices@w3.org	/ARIA/apg/patterns/menu-button/	true	APG	en

<title>Menu Button Pattern</title> <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script> <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script> <script> const addBodyClass = undefined; const enableSidebar = true; if (addBodyClass) document.body.classList.add(addBodyClass); if (enableSidebar) document.body.classList.add('has-sidebar'); </script> <script> const parentPage = window.location.pathname.match( /\/(patterns|practices|about)\// )?.[1]; if (parentPage) { const parentHref = 'a[href*="' + parentPage + '"]'; document.querySelector(parentHref).classList.add('active'); } </script>

<div>
  

  <section id="about">
    <h2>About This Pattern</h2>
    <p>
      A menu button is a <a href="../button/">button</a> that opens a menu as described in the <a href="../menubar/">Menu and Menubar Pattern</a>.
      It is often styled as a typical push button with a downward pointing arrow or triangle to hint that activating the button will display a menu.
    </p>
  </section>

  <section id="examples" class="examples-section">
    <img alt src="../../../../content-images/wai-aria-practices/images/pattern-menu-button.svg">
    <h2>Examples</h2>
    <ul>
      <li><a href="examples/menu-button-actions-active-descendant/">Action Menu Button Example Using aria-activedescendant</a>: A button that opens a menu of actions or commands where focus in the menu is managed using aria-activedescendant.</li>
      <li><a href="examples/menu-button-actions/">Action Menu Button Example Using element.focus()</a>: A menu button made from an HTML <code>button</code> element that opens a menu of actions or commands where focus in the menu is managed using <code>element.focus()</code>.</li>
      <li><a href="examples/menu-button-links/">Navigation Menu Button</a>: A menu button made from an HTML <code>a</code> element that opens a menu of items that behave as links.</li>
    </ul>
  </section>

  <section id="keyboard_interaction">
    <h2>Keyboard Interaction</h2>
    <ul>
      <li>
        With focus on the button:
        <ul>
          <li><kbd>Enter</kbd>: opens the menu and places focus on the first menu item.</li>
          <li><kbd>Space</kbd>: Opens the menu and places focus on the first menu item.</li>
          <li>(Optional) <kbd>Down Arrow</kbd>: opens the menu and moves focus to the first menu item.</li>
          <li>(Optional) <kbd>Up Arrow</kbd>: opens the menu and moves focus to the last menu item.</li>
        </ul>
      </li>
      <li>The keyboard behaviors needed after the menu is open are described in the <a href="../menubar/">Menu and Menubar Pattern</a>.</li>
    </ul>
  </section>

  <section id="roles_states_properties">
    <h2>WAI-ARIA Roles, States, and Properties</h2>
    <ul>
      <li>The element that opens the menu has role <a href="https://w3c.github.io/aria/#button" class="role-reference">button</a>.</li>
      <li>The element with role <code>button</code> has <a href="https://w3c.github.io/aria/#aria-haspopup" class="property-reference">aria-haspopup</a> set to either <code>menu</code> or <code>true</code>.</li>
      <li>
        When the menu is displayed, the element with role <code>button</code> has <a href="https://w3c.github.io/aria/#aria-expanded" class="state-reference">aria-expanded</a> set to <code>true</code>.
        When the menu is hidden, <code>aria-expanded</code> is set to <code>false</code>.
      </li>
      <li>
        The element that contains the menu items displayed by activating the button has role <a href="https://w3c.github.io/aria/#menu" class="role-reference">menu</a>.
      </li>
      <li>
        Optionally, the element with role <code>button</code> has a value specified for <a href="https://w3c.github.io/aria/#aria-controls" class="property-reference">aria-controls</a> that refers to the element with role <code>menu</code>.
      </li>
      <li>Additional roles, states, and properties needed for the menu element are described in the <a href="../menubar/">Menu and Menubar Pattern</a>.</li>
    </ul>
  </section>
</div>

<script src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}" data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" ></script> <script src="{{ '/content-assets/wai-aria-practices/shared/js/read-this-first.js' | relative_url }}" data-read-this-first="showImage:false" ></script>