Fixed position bottom navigation panel

hi ,
How do I use UI Builder to build a bottom navigation toolbar that is “fixed” at the bottom.
Like the “Home, Task, My Taskers …” toolbar shown in the following picture.

When i click on the bottom “Task”, I want the upper section will be switched to another page.
After i switched to another page, I want the bottom navigation toolbar to remain at the same position.


Hi , Anybody can help on this ?

Hi Deric,

Here’s a general setup I follow to get the behavior you want:

  1. My layout consists of header, workarea and footer blocks. Notice these three blocks are sitting inside of the Workspace block:

  2. The Workspace block (the one that houses all three core elements) must have the Overflow set to hidden:

  3. The header block has the Z-Index property set to 1. This helps to keep the block on top when the workarea is scrolled:

  4. The workarea block must have the following changes:

  • Overflow set to auto - this adds a scrollbar to the workarea section if the vertical space is not enough to render it all
  • Flex grow set to 1 - this stretches the block so it fills up all available space (by pushing out all other blocks to the edges)
  • Flex shrink set to 1 - this ensures that all other components DO stay within the page (as a countermeasure against flex grow.

Hope this helps!


Thanks Mark.
I still don’t get it working. I want the bottom toolbar to stay when I go from RefuelPage to TaskPage.
When i click on “Task” button (bottom toolbar) , it’s routed to page name “TaskPage”.
However, But both upper and bottom toolbar disappear.

Below is my setup and config. Anything wrong ?

At this point you need to replicate it on every page.


Ok. Thanks.