Bottom App Bar (Design Ideas)

Hi All Thunkers!

Just got the Ideas for your app that maybe this will help. You can copy this be creative!

Design UI

  • Shadow - a small detail but it has a big impact to create beautiful designs like modern design today.
  • Border - every button has a border with a width = 8
  • Hamburger (menu) - if you have other functions for the future. Any options like log-out or move to other account settings it good in here.
  • Button - a perfect circle. Change to border radius = 100
  • THE SECRET - to achieve this design. There is 3 hidden rows below the violet bottom app bar
    not literal hidden just change the height = absolute size put 0
    Vertical alignment = bottom
    Horizontal alignment = right
    Margin = 20 px

This two design is to show the before click icon button to after click icon button

For the animation of the button menu
I add 0.03 seconds for a smooth transition or a little animation for the two button.

you can replace each icon for your desired like for example the person icon change it to plus (+) icon when click replace it to back (x) to understand by the user when navigating the option button.

here is the link Thunkable

Happy Thunking!


Great idea @junjoseph - thanks for sharing. I really like the animation effect you’ve created.

If you want to post this in the #thunkable-cross-tutorials section however, would you mind adding some screenshots and an explanation of the blocks so that others in the community can learn from this?



An interesting solution, but there is a small nuance in the lower left corner when hide buttons.


yes I found that bug in my design and I don’t know where that from. :sweat_smile:

What if set the purple bar left margin to be -XX px (e.g. -30px) and set the hamburger’s left margin to 20px,see whether will it exist.

Visibility is necessary to change the row, in which there are buttons.


1 Like