[Free Template] Top Shelf Elements

Top Shelf Templates just released a new template called Top Shelf Elements :point_left: Get it here

This is a Free Template made to help speed up development for all Bubblers and to help everyone create higher quality applications. The template will feature many common elements and designs used in Web Applications that you can simply copy and paste into your own applications.

Currently there is only one element, a mobile responsive Drag and Drop list that re-orders the items in the list. New Elements will occasionally be added, with detailed instructions on how to put the elements into your own applications.

Below is a GIF of the first Element, enjoy!

Or, try it out by clicking HERE


Geoff from Top Shelf Templates



  • Added an Index page
  • Added transparency to a Dragged List Item to see where you are dropping it easier

This is a great idea! Thanks for your contributions to the community!


Hi @gf_wolfer!
Thanks a lot for sharing this with the community and for this overall initiative! :raised_hands:

A note on the drag-and-drop module:
I tested with 3 items: at some point the reordering won’t happen anymore.
Indeed, say your Order Numbers are 1-2-3, at each reordering they get averaged and at some point they will all be 0.33, disabling thereby any further possibility of reordering.
So this method will be just fine for some little reordering but shouldn’t work with intensive reordering on a small number of items.
(No intention to disminish the great work and gift! :ok_hand: Just pointing this out for this given use case. If I find a way, I will post it)

1 Like

Thanks for pointing out a bug :+1:

In the case of dropping a Widget on the First and Last spot in the list (more common drop areas when you have a smaller list), there is a value missing which is needed to find the Average calculation. This error comes up for the Last spot on the list (the First spot on the list should constantly use Item #1’s Order Number and Zero - which is an infinitely small number)

Will put a fix in place soon


Pushed a fix for the bug raised by @LucM, where a List was at it’s maximum number of Widgets and a User drops a Draggable Widget on the Last spot in the List

There are still edge cases that can pop up depending how you store Order Numbers, and depending on how you are populating the List (be careful if using the various :itemuntil filter)

New Element

A 5 column mobile responsive Table

Check it out here: Responsive Table


New Element

Accordion Lists - Ideal for FAQs, Product or Service descriptions and much more

Accordion 1 allows for Multiple Items to be expanded at once

Accordion 2 only allows 1 item to be expanded at a time - this uses Custom States and so it is also a good learning tool for people wanting to learn more about using Custom States

Check it out here: https://topshelf-elements.bubbleapps.io/accordion


This is fantastic, thanks so much. It’s great to be able to copy and paste elements like this, saves soooo much time with formatting!

1 Like

I can only see the drag and drop table though. I was hoping to use the accordion.

You have to create a new app using the template, the app doesn’t automatically update unfortunately :confused:

I just made the App ‘Public Read Only’ :tada:

So for any future updates you can simply go to this link to copy the elements:


That feeling when a problem came up just today (drag and drop ordering) and you see a forum solution for it. Bubble and its community are amazing. :+1:


Hi @gf_wolfer thank you very much for the template.

I’ve successfully replicate your FAQ accordion (one item at a time) but there is a little error right there: the answer (“Grp Collapsed Info 2” in this case) it does not load properly; only a small part of the text is loaded.

You know why is happening this, because I tried many times and without succes?

@gf_wolfer I’ve discovered the issue.

The option “Animate the collapse operation” it was causing the problem.

I don´t know if this is a Bug for Bubble but is annoying for the UX.

I could not recreate the Text being cut off in the Top Shelf Elements app, it seems to be stretching to the correct height of the Text field.

Do you have a screenshot or GIF of it doing this?

Is the app you copied this functionality into on the most recent Bubble version?
(there was a Text Element bug fix in one of the versions)

Hi, @gf_wolfer I’ve made a Gif so you can see it clearly.

When i recreate the Accordion, I’ve done it in my app without copying (and paste) your elements.


New Element

Responsive Calendar - use a custom designed Calendar that matches your app instead of the Full Calendar plugin for more flexibility in your app

:+1: Shout out to @codurly for the original code and Forum post on this

Check out the free element here, with instructions on how to simply copy it into your app: https://topshelf-elements.bubbleapps.io/calendar


_*Original forum post on creating a Custom Calendar: http://forum.bubble.io/t/how-to-create-a-custom-calendar-using-repeating-group/26640_


Hi @gf_wolfer: it seems that you haven’t deployed the calendar to the app (yet) - I just installed the template and the calendar is missing (both as a page and in the navigation dropdown)…

EDIT: @gf_wolfer: check the just-installed app with the template at: https://nocalendar.bubbleapps.io/

I think this is because it has to go to Bubble for a review before it can be republished with the updates, should be ready soon. If not I believe the Read Only link further up should work.