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.


View example of the contextual menu pattern


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.