The bottom tab bar is the strip of buttons that stays put at the bottom of every screen in your app — it’s how people get around the main areas of your app. Here’s how to turn it on, fill its slots with buttons, and decide how each one looks and where it sits.

Goal

Configure the bottom tab bar for your app: enable it, add buttons from the built-in presets, choose each button’s icon, set the display order, and control which buttons appear.

By convention the bottom tab bar holds up to 5 buttons. iOS renders five tabs cleanly; Android can show more, but the layout gets crowded past five. Plan for five.

Prerequisites

• A MAM Suite app with MAM Main active.
• Admin access to the Mobile App Manager.
• A rough idea of which destinations belong on the tab bar (Home, Map, Favorites, etc.). The tab bar is for the few most-used areas — everything else lives in the left menu.

Steps

1. Open the Tab Bar settings

In the Mobile App Manager, go to Navigation → Tab Bar. This page lists the tab bar slots and, for each one, the button assigned to it, its icon, and a visibility toggle.

2. Choose the role you’re configuring

Tab bar settings are stored per role. If your app shows different navigation to different audiences (for example, a standard customer versus staff), use the role selector at the top of the page and configure each role separately. If you only have one audience, configure the default role and you’re done.

3. Add buttons from the presets

To fill a slot, pick a button. MAM Main ships a set of ready-made tab bar buttons you can drop in without writing any code:

Other MAM Suite plugins can add their own tab bar buttons to this list (for example, listing or reservation actions), so the choices you see depend on which plugins are active in your app.

For each slot you want to use, pick a button from its selector.

4. Set each button’s title and icon

For every button slot you can set:

• Title — the label shown under the icon. The preset supplies a sensible default (for example, “Favorites”), but you can rename it.
• Icon — chosen from the bundled icon set (icons such as black_heart, black_globe, black_envelope, black_phone, and black_web). Pick the icon that matches the button’s purpose.
• Off-state icon / title (some buttons only) — buttons that toggle between two states (like Favorites) can show a different icon and label when “off.” The Favorites preset, for example, uses a filled heart when on and an outline heart when off.

5. Set the order

Slots run left to right, and the order you set here is the order the buttons appear in the app. Drag a slot by its move handle (the up/down arrows icon on the right of each row) to reorder it. Put your most important destination first.

6. Show or hide a button

Each slot has a Show Button checkbox. Leave it checked to show the button. Uncheck it to hide the button for the role you’re editing — the slot stays, it just won’t show, and nothing is deleted. A hidden button is skipped entirely when the app loads; it never appears in the tab bar for that role.

7. Save

Click the save/submit button at the bottom of the page. Your tab bar layout is stored for the selected role.

Choosing colors

The bottom tab bar’s colors aren’t set per button — they live in a dedicated Bottom Tab Bar section of your app’s appearance settings, not on this page. There you set three colors: the bar’s background (Bottom Tab bar Color), the selected tab’s icon color (Bottom Tab bar Selected Icon Color), and the unselected tabs’ icon color (Bottom Tab bar Un-selected Icon Color). Setting them together keeps the whole bar looking consistent with the rest of your app. These are separate from the category tab bar colors, which control the top in-screen tabs.

Verify it

Now see it live.

1. Open your app in the Previewer (or a test build).
2. Confirm the buttons appear in the bottom bar in the same order you set, with the icons and titles you chose.
3. Tap each button and confirm it goes where you expect.
4. Any button you unchecked under Show Button should not appear.
5. If you configured more than one role, switch accounts/roles and confirm each role sees its own tab bar.

Tips and gotchas

• Keep it to five. Treat five buttons as the ceiling. If you need more destinations, move the overflow into the left menu instead.
• Per-role means per-role. A change you make while one role is selected won’t touch the others. If a button “won’t show up,” confirm you’re editing the right role.
• Show Button is the master switch. An unchecked button is fully removed from the tab bar for that role — it doesn’t just hide visually, it’s skipped when the app builds the screen.
• Some presets need their target set elsewhere. Email, Phone, and Website act on a configured address/number/URL. If the button does nothing, confirm the underlying contact details are set in your app settings.

Related

• Recipe: Configure the tab bar — the developer-level view of how each tab bar item is built at request time (the mam_main_skip_tab_bar_button → mam_main_add_tab_bar_item_{slug} → mam_tab_manager → mam_final_button_settings sequence).
• Hook: mam_app_settings_get_tab_bar_settings — the per-role tab bar configuration the app reads.
• Hook: mam_main_add_tab_baritem{slug} — for buttons whose behavior is populated in code (dynamic buttons).
• App Setting: Use Tab Bar for Home Screen — present the home screen as one of the bottom tabs.

What’s next

• Add custom buttons beyond the presets, then assign them to tab bar slots.
• Set up the left menu for the destinations that didn’t make the five-button cut.