Slidebar Menu

The Slidable Menu Plugin creates an element that inserts a menu, which appears on the right or left of the screen with a sliding effect. It is usually for apps on mobile devices.

Note: Only one of these elements can be on a page.

Slidebar Menu

Options

Enter the options the menu should offer. Type one entry per line and press enter between each option. When the user presses on the options, the event will be triggered and a workflow will run. Refer to the option the user pressed by accessing the 'Element's current option.'

Opening side

Select which side the menu should appear from, Left or Right.

Show an icon

Check this box to use a standard icon for the menu when closed. To select a custom image, uncheck this box, select Image in the Background style, and upload an image.

Icon color

Select a color for the icon.

Menu width

Enter the width in pixels for the menu when open.

Distance from top

If you do not want the menu to touch the top of the browser window, set a value in pixels for the distance between the top of the window and menu.

Background color

Select the color to use for the menu background when the menu is open.

Option hover color

Select the color to use when the user hovers over an option or clicks it.

Font

Select the font family to apply to the selected element. Choose from the hundreds of fonts in the Google Fonts Library.

Font size

Select the font size in pixels for the menu options.

Menu font color

Select the color for the items when the menu is open.

Shadow offset

Select the offset in pixels for the shadow. If set to 0, there will be no shadow.

Blur Radius

Define the blur distance in pixels. A higher number means a more diffuse shadow, a lower number means a sharper shadow.

Note: This option is available with a Shadow offset greater than 0.

Shadow Color

Select the color of the shadow.

Note: This option is available with a Shadow offset greater than 0.

A slidebar menu's option is clicked

This event is triggered when an option is selected by the user. Use the expression 'This slidebar menu's current option' to find the selected option. Often, you will use the content of the current option in the condition on the event to run the proper actions in each case.

Setup

Once you add the slidebar menu, you can define its list of options. This could be different categories of content that you want to display on your page, for example, About or FAQ sections. To keep it simple in this example, we will go with a list of options 1 through 4.

Now we can start a workflow for when one of these options is clicked. Let's say we will also have a group on this page, and we want to change its content based on what option we choose. In that case, we can "Display data in a group" and select the current option as the data to display.

When we preview the page and click "Option 1," we will see Option 1's information in our chosen group.

If you would like to learn more, you can check out our Academy video for how to set this up with dynamic options instead.

FAQ

(Have a suggested FAQ to help other Bubblers? Please visit our Support center to get in touch with a member of our Support team!)