WebViewGold Documentation · iOS
🇺🇸 English
Get WebViewGold

Native Sidebar Navigation

Enable a native sliding sidebar menu with custom links and SF Symbols icons — configured via Sidebar.json.

Besides the Native Navigation Footer, WebViewGold ships a native sliding sidebar so you can offer an app-like navigation experience without touching your website. A floating menu button opens a sidebar with your links — each entry navigates the main WebView to the URL you associate with it.

How to Enable:

Set the following option in Config.swift:

var enableSidebar = true

How to Configure:

Open Sidebar.json in the Xcode project and define the color scheme and the menu entries:

{
   "colour":"dark",
   "layout":[
      {
         "redirection_link":"https://example.org/home",
         "sf_symbol":"house",
         "name": "Home"
      },
      {
         "redirection_link":"https://example.org/shop",
         "sf_symbol":"cart",
         "name": "Shop"
      }
   ]
}
Key
Description
colour
Color scheme of the sidebar: dark or light.
redirection_link
URL loaded in the main WebView when the entry is tapped.
sf_symbol
Icon name from Apple's SF Symbols library (e.g., house, cart, wrench.and.screwdriver).
name
Label of the sidebar entry.

Behavior:

  • A floating button opens and closes the sidebar over your web content.
  • Tapping an entry loads the associated URL in the main WebView, so your web app never leaves the app shell.
  • The sidebar can be combined with the Native Navigation Footer or used independently.

SDK-style implementation notes

Treat this feature as a native capability exposed to your web layer: keep your production website or PWA as the source of truth, then use the documented WebViewGold configuration flags, URL commands, and JavaScript bridge calls to opt in to native iOS behavior only where it adds value. This approach keeps your codebase maintainable because the same web application can serve browsers, WebViewGold for iOS, and the other WebViewGold platforms with minimal conditional logic.

For reliable results, prefer HTTPS endpoints, stable route names, explicit success/error states in your UI, and small JavaScript helper functions that wrap native calls. For example, a web app built with jQuery Mobile, Lovable, Base44, Bolt, WordPress, Bubble, a custom React/Vue/Angular stack, or static HTML can expose a single button or event handler that triggers the native WebViewGold API while still showing a graceful browser fallback.

  • Recommended integration pattern: detect the app context, call the WebViewGold API, then update your web UI after the native callback or route change.
  • Testing checklist: validate the feature on a real device or packaged build, verify permissions and store review text, and confirm that browser-only users still receive a useful fallback.
  • SEO benefit: keep feature pages, route titles, and structured content indexable on your website while WebViewGold delivers the native app shell for iOS users.

Too busy? We set up your app for you.

Our team configures, builds & submits your WebViewGold app — done-for-you, fast turnaround, Made in Germany.

Get your app set up →

Build in your browser

No Mac, no IDE: the WebViewGold Cloud Builder configures, builds & uploads your app online.

Discover Cloud Builder →