Transcript

In this Quick Tip, we're going to learn about a Bubble-made plugin: the slidebar menu. The slidebar menu allows you to add a hamburger icon that triggers a vertical menu to the left or right of your page. This is most commonly used in mobile layouts to display your menu.

To use this, we install the slidebar menu from the plugins tab. Then if we look in the design tab, we have a new visual element to use!

Here we can draw the slidebar menu onto the page, just like we would any other element, and customize the menu options that this menu will display. To do this, we write out each option as text on a new line. If we preview this, we can see our slidebar menu, and when we click it we see our options.

We can then trigger workflows on each of these menu items depending on the text itself by matching the text to the slidebar menu's option. This is important as you can have this text be dynamic, so when comparing the slidebar menu's option to trigger a workflow, make sure the option matches the exact casing of the text for it to successfully trigger.

Note you can only trigger one slidebar menu at a time, but within the property editor you have total customization over the look and feel of your slidebar menu. You can even remove the hamburger icon and replace it with a background image if you wanted to.

The slidebar menu gives you flexibility for hiding and showing menu options without needing to create it from scratch.

That's it for this Quick Tip! For more, be sure to check out bubble.io/academy.