Popover menu Create a popover menu by combining the Popover and Menu components. Demo

Choose one of these

  • Twig
    {% set popover_trigger %}
      {% include '@bolt-elements-button/button.twig' with {
        content: 'Popover menu',
        size: 'xsmall',
        attributes: {
          type: 'button'
        }
      } only %}
    {% endset %}
    {% set popover_content %}
      {% set list_items %}
        {% set menu_item_one %}
          {% include '@bolt-elements-text-link/text-link.twig' with {
            content: 'Menu Item One',
            attributes: {
              type: 'button',
            }
          } only %}
        {% endset %}
        {% set menu_item_two %}
          {% include '@bolt-elements-text-link/text-link.twig' with {
            content: 'Menu Item Two',
            attributes: {
              type: 'button',
            }
          } only %}
        {% endset %}
        {% set menu_item_three %}
          {% include '@bolt-elements-text-link/text-link.twig' with {
            content: 'Menu Item Three',
            attributes: {
              type: 'button',
            }
          } only %}
        {% endset %}
        {% include '@bolt-elements-menu/menu-item.twig' with {
          content: menu_item_one,
        } only %}
        {% include '@bolt-elements-menu/menu-item.twig' with {
          content: menu_item_two,
        } only %}
        {% include '@bolt-elements-menu/menu-item.twig' with {
          content: menu_item_three,
        } only %}
      {% endset %}
    
      {% include '@bolt-elements-menu/menu.twig' with {
        title: 'Choose one of these',
        content: list_items,
      } only %}
    {% endset %}
    
    {% include '@bolt-components-popover/popover.twig' with {
      trigger: popover_trigger,
      content: popover_content,
      spacing: 'none',
    } only %}
    HTML
    Not available in plain HTML. Please use Twig.