Floating Action Buttons

A sticky list container for action buttons.

In Progress (Unreleased)

Twig Usage

{# Assemble the button(s) as list item(s) #}
{% set scroll_to_top_button %}
  {% set trigger %}
    {% set icon_chevron_up %}
      {% include '@bolt-components-icon/icon.twig' with {
        name: 'chevron-up',
      } only %}
    {% endset %}
    {% include '@bolt-elements-button/button.twig' with {
      content: 'Back to top',
      border_radius: 'full',
      icon_only: icon_chevron_up,
      attributes: {
        href: '#main-content',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-tooltip/tooltip.twig' with {
    content: 'Back to top',
    placement: 'left',
    trigger: trigger,
  } only %}
{% endset %}
{% set fab_list_items %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with {
    content: scroll_to_top_button,
  } 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 %}

Schema

Floating Action Buttons (floating-action-buttons.twig)

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal attributes object. Applies extra HTML attributes to the parent element.	`object`	—	—
content	Renders a list of buttons. Use the floating-action-buttons-ul.twig template to render a list.	`any`	—	—

Floating Action Buttons UL (floating-action-buttons-ul.twig)

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal attributes object. Applies extra HTML attributes to the parent element.	`object`	—	—
content	Renders a list of buttons. Use the floating-action-buttons-li.twig template to render each list item.	`any`	—	—

Floating Action Buttons LI (floating-action-buttons-li.twig)

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal attributes object. Applies extra HTML attributes to the parent element.	`object`	—	—
content	Renders a button (icon-only button with tooltip is recommended). Use the Button element or the floating-action-buttons-toggle-button.twig template.	`any`	—	—
children	Renders a list of secondary buttons. Use the floating-action-buttons-ul.twig template to render a list. Only use this prop if the floating-action-buttons-toggle-button.twig template is used for the content prop.	`any`	—	—
show_on_scroll_selector	Select an element (usually a page title) which when scrolled offscreen will show/hide the list-item. Must be a valid CSS selector.	`string`	—	—

Floating Action Buttons Toggle Button (floating-action-buttons-toggle-button.twig)

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal attributes object. Applies extra HTML attributes to the parent element.	`object`	—	—
content *	Content of the button.	`any`	—	—
hierarchy	Style the button appropriately based on information hierarchy.	`string`	`primary`	`primary`, `secondary`, `tertiary`, `transparent`
size	Control the font-size and padding of the button.	`string`	`medium`	`xsmall`, `small`, `medium`, `large`
border_radius	Control the border radius of the button.	`string`	`small`	`small`, `large`, `full`

Install

npm install @bolt/components-floating-action-buttons

Dependencies

@bolt/core-v3.x

Basic floating action buttons

Floating action buttons (FAB) are a list of fixed positioned buttons placed on the right side of the screen.

Important Notes:

One or many action buttons can be used.

The most common use case is a “back to top” button.

When using a Button element as FAB, it is recommended to use an icon-only button with tooltip. Set placement of tooltip to left to avoid clashing with other buttons.

Demo

View full page demo

Twig

{# Assemble the button(s) as list item(s) #}
{% set scroll_to_top_button %}
  {% set trigger %}
    {% set icon_chevron_up %}
      {% include '@bolt-components-icon/icon.twig' with {
        name: 'chevron-up',
      } only %}
    {% endset %}
    {% include '@bolt-elements-button/button.twig' with {
      content: 'Back to top',
      border_radius: 'full',
      icon_only: icon_chevron_up,
      attributes: {
        href: '#main-content',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-tooltip/tooltip.twig' with {
    content: 'Back to top',
    placement: 'left',
    trigger: trigger,
  } only %}
{% endset %}
{% set fab_list_items %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with {
    content: scroll_to_top_button,
  } 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.

Show FAB on scroll

The show_on_scroll_selector prop on the list item allows floating action buttons to show on scroll.

Important Notes:

Use a CSS selector to indicate the element that must be scrolled past to reveal the floating action buttons.

To avoid animation jump, please only use this on the first item in a FAB list.

Demo

View full page demo

Twig

{% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with {
    content: content,
    show_on_scroll_selector: '#main-title'
  } only %}

HTML

Not available in plain HTML. Please use Twig.

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.

Customize FAB placement with X and Y offsets

There are 2 CSS custom properties available for use to further customize the placement of floating action buttons.

Important Notes:

--c-bolt-floating-action-buttons-offset-x: the distance between the FAB and the right side of the screen.

--c-bolt-floating-action-buttons-offset-y: the distance between the FAB and the bottom of the screen.

Demo

View full page demo

Twig

{% include '@bolt-components-floating-action-buttons/floating-action-buttons.twig' with {
  content: _content,
  attributes: {
    style: '--c-bolt-floating-action-buttons-offset-y: 100px;'
  }
} only %}

HTML

Not available in plain HTML. Please use Twig.