Bolt + navigation
A hamburger menu and a website header are the fastest way to make a Bolt app feel like a bookmark, and that is exactly what reviewers judge under Guideline 4.2. WebViewGold adds a native tab bar or sidebar on iOS and a Material bottom navigation or drawer on Android, each configured in one file, while your web app keeps doing the routing.
From $109 one-time per platform, or let our team do it all from $698.
All four load a URL of your web app in the main WebView when tapped, so nothing about your routing changes. Pick one primary pattern per platform.
Set showNavFooter to true in Config.swift and describe three to five tabs in FooterBar.json: a label (name), an SF Symbol (sf_symbol) and the URL the tab opens (redirection_link), plus colour dark or light for the whole bar.
Set enableSidebar to true and fill Sidebar.json with the same fields. A floating button opens a native sliding menu, handy when you have more sections than fit in a tab bar. It works alone or next to the footer (sidebar docs).
ENABLE_NAVIGATION_FOOTER in Config.java adds a Material 3 bottom navigation bar. Its entries, icons and labels come from res/menu/menu_drawer.xml; Google recommends three to five top-level destinations. Dark and light mode follow the system automatically.
ENABLE_NAVIGATION_DRAWER adds a floating menu button that opens a Material drawer, driven by the same menu file. Bottom navigation and drawer can run together, for example main sections below and settings, help and legal pages in the drawer.
Paste this into Bolt to implement the web-app side. Review the result, publish, then test inside the WebViewGold app.
Prepare the navigation of this app for a native wrapper (WebViewGold) that provides its own bottom tab bar. Inside the wrapper, navigator.userAgent contains "WebViewGold". 1. Add public/_redirects with the line /* /index.html 200 so every route loads directly on Netlify, and confirm that every top-level route renders the right screen on a hard refresh. 2. Create src/lib/native.ts with isNativeApp() and use it to skip the top navigation bar, the mobile hamburger menu and the footer inside the app. 3. List the four or five top-level routes with a suggested SF Symbol name for each (for example house, magnifyingglass, bell, person.crop.circle) so I can copy them into FooterBar.json. 4. Add a back button to every detail screen header that uses history back when there is history and the parent route otherwise. 5. After login, return the user to the route they originally requested instead of always opening the dashboard. Keep the browser experience exactly as it is.
I am very happy I bought this app! Extremely easy and great documentation. Was in contact with the customer service, they replied very quickly and very friendly. They solved my question within a day. 10/10 would recommend.
| Native bar (WebViewGold) | Tab bar built in the web app | Website header with hamburger | |
|---|---|---|---|
| Looks like | The system: SF Symbols on iOS, Material 3 on Android | Whatever you design, matched to your brand | A mobile website |
| Where you change it | FooterBar.json, Sidebar.json, menu_drawer.xml; ships with a store update | In your web app, live with every deploy | In your web app |
| Home indicator and safe area | Handled natively | Needs env(safe-area-inset-bottom) padding | Often hidden behind the home indicator |
| What a tap does | Loads the tab URL in the WebView (a page load) | Client-side route change; instant, keeps state | Opens a menu first, then navigates |
| Best for | Three to five stable top-level sections | Sections that change often, badges and counters | The website only; hide it inside the app |
About 30 minutes for both platforms, plus a rebuild.
Typically Home, a main list or search, an inbox or create action, and Account. Everything else lives inside those sections. Each destination needs its own URL in your Bolt app that opens the right screen when loaded directly, not only through in-app clicks.
Set showNavFooter to true and add one entry per tab with name, sf_symbol (for example house, magnifyingglass, tray, person.crop.circle) and the full redirection_link on your production domain. Set colour to match your theme. Reference: iOS documentation.
Set ENABLE_NAVIGATION_FOOTER (bottom bar) or ENABLE_NAVIGATION_DRAWER (side drawer) to true in Config.java, define items, icons and labels in res/menu/menu_drawer.xml and assign each entry its URL as shown in Android documentation.
Set a custom user agent with a token such as "WebViewGold" in Config.swift (useragent_iphone, useragent_ipad) and Config.java (USER_AGENT), then stop rendering the website header menu, hamburger and footer link columns when your Bolt app detects it. Two navigation systems on one screen are the most common design remark.
iPhones have no system back button. Tabs open the sections; pages reached from them need a visible back arrow in your header. Leave enableswipenavigation on so the iOS edge swipe goes back too; Android users also have the system back gesture.
Tap each tab right after launch, after login and after the session expired. A tab that redirects to the login page should bring the user back to that tab afterwards, not to the dashboard.
Replace the URLs with the routes of your Bolt app on your production domain. Sidebar.json uses the same structure. Check icon names in Apple's SF Symbols app.
{
"colour": "light",
"layout": [
{ "redirection_link": "https://app.yourdomain.com/", "sf_symbol": "house", "name": "Home" },
{ "redirection_link": "https://app.yourdomain.com/search", "sf_symbol": "magnifyingglass", "name": "Search" },
{ "redirection_link": "https://app.yourdomain.com/inbox", "sf_symbol": "tray", "name": "Inbox" },
{ "redirection_link": "https://app.yourdomain.com/account", "sf_symbol": "person.crop.circle", "name": "Account" }
]
}No single feature is required. Guideline 4.2 asks whether the app offers more than a repackaged website, and 4.0 whether it follows iOS design conventions. A native tab bar is one of the clearest signals for both, especially next to push notifications and a proper offline screen, but it does not replace a mobile-friendly web app.
Not for the native bar: FooterBar.json, Sidebar.json and menu_drawer.xml ship inside the build. The pages behind the tab URLs update with every deploy. If your sections change often, build the tab bar in your web app instead and show it only inside the app.
Yes. Each tab loads its URL in the WebView, so your hosting must answer every route with the app (an SPA fallback to index.html) and your router must open the right screen on a direct load. Test it by pasting a tab URL into a fresh browser tab.
Use the footer for three to five main sections. Add the iOS sidebar or the Android drawer for secondary destinations such as settings, help and legal pages. Do not repeat the same links in both.
Keep it for the website and skip it inside the app with a user-agent check. In the app the native bar takes over; a second menu icon in the header confuses users and reviewers.
Same result, different amount of work on your side. All three come with the approval guarantee and 24/7 human support.
$109 per platform, one-time
The WebViewGold license: a finished Xcode or Android Studio project. Paste your URL, set name and icon, switch on features, build and submit. Free updates forever.
See plans on the main page$349 per license, one-time add-on
No Mac, no Xcode, no Android Studio: configure in the browser, we build both apps in the cloud and hand them to App Store Connect and the Play Console.
How the Cloud Builder works Try the free demo$698 per platform $798
Send us your URL and icon. Our team configures, builds and delivers your app within 72 hours, white-label, with source projects. Both platforms for $1,158.
Full Service details Powered by
Winter Sale prices valid until December 31, 2026.
App Store & Google Play approval guarantee – or your money back within 14 days
Rather hand it over? Full Service: we configure, build and deliver within 72 hours, from $698 per platform. Questions? Chat with us 24/7.
Refunds are granted under the conditions listed in our FAQ: a non-content rejection by Apple and/or Google, claimed within 14 days after purchase.