Jump to main content

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.

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 Vanilla and include base mixins
// this only needs to happen once in a given project
@import 'vanilla-framework';
@include vf-base;
@include vf-p-contextual-menu;

// when using the menu with dropdown button you need to include buttons and icon as well
@include vf-p-buttons;
@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.

React

You can use contextual menu in React by installing our react-component library and importing ContextualMenu component.

See the documentation for our React ContextualMenu component

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