Fake Menu Button

Introduction

A button that expands a popover containing a single column of links. Clicking any link will perform a URL navigation.

The fake menu can also contain buttons. This pattern is useful if your “dropdown” contains a mix of navigation items and items that execute JavaScript.

If you desire a dropdown menu that triggers a partial page reload instead of full page reload, please use the Menu Button pattern instead.

The distinction between menuitems and links is important! A menuitem is a command that executes JavaScript, whereas a link is a command that navigates to a url.

Best Practices

For mouse users, a fake menu button can be expanded on hover of a link, but we do not recommend doing so. For keyboard users, a fake menu button must always be triggered via a button click. If using a link as the host, a stealth button must be inserted for keyboard users. A stealth button is a button that only appears on keyboard focus.

Avoid using a fake menu for important and/or frequently navigated links. Links in a hidden overlay will not show up in screen reader’s list of links until the overlay is visible.

Interaction Design

This section provides interaction guidelines for keyboard, screen reader, and pointing devices.

Keyboard

If host is a link, pressing TAB key while focus is on host must move keyboard focus to stealth button host.

ENTER or SPACEBAR on button or stealth button host must expand overlay. Keyboard focus can be moved to first fake menu item.

With focus on fake menu item, TAB key must move focus to next fake menu item.

With focus on fake menu item, ESC must collapse the overlay and must return focus to host.

With focus on last fake menu item, TAB key must move to next interactive element on page and should collapse overlay.

ENTER key must activate any fake menu item with focus (i.e. links).

Screen Reader

Expanded state will be announced when focus is on button host or stealth button host.

Fake menu items must be identified as links or buttons (e.g. not menuitems).

Pointer

Hovering over a link host must expand overlay.

Hovering out of a link host must collapse overlay.

Clicking button host must toggle state of overlay.

ARIA Reference

This section gives an overview of our use of ARIA, within the specific context of this pattern.