An accessible, animated icon trigger for modals & off-canvas elements.

Trigger Component
Available for:
Buy Frames
Back to library

Trigger Introduction

The Trigger component was designed primarily as a trigger for mobile menus and off-canvas elements, but it can be used to trigger the Modal component or anything else that can be triggered via a class reference.

Activating the Trigger component

The Trigger component must be turned on in the Frames tab of the ACSS dashboard:

Activate Trigger Component
Activate Trigger Component

Once the component is activated, a block for adding it will become available inside the builder.

Adding the Trigger to a page

To add the Trigger to a page, select it from the blocks panel. You can place the trigger anywhere you’d like on the page.

Adding a Trigger to a Page
Adding a Trigger to a Page

Setting the animation style

The Trigger component animates between a traditional burger icon and a close icon. You can choose the style of animation from the Animation dropdown:

Trigger Animation Styles
Trigger Animation Styles

Basic Trigger styling

To style the Trigger, open the “Styles” panel:

Basic Trigger Styles
Basic Trigger Styles

You can control the trigger padding, trigger size, background color, line height, and line color from this panel. It should all be relatively straightforward.

Adding a text label

You can add an optional text label by activating the “Add Text” switch.

Trigger Text Label
Trigger Text Label

Once you activate this switch you’ll see additional options. You can set the text for the label in the “Trigger Text” input. You can also edit the text position, gap between the text and the Trigger, text color, and active text color.

Styling the active Trigger state

You can style the active state of the Trigger separately using the “Active Styles” panel:

Active Trigger Styling
Active Trigger Styling

You can change the background color, line color, and trigger size for the active state.

Linking the Trigger to a triggerable element

The Trigger is designed for use with a triggerable element that listens for a click on an element with a specific class. For example, our Modal.

Place the trigger class on the Trigger component and ensure the triggerable element is configured to listen for that class.

HTML5 Tags & Attributes

Other frames within this frame may contain specific HTML5 tags. You can see all related frames further down the page.

Accessibility Notes

The trigger is a button element and can be triggered with a keyboard. Additionally, you can easily set its Aria Label from the main Trigger settings panel in the builder.


Use the related frames section above to check FAQs for other frames related to this frame if you don't see your question here.