[PLUGIN] AppDrawer - Fully Responsive & Customizable Navigation Drawer Elements


Time to simplify and modernize your menus. Get rid of the floating group hacks and start utilizing a better way to display your navigation menus. AppDrawer is built to be as user-friendly as possible, without losing the additional customization functionality.



What can App Drawer do?

As of right now, since AppDrawer is still being worked on, expect more features to be released.

  • Placement: Adjust where you want your drawer to open (Left, Right, Top, Bottom).
  • Fully responsive: AppDrawer will work on any device, fit on any screen, and function normally like it should. No need to hassle with how the drawer works, just provide your content and you’re good to go!
  • Multiple instances: AppDrawer can have multiple instances on a page. As long as you provide the dynamic properties (such as unique identifiers you assign), your drawers will be seamless throughout your application.
  • Contained instances: You can contain your drawers into a specified container.
  • Lock: Disable the drawer from being closed dynamically or statically.
  • Overlay: Toggle the overlay on or off in which the user can click/press to close the drawer.
  • Overlay Click: Allow the user to click/press the over to close the drawer. As of right now, this only works on page load. It cannot be updated live.
  • States & Events: Turn your drawers into fully dynamic machines.

Where do I submit bugs/suggestions?

Right here!


Hello friends! Happy Thanksgiving to those who celebrate it, and hope everyone is doing well.

I have made a ton of updates to the drawer.

  • Can now contain your drawers
  • Can have more than one drawer
  • Drawers are fully dynamic
  • Locking functionality
  • Sizing
  • Many quality of code improvements

Please view my latest demo!

AppDrawer Demo | GhostCodes (bubbleapps.io)

Currently I have submitted the plugin for release as it’s production ready. Wish me luck!

I am giving away free copies to those that reply with “Happy thanksgiving” and like the first post. I am limiting the amount I give away.

Happy Thanksgiving!!

1 Like

Happy thanksgiving

1 Like

Morning folks! Sent you DM’s. Just reply with your preferred app you want it to be installed in and I’ll send you guys the plugin!

These updates won’t apply until the plugin is released for public use. Improvements that you see below will happen after this plugin is released.

AppDrawer is expected to be released within the next 24-48 hours.


Easily move your content with the drawer. Works with the width you set for your drawer.


Improvements to come (after next update):

  • Animation speed and type.
  • Min width for the scoot to apply.
  • Fully loaded event, after close, after open.
  • make it so VH/VW/% works better when a scrollbar is visible. Will likely add a “scrollbar width” bypass property to include the default scroll bar width, or whatever you have your app’s scrollbar set to. This is better for responsive purposes. Otherwise the other measurable units will likely cause issues with the width of the drawer with mobile devices.


Add a draggable content box on the bottom of your page. Include any content you want. Customize the way it works.

  • Responsive
  • Draggable
  • Can be styled (using CSS for now, but will add styling soon).
  • Manage workflows with states/triggers.

ezgif.com-resize (1)

Improvements to come (after release):

  • More customization (like button appearing, colors, etc)
  • Pull tab that is always visible (toggleable)
  • default height of the “opened” sheet.
  • Additional events (dragging, pressed, etc)

General improvements to come (after release):

  • Add a property to disallow scrolling when opened.
  • The properties will be more user-friendly (some of the names/labels are not “professional” just yet as I haven’t put everything together just yet).
  • Animation style & speed settings for the drawer.
  • Updated documentation and description
  • Notion page for full functionality break-down.
  • Multiple demos to demonstrate the many ways you can utilize this, and even a comparison of workflows if you use the “standard floating group method”.
  • May add skeleton UI loaders, but not sure.
  • draggable toggle menu (slide menu open).

Overall, as you guys can see I am adding quite the functionality to this. I really want this to be a great plugin that saves time, is fast, and is fully efficient.

I still have a few more copies I’d like to give away if you guys are okay with providing me input on how it helps improve your application, or how I can make it better.

