1

I am looking for examples of this, because I eventually want to use it in a long scrolling Jupyter notebook - however, when I use "collapsible bottom drawer menu" in search, I mostly get hits for unrelated solutions for mobile (closest I got to was What are the little arrows called that hide additional details? )

So, here is more specifically what I'm looking for: I would like to have a "position: fixed" element on the bottom of the page (so it keeps it position, no matter where in the document we are, in terms of scroll position - and thus, it is on top of any other layout element), which would indicate that there is a menu to be opened - so the below shows its "collapsed" state:

bottom-menu-collapsed

Then when you click the button, the menu expands, and you can use whatever functions are there:

bottom-menu-expanded

... and of course, in the end, you can also use the "arrow" button to "close" (i.e. "collapse") the menu as well.

Is there a specific name for this design pattern - and are there any decent HTML/CSS examples online, I could look at?

sdbbs
  • 111
  • 2
  • 3
    This is similar to an expandable Floating Action Button in Android: https://uxdesign.cc/how-to-use-the-expandable-floating-action-button-9c6fdedc4169

    Note that they keep the expand/collapse in the same position - something you might think about doing here to increase usability.

     – Elliot Aug 26 '21 at 16:39
  • Many thanks, @Elliot - "Expandable Floating Action Button" sounds very reasonable to me, and also great to see a precedent of active use in at least Android. Also, good point about the expand/collapse in same position, makes a lot of sense in retrospect! – sdbbs Aug 30 '21 at 07:09

1 Answers1

1

I believe it might be something that comes from Material Design System (currently called "Material You") and it's a type of a Floating Action Button (FAB) transition, that they call "Speed Dial", or a variation of it. As the comments have suggested, developers often call it "Expandable Floating Action Button".

enter image description here

exp
  • 2,598
  • 17
  • 29