Trigger

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.