Group โ†’ Mobile Menu / Sheet

Demo to preview the settings

Introduction

This plugin is a versatile tool that converts any group into a sleek and customizable bottom sheet modal on webpages. Its precise setup allows designers to integrate specific components effortlessly by assigning HTML IDs and adjusting styling to match brand aesthetics accurately. With support for managing multiple views within a single parent group or reusable elements, it offers a refined approach to content presentation. By enabling targeted actions based on custom states or workflows, it enhances user engagement and navigation efficiency.

How to setup

  • Install the plugin
  • Add plugin element โ€œBottom Sheetโ€ to your page
  • 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!
Image without caption
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")
Image without caption
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'
Image without caption
  • Place the 'Bottom Sheet' element on your page
  • Configure & customize the styling to your liking Pass the HTML ID from earlier to the plugin
Image without caption
  • Create a workflow to show your component and trigger the action "open the bottom sheet".
Image without caption
๐Ÿ’ก
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.

Plugin element โ€œBottom Sheetโ€

Fields

Title
Description
Type
HTML ID
The HTML ID of the element that you want to attach as a bottom sheet.
Text
Blocking
When this checkbox is checked, the user won't be able to click behind the bottom sheet while it's open. By default set to checked (true).
Checkbox
Draggable
Check for making the Bottom Sheet draggable by swiping the header or the content. By default set to checked (true).
Checkbox
Max Width
(Optional) Set the max width for the bottom sheet.
Number
Backdrop Color
(Optional) The color for the backdrop, behind the bottom sheet.
Color
Background Color
(Optional) The background color for the bottom sheet.
Color
Handle Color
(Optional) Color for the little handle at the top of the bottom sheet.
Color
Border Radius
(Optional) Configure the roundness of your bottom sheet. By default is set to 16.
Number
Top Clearance
(Optional) Minimum clearance from the top of the page to the bottom sheet. Must include height units (px, em, vh, %, etc) By default is set to 20px.
Text

Returned by the plugin value

โ€œOpenโ€ - Returns yes/no depending on if the bottom sheet is opened.

Plugin Event

โ€œwas dismissedโ€ - Fires whenever the bottom sheet is dismissed.

Plugin Actions

โ€œOpenโ€ - Opens the bottom sheet. โ€Closeโ€ - Closes the bottom sheet.

Changelogs

Update 06.11.23 - Version: 1.1.15

  • Update to v4

Update 17.02.24 - Version: 1.2.0

  • Minor updates

Update 23.02.24 - Version: 1.4.0

  • Blocking and backdrop color features fixed

Update 13.06.24 - Version: 1.8.0

  • Added resizable for the "Bottom Sheet" element

Update 03.07.24 - Version: 1.9.0

  • Fixed draggable feature