Menu and menubar
Learn ARIA menu and menubar patterns.
role="menu" and role="menubar"
role="menu" is for a vertical drop-down menu; role="menubar" for a horizontal menu bar. In both, items take role="menuitem", role="menuitemcheckbox" or role="menuitemradio".
An app menu (File, Edit and so on) is a menubar; each heading's drop-down is a menu. Arrow keys move inside the menu; Esc closes it. For a normal site menu, <nav> and <ul> usually suffice; reach for ARIA menu roles only when app-like behaviour is needed.
aria-haspopup for submenus
When a menu item opens a submenu, aria-haspopup tells it. The clearest value is "menu"; "true", "listbox", "tree", "grid" and "dialog" also work. When the submenu is open, add aria-expanded="true".
Example: <button aria-haspopup="menu" aria-expanded="false">File</button>. Clicking the button opens a role="menu". The screen reader says 'has submenu' to ready the user; keyboard users can also reach the menu with the Alt key.
menuitemcheckbox and menuitemradio
Menu items sometimes carry a checked state. role="menuitemcheckbox" toggles one item on or off; state goes through aria-checked="true" or "false". role="menuitemradio" is for single-choice groups; picking one item clears the others.
A view menu sample: <li role="menuitemcheckbox" aria-checked="true">Dark theme</li>. For single-choice options, use menuitemradio; for instance a size picker Small/Medium/Large. These roles live inside a menu or menubar.
Exercise A menubar and a submenu skeleton
Add a <ul role="menubar"> to body; inside it put two <li role="menuitem">. Give the first menuitem aria-haspopup="menu" and aria-expanded="false"; its text is File. Inside that menuitem open a <ul role="menu">; inside it put one <li role="menuitem">New</li>. The second top-level menuitem text is Help.
Show example solution
<body>
<ul role="menubar">
<li role="menuitem" aria-haspopup="menu" aria-expanded="false">File
<ul role="menu">
<li role="menuitem">New</li>
</ul>
</li>
<li role="menuitem">Help</li>
</ul>
</body>Test yourself
-
Which role is used for a horizontal menu bar?
- menubar
- menu
- navigation
- tablist
Show answer
menubar — Correct. role="menubar" is for a horizontal menu bar.
-
Write the aria-haspopup value
<button aria-haspopup="____" aria-expanded="false">File</button>Show answer
<button aria-haspopup="menu" aria-expanded="false">File</button> -
Match each role to its place
- role="menu"
- Vertical menu
- role="menubar"
- Horizontal bar
- role="menuitem"
- Menu item
- aria-haspopup="menu"
- Submenu present