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


If you require a drop-down button with a state indicator then the p-contextual-menu__toggle class can be used alongside the p-icon and p-button components.

Information:This example makes use of additional components

View example of the contextual menu pattern


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.


To import just this component into your project, copy the snippet below and include it in your main Sass file.

@import 'patterns_contextual-menu';
@include vf-p-contextual-menu;

// when using the menu with dropdown button you need to include buttons and icon as well
@import 'patterns_buttons';
@include vf-p-buttons;

@import 'patterns_icons';
@include vf-p-icons-common;
@include vf-p-icon-contextual-menu;

For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.


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.