Hope everyone has a great evening/day!

AppDrawer has been approved and added to the marketplace!
The price may increase as more functionality and/or improvements have been made.

Recent Updates

Version 1.0.1


  • Updated the demo site to include multiple examples of functionality.

Drawer Element:

  • Properties are now more simplified.
  • Added an action for the drawer to toggle (so you can use events directly with the element, rather than use the “universal toggle”). This is separate from the already included “Universal Toggle” which targets a drawer by its ID.
  • Drawer “Minimum Width” now works as intended.
  • Allow scrolling when opened (yes/no).
  • Removed label and header. It’s not needed as you can just build your own.

Drawer properties:

Sheet Element:


  • Background color dynamically changes based on the target elements background color.
  • You may now customize the color of the handle and the “X” button.
  • You can now remove the close button.
  • Drag handle now has a hover/pressed effect.

Sheet properties:

Upcoming updates:

  • SHEET:
    – Add error handling
    – Add hover effect on the close button
    – Add a state “Sheet Dragging” - when the user is currently dragging the sheet (yes/no).
    – Add the locking functionality.
    – Spawn a pull tab.
  • Scoot responsiveness (right now it shows signs of breakage).
  • Animation settings (don’t have time to add currently).
  • Create a comparison page for using the floating group method versus the AppDrawer method.
  • Possible rename of the plugin (as it’s more focused towards multiple variances of navigation utilities at this point).
  • Possible element to be introduced: DragDrawer
    :warning: As it stands, I may be able to incorporate the same functionality in the existing drawer, and just setup a boolean value to accept whether or not the drawer should be a “drag drawer” but we’ll see.


EDIT - Noticed bugs:

  • Close button on sheet is always gone.

Will fix these asap. I’m tired! :slight_smile:

1 Like

I love this plugin it works great so far.

I have an issue with the initial height for sheet doesn’t reflect the value, it’s either half or full.

I also have a suggestion: can you make the entire top part controls the sheet instead of only the handle, or better still when dragging the whole sheet down closes it like native ios ?

Thanks again for your plugin

Yes of course. I’ll look into this. I may be depreciating the sheet element and turn it into its own plugin as the coding is becoming a bit more sophisticated for just one plugin. If that is the case, I’ll send out a free copy to those that have subscribed or purchased the plugin.

Expect an update in this regards as I am working on a total revamp on my business and other plugin updates.

I just bought the plugin but I keep getting this error on page load, and i also can’t ever get the element ID to be passed through.

I also can’t get the plugin to function. I tried a button on a test page and the rest of the elements in a floating group.

I also took the elements out of the floating group and just put them onto the page, but that also didn’t pass the item ID.




Hey @JustinC - appreciate the business! Apologies about the plugin giving you issues. I hope that I can hopefully get you on your way.

Can you please show me your exact setup? You need to make sure you’re creating a content area of your own, assign it an element ID, feed that ID to the drawer element, and it should work.

In order to “know” what drawer to open, you use the elements “states” id.

As for the demo, apologies about how it’s not fully functional – I’m in the process of creating all new demo pages for all my plugins.

Tried putting everything directly onto the page. Not sure why I get the error. I think a Loom video linked to your demo is in order to show people how to set this up. Here’s my setup;


When I run the action, the Drawer ID is empty:


Our time zones might be completely different. If you have a chance join my Discord for real-time conversation.

I will make a video showing how to set it up right! :slight_smile:

EDIT: Also notice your project is not responsive. You’ll need to make sure your pages are using the responsive mode (non-fixed) in order for this plugin to work correctly. As you notice in the video I have for you below, I setup the containers and put them inside an invisible container which loads on every page. There is no visible “sidebar” on the editor. It’s just there. You have to add your content separately and then use the element itself to call your content.

1 Like

Here is a video going through a simple setup on setting up a drawer:

1 Like