Popover Menu
Create a popover menu by combining the Popover and Menu components.
Important Notes:
It is recommended to set the spacing to none because the Menu component already has spacing built in.
Demo
Choose one of these
Twig
{% set trigger %}
{% include '@bolt-elements-button/button.twig' with {
content: 'This triggers a popover menu',
attributes: {
type: 'button'
}
} only %}
{% endset %}
{% set 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 2',
},
]
} only %}
{% endset %}
{% include '@bolt-components-popover/popover.twig' with {
trigger: trigger,
content: content,
spacing: 'none',
} only %}
HTML
<bolt-popover>
<button type="button" class="e-bolt-button">
This triggers a popover
</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>