Bottom bar component behavior

I want to add a main bottom bar to use in many pages of my app, but I don’t find the option to reuse this component. I have to drag and drop the bottom bar component on each page and also configurate the style X times accroding to number of pages where I want the same component.

My questions are:
For a better UX app, I should have a consistent bottom bar (the same style) of the app.

-Why Adalo proposes to configurate a different style of bottom bar and no a global design of the component ?

Can I create a master component to avoid a manual configuration on each page where I want to use a bottom bar component?

Thanks @dilon_perera but I would like to use the bottom bar component proposed by Adalo.
I don’t find a option to declare a master component, I mean take a bottom bar component, configurate colors icons and after reuse this component.
Currently I have to drag and drop the component and configurate it manually on each page of the app

Hi @Ana,

As far as I understood you’re talking about re-usable elements. Unfortunately, they aren’t available in Adalo. (I mean when you configure component just once, and then use it on as as many screens as you want).
You will have to add the bottom bar on each screen manually.

There is a feature request here Reusable Elements | Voters | Adalo, you can upvote it.

UPD - just in case: it is possible to copy components, just do Ctrl+C and then Ctrl+V (for Mac it will be Command+C and Command+V).

Best regards, Victor.

1 Like

Dear @dilon_perera,

The original question was: “Can I create a master component to avoid a manual configuration on each page where I want to use a bottom bar component?”.

There are NO possibilities to create ONE component and put it as a Master component to avoid manual configuration.

@dilon_perera please read the questions carefully before answering.


I just copied the component from the first time I configured it and then copied to each new screen as needed.

I had same issue and still can’t figure it out can any body suggest please share.

I handle my bottom bar by having a screen specifically dedicated to designing bottom bars. I have nothing else on that screen, and I don’t use that screen in the app (of course).

I then design all my bottom bars on that screen and, once I’m happy with the design, I simply copy and paste the bar to the corresponding screen.

I hope that helps.

I also wish there was a slightly better way to handle this for both the bottom tab bar and other components in general.

Charles’ advice above seems like a helpful idea.

One other suggestion I’d add is to try to consider how many of your screens really need a bottom tab bar.

In my own design, I originally put a tab bar on every screen. That meant if I made any edits, it was a pain to update it across several screens. I eventually realized that I had several “details” pages where the user would select a list item and the details of that item would be shown on the next page. On those pages, I decided to exclude the tab bar and instead add a back arrow at the top of the page. The added perks of this are that my details pages now have more vertical space and when making edits, I’m less likely to introduce a bug by forgetting to update a particular tab bar.

However, if users want to jump from tab to tab (ie page to page) or the user would need to go back several pages to get to one with a tab bar, then this might not be a good approach.