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
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
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
todark
- Override the default by adding a state to
p-contextual-menu
:is-dark
when the default navigation is light, oris-light
when the default has been changed to dark:
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.
Related
For more interactive elements that hide/show contentview the tooltips component.