p-contextual-menu__toggle and what it controls
The target element will be hidden or shown with
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.
If you require a drop-down button with a state indicator then the
p-contextual-menu__toggle class can be used alongside the
Information:This example makes use of additional components
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.
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.
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
- Override the default by adding a state to
is-darkwhen the default navigation is light, or
is-lightwhen the default has been changed to dark:
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.
You can use contextual menu in React by installing our react-component library and importing
For more interactive elements that hide/show contentview the tooltips component.