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?

Improve this question
2
  • 3
    This is similar to an expandable Floating Action Button in Android: uxdesign.cc/… Note that they keep the expand/collapse in the same position - something you might think about doing here to increase usability.
    – Elliot
    Commented Aug 26, 2021 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
    Commented Aug 30, 2021 at 7:09

1 Answer 1

Reset to default
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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.