Component

Reveal Menu

SCSS Location: /styles/scss/partial/_reveal-menu.scss
  • Status: Design
  • Status: Development
  • Status: Documentation

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.

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

  • At a 992px viewport and above, when the mouse enters the button.
  • At a 991px viewport and below, 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 a 992px viewport and above, when the mouse leaves the button or menu.
  • At a 991px viewport and below, 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.

Usage

Use the Reveal Menu in the utility navigation area of the site's main header.

A modified version of the globe-outline-default SVG should be used inline, and the paths styled with CSS depending on the expanded state of the button.

To accommodate multiple instances of the reveal menu on the page, Javascript should be 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”