WebToAppMaker

Navigation

App Bar

Add a native top toolbar with default and URL-aware titles, actions, visibility rules, and runtime updates.

Before you start

  • A decision about pages needing native top navigation
  • URLs and icons for optional actions

Configure and verify

  1. Enable and style

    Choose theme backgrounds, title colors, font size, alignment, and status bar integration.

  2. Set the default title

    Use the app name or another concise label shown when no dynamic rule matches.

  3. Add dynamic titles

    Pair each title with a URL rule and test specific rules before broad wildcards.

  4. Configure actions

    Add toolbar icons and URLs. Keep the number small enough for narrow devices.

  5. Define visibility

    Show rules restrict the bar; hide rules override show rules. Empty show rules mean all pages.

  6. Test navigation

    Check status bar blending, drawer icon, title changes, actions, popup pages, and WebView back behavior in the APK.

URL rules

Partial
checkout matches any URL containing checkout
Wildcard
https://example.com/account/*
Exact
[https://example.com/account]

Runtime updates

update_settings can merge app-bar values for the current session. Saved dashboard values return on the next launch.

Status integration

Follow Style Customization
Uses global status settings
Blend
Extends app-bar color into status area
Classic
Keeps a protected status area

Test before release

  • Title fits narrow phones
  • Drawer icon appears when enabled
  • Actions are distinct
  • Status icons have contrast
  • Rules were tested