App Bar
The App Bar is a native toolbar that appears at the top of your app, above your website content. It gives your app a polished, native look and can display a title that updates dynamically based on the page the user is on.
Colors
Background Color
Set the background color of the app bar for both Light and Dark themes.
- Light Mode default:
#ffffff - Dark Mode default:
#000000
Match this to your website's header color for a seamless transition between the native bar and your web content.
Title Text Color
Set the color of the title text displayed in the app bar.
- Light Mode default:
#000000 - Dark Mode default:
#ffffff
Title
Title Font Size
Set the font size of the app bar title in pixels. Adjust this to match the visual weight of your brand.
Title Alignment
Controls where the title appears horizontally inside the app bar.
| Option | Description |
|---|---|
| Left | Title aligned to the left side |
| Center | Title centered in the app bar |
| Right | Title aligned to the right side |
Default Title
The title shown in the app bar when no dynamic title rule matches the current page. This is typically your app or brand name.
Dynamic Titles
Dynamically Change Title Based on URL
When enabled, the app bar title changes automatically depending on which page the user is viewing — instead of showing the same default title everywhere.
- Enabled: The app bar reads the current URL and matches it against your list of title rules.
- Disabled (default): The default title is shown on all pages.
Title Rules
When dynamic titles are enabled, you configure a list of URL-to-title mappings. Each rule has a URL pattern and the title to show when that URL is active.
For example:
| URL Pattern | Title Shown |
|---|---|
example.com/home | Home |
example.com/shop | Shop |
example.com/contact | Contact Us |
The app bar updates the title in real time as the user navigates between pages — no rebuild required.
Visibility Rules
You can control which pages show the app bar and which pages hide it.
Show App Bar Only on These URLs
The app bar will only appear when the current URL matches one of the patterns you specify. On all other pages, the app bar is hidden.
Hide App Bar on These URLs
The app 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.
Runtime Update via JavaScript Bridge
You can update the app bar's colors and title at runtime from your website JavaScript — for example, to apply a different look on a specific page without rebuilding the app. See Updating the App Bar at Runtime for full implementation details.