Disclosure Pattern for Navigation Menus

The following example demonstrates using the disclosure design pattern to create a dropdown navigation bar.

Note: although this pattern uses the word "menu" in the colloquial sense to refer to a set of navigation links, it does not use a menu role.

Similar examples include:

Example

Include arrow key navigation

Sample content section. Activating a link above will update and navigate to this region.

Since this disclosure example is being used as navigation, the entire control is wrapped in a navigation landmark. Each disclosure button / container pair is contained within a list item so that the number of top-level items is semantically available.
Arrow keys supplement, but do not replace, tabbing between the top-level disclosure buttons. Home and End likewise allow jumping to the first and last button.
Escape pressed when focus is within the navigation region closes any open dropdowns. Moving focus out of the navigation region also closes open dropdowns. Implementing the escape key behavior is necessary to meet the WCAG 2.1 1.4.13: Content on Hover or Focus criterion.
Arrow key support prevents the default page scroll behavior when focus is on the disclosure dropdown.
Arrow key navigation is primarily for the benefit of keyboard users who are not running a screen reader; screen readers will usually intercept the arrow keys and not pass them to the page.
The visual indicator of the show/hide state is created using CSS ::after pseudo element border styles so the caret is reliably rendered in high contrast mode of operating systems and browsers.

Key	Function
`Tab`	Moves keyboard focus between top-level buttons, and into and then through the links in any open dropdown.
`Space` or `Enter`	Activates the disclosure button, which toggles the visibility of the dropdown.
`Escape`	Closes the open dropdown.
`Arrow keys (optional)`	Moves focus between the top-level disclosure buttons and between open dropdown links.
`Home / End (optional)`	Moves focus to the first or last disclosure button, or first or last open dropdown's links.

Attribute	Element	Usage
`aria-controls="IDREF"`	`button`	The disclosure button controls visibility of the container identified by the `IDREF` value.
`aria-expanded="false"`	`button`	Indicates that the container controlled by the disclosure button is hidden. CSS attribute selectors (e.g. `[aria-expanded="false"]`) are used to synchronize the visual states with the value of the `aria-expanded` attribute.
`aria-expanded="true"`	`button`	Indicates that the container controlled by the disclosure button is visible. CSS attribute selectors (e.g. `[aria-expanded="true"]`) are used to synchronize the visual states with the value of the `aria-expanded` attribute.