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 is 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

Indicator

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

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.

Accessibility

When using the p-contextual-menu__toggle class on a button element, please ensure that the button label contains a trailing ellipsis …, e.g. "Take action…". This is a convention used to indicate that the button launches a dialog.

In cases where a contextual menu is shown on click, focus should be set within the menu element, using JavaScript.

Theming

The contextual menu uses Vanilla's light theme by default. There are two ways to switch between the light and the dark themes:

Change the default: go to _settings_themes.scss and set $theme-default-p-contextual-menu to dark
Override the default by adding a state to p-contextual-menu: is-dark when the default navigation is light, or is-light when the default has been changed to dark:

View example of the contextual menu with an is-dark class

Import

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-chevron;

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

Design

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