Popover menu
Create a popover menu by combining the Popover and Menu components.
Demo
Twig
{% set popover_trigger %}
{% include '@bolt-elements-button/button.twig' with {
content: 'Popover menu',
size: 'xsmall',
attributes: {
type: 'button'
}
} only %}
{% endset %}
{% set popover_content %}
{% include '@bolt-components-menu/menu.twig' with {
title: 'Choose one of these',
items: [
{
content: 'Menu item 1',
},
{
content: 'Menu item 2',
},
{
content: 'Menu item 3',
},
]
} only %}
{% endset %}
{% include '@bolt-components-popover/popover.twig' with {
trigger: popover_trigger,
content: popover_content,
spacing: 'none',
} only %}
HTML
<bolt-popover spacing="none">
<button type="button" class="e-bolt-button e-bolt-button--small">
Popover menu
</button>
<div slot="content">
<bolt-menu>
<bolt-menu-item>
Menu Item 1
</bolt-menu-item>
<bolt-menu-item>
Menu Item 2
</bolt-menu-item>
<bolt-menu-item>
Menu Item 3
</bolt-menu-item>
</bolt-menu>
</div>
</bolt-popover>