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
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>