Slidebar Menu
Last updated
Last updated
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.
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.'
Select which side the menu should appear from, Left or Right.
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.
Select a color for the icon.
Enter the width in pixels for the menu when open.
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.
Select the color to use for the menu background when the menu is open.
Select the color to use when the user hovers over an option or clicks it.
Select the font family to apply to the selected element. Choose from the hundreds of fonts in the Google Fonts Library.
Select the font size in pixels for the menu options.
Select the color for the items when the menu is open.
Select the offset in pixels for the shadow. If set to 0, there will be no shadow.
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.
Select the color of the shadow.
Note: This option is available with a Shadow offset greater than 0.
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.
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.
(Have a suggested FAQ to help other Bubblers? Please email us at support@bubble.io!)
