Group → Mobile Menu / Sheet

This plugin allows you to transform❗any group❗into a bottom sheet modal.
🛠 Preparation

- Build your component that you want to display in the bottom sheet. This is just a regular group that you want to show.
- Anything you can do in a group will keep working, so add all of your worfklows, conditionals and hover states like you would normally do!
- Put this group anywhere on the page and make sure it's only visible when you want to display the bottom sheet.
- Assign an HTML ID to the group (for example: "bottom_sheet")

If you don't see this option in the element dialog, make sure you've enabled the HTML ID setting. You can do this under:

1. Settings
2. General
3. Check the box for → 'Expose the option to add an ID attribute to HTML elements'

✨ Showing the bottom sheet

✋ Place the 'Bottom Sheet' element on your page
🍭 Configure & customize the styling to your liking
🤖 Pass the HTML ID from earlier to the plugin
🚀 Create a workflow to show your component and trigger the action "open the bottom sheet"
✅ That's it!


❗️ Please keep in mind ❗️

You don't need multiple instances of the plugin on your page to have different views (groups) for the bottom sheet. Just follow these steps and you'll be okay!
- Create 1 parent group for all bottom sheet views (groups). This can also be a reusable element with all the different views (groups) in it
- Assign the HTML ID to that parent group (or reusable)
- In the workflow that opens the bottom sheet. Show the correct view (group) first and then open the bottom sheet.
- This can also be based on a custom state on the parent group that decides which view (group) to show.