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--centerIf 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:
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.
The contextual menu uses the default inherited theme of the page or parent element. To override the default add is-dark or is-light class to the contextual menu.
View example of the contextual menu with an is-dark class
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.
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.