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

View example of the contextual menu pattern

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.