Reveal Menu

Description

A menu of links which is visually hidden by default and revealed by hovering, focusing, or clicking an associated button.

Guidelines

The menu button should show an active state only when the menu is expanded, not on focus of the menu button.

Depending on the context, the Reveal Menu will have specific display and click or hover behavior at a breakpoint of either 768px or 992px.

The menu should expand, and the menu button should be given an attribute of aria-expanded="true", according to the following actions:

• At or above the context-specified breakpoint, when the mouse enters the button.
• Below the context-specified breakpoint, when the button is clicked.
• At any screen size if the menu button is focused and the ENTER, SPACEBAR, or DOWN ARROW is pressed.

The menu should collapse, and the menu button should be given an attribute of aria-expanded="false", according to the following actions:

• At or above the context-specified breakpoint, when the mouse leaves the button or menu.
• Below the context-specified breakpoint, when the button is clicked.
• At any screen size if the menu button is blurred.
• At any screen size if any menu links are blurred.
• At any screen size if any menu links are focsued and the ESC key is pressed.
• At any screen size if any menu links are clicked, or chosen with the ENTER or SPACEBAR key.

When the menu is expanded, focus should jump to the first menu link.

When a menu link is focused, users should be able to use the UP ARRROW and DOWN ARROW keys to cycle through the menu links.

When a menu link is focused, users should be able to type any letter, and the closest matching menu item should be focused.

Use the attribute data-toggle-mobile="false" to specify that the Reveal Menu should always have its menu displayed below the context-specific breakpoint.

Use the attribute data-expand-direction to specify that the Reveal Menu should expand in the “up” or “down” direction.

Usage

To accommodate multiple instances of the reveal menu on the page, instead of adding these attributes with server-side script, Javascript is used to apply ID and ARIA attribute values to both the button and list as follows:

• Each button should be given a numerically incremented ID of “reveal-menu-button-X”
• Each button should be given a numerically incremented aria-controls value of “reveal-menu-list-X”
• Each list should be given a numerically incremented ID of “reveal-menu-list-X”
• Each list should be given a numerically incremented aria-labelledby value of “reveal-menu-list-X”