Toggle on/off more buttons A toggle button can toggle on/off a secondary list of action buttons. This specific button comes with the FAB component. Important Notes: The floating-action-buttons-toggle-button.twig template renders the toggle button. The toogle button is recommended if there is a total of more than 3 action buttons. Reference the schema for all options. Demo View full page demo
Twig
{# Set up the toggle button #}
{% set more_button %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-toggle-button.twig' with {
    content: 'More actions',
    border_radius: 'full',
    attributes: {
      type: 'button',
    }
  } only %}
{% endset %}

{# Set up the children list the button is going to toggle #}
{% set more_actions_list_items %}
  {% set placeholder_button %}
    {% set icon_link %}
      {% include '@bolt-elements-icon/icon.twig' with {
        name: 'external-link',
      } only %}
    {% endset %}
    {% include '@bolt-components-tooltip/tooltip.twig' with {
      content: 'Go to Google',
      placement: 'left',
      trigger: include('@bolt-elements-button/button.twig', {
        content: 'Go to Google',
        size: 'small',
        border_radius: 'full',
        icon_only: icon_link,
        hierarchy: 'secondary',
        attributes: {
          href: 'https://www.google.com',
          rel: 'noopener',
          target: '_blank'
        },
      }),
    } only %}
  {% endset %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with {
    content: placeholder_button,
  } only %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with {
    content: placeholder_button,
  } only %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with {
    content: placeholder_button,
  } only %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with {
    content: placeholder_button,
  } only %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with {
    content: placeholder_button,
  } only %}
{% endset %}
{% set more_actions_list %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-ul.twig' with {
    content: more_actions_list_items,
  } only %}
{% endset %}

{# Assemble the toggle button and the children list #}
{% set fab_list_items %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with {
    content: more_button,
    children: more_actions_list
  } only %}
{% endset %}

{# Pass the list items into the list template #}
{% set fab_list %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-ul.twig' with {
    content: fab_list_items,
  } only %}
{% endset %}

{# Pass the list into the main template #}
{% include '@bolt-components-floating-action-buttons/floating-action-buttons.twig' with {
  content: fab_list,
} only %}
HTML
Not available in plain HTML. Please use Twig.