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.
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-contextual-menu;
For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.
For more information view the contextual menu design spec, which includes the specification in markdown format and a PNG image.
For more interactive elements that hide/show contentview the tooltips component.