Contextual menu


A contextual menu can be applied to any button, link or navigation item that requires a secondary menu. To interact with the menu it will require some javascript to hide/show each pattern. This achieved by finding the toggle element p-contextual-menu__toggle and what it controls aria-controls.

The target element will be hidden or shown with aria-hidden="true" or false. The control element will change to aria-expanded so screen readers will know it’s active.

Using direction modifiers will change the placement of the drop-down menu. By default alignment is to the right of the parent pattern.

.p-contextual-menu
.p-contextual-menu--left
.p-contextual-menu--center

Warning:This pattern requires JS to be functional.

View example of the contextual menu pattern

Functionality

Please ensure the aria-control attribute matches an ID of an element. If aria-expanded is true, then the contextual menu will be open by default. When clicking on the p-contextual-menu__toggle, you must toggle the aria-expanded attribute on the toggle and the aria-hidden attribute on the drop-down.

Design

For more information view the contextual menu design spec, which includes the specification in markdown format and a PNG image.

For more interactive elements that hide/show contentview the tooltips component.