Bottom Navigation Bar
The Bottom Navigation Bar appears at the bottom of your app and gives users quick, one-tap access to the most important sections of your website. It stays visible as users navigate between pages, making it the most commonly used navigation pattern in mobile apps.
Colors
Background Color
Set the background color of the navigation bar for both Light and Dark themes.
- Light Mode default:
#186E62 - Dark Mode default:
#000000
Item Color
Set the color of the icons and labels for unselected navigation items.
- Light Mode default:
#ffffff - Dark Mode default:
#ffffff
Selected Item Background Color
Set the background color that highlights the currently active navigation item.
- Light Mode default:
#0C3731 - Dark Mode default:
#000000
Selected Item Color
Set the icon and label color for the active navigation item.
- Light Mode default:
#ffffff - Dark Mode default:
#ffffff
Size & Layout
| Setting | Default | Range |
|---|---|---|
| Height | 60 px | 40–150 px |
| Icon Size | 24 px | 20–40 px |
| Title Size | 12 px | 8–30 px |
Increase the height if you want larger icons or taller labels. Keep icon and title sizes proportional so the bar looks balanced at any height.
Navigation Items
Each item in the bottom navigation bar has three parts:
- Icon — Tap the icon button to open the icon picker and choose a Material Icon.
- Title — The label shown below the icon. Leave it empty to show only the icon.
- Action URL — The page that opens when the user taps the item.
You can add multiple items to cover the key destinations in your app — for example, Home, Shop, Profile, and Contact.
Long Press Behavior
When enabled, a user can long-press any navigation item to set that item's URL as their personal app homepage. The next time they open the app, it will start on that page instead of the default homepage.
| Setting | Default | Description |
|---|---|---|
| Replace App Homepage on Long Press | Disabled | Allows users to set a custom homepage by long-pressing a nav item |
| Show Snackbar Notification | Yes | Displays a confirmation message after the homepage is changed |
| Snackbar Text | Added as App Opening Page. | The message shown in the confirmation snackbar |
This is useful for apps where different users might prefer to start on different sections — such as a dashboard, a product category, or a personal profile page.
Visibility Rules
You can control which pages show the bottom navigation bar and which pages hide it.
Show Bottom Nav Only on These URLs
The bottom navigation bar will only appear when the current URL matches one of the patterns you specify. On all other pages, the bar is hidden.
Hide Bottom Nav on These URLs
The bottom navigation bar is visible everywhere except on pages that match the patterns you specify.
Enter one domain, full URL, or URL fragment per line. Both fields support wildcard patterns (*) for dynamic paths and square brackets [ ] for exact URL matches.
| Example | Matches |
|---|---|
example.com/shop | Any URL containing /shop |
[example.com/checkout] | Only the exact URL example.com/checkout |
example.com/*/product | URLs like example.com/1/product, example.com/store/product |
Runtime Update via JavaScript Bridge
You can replace the bottom navigation items at runtime from your website JavaScript — for example, to show different tabs based on whether the user is logged in. See Updating Bottom Navigation at Runtime for full implementation details.