Updating Bottom Navigation at Runtime

Last updated: May 23, 2026

The Bottom Navigation Bridge lets you replace the app's bottom navigation items at runtime directly from your website JavaScript. This is useful when the navigation options should change based on the user's state — for example, showing account-specific tabs after login and reverting to generic tabs when logged out.

Updating Navigation Items

javascript
appilix.postMessage(JSON.stringify({
    type: "update_settings",
    updates: {
        modules: {
            bottom_nav: {
                settings: {
                    items: [
                        {
                            icon: "e88a",
                            title: "Home",
                            action: "https://example.com"
                        },
                        {
                            icon: "e88e",
                            title: "About",
                            action: "https://example.com/about"
                        },
                        {
                            icon: "e0be",
                            title: "Contact",
                            action: "https://example.com/contact"
                        }
                    ]
                }
            }
        }
    }
}));

Item Properties

PropertyDescription
iconMaterial Icon codepoint in hex (Outlined style)
titleLabel shown below the icon. Leave empty to show only the icon.
actionURL to open when the item is tapped

The icon value is a hex codepoint from Google Material Icons (Outlined). For example, the Home icon (home) has the codepoint e88a.

Common Use Cases

Show logged-in tabs after a user signs in:

javascript
appilix.postMessage(JSON.stringify({
    type: "update_settings",
    updates: {
        modules: {
            bottom_nav: {
                settings: {
                    items: [
                        {
                            icon: "e88a",
                            title: "Home",
                            action: "https://example.com"
                        },
                        {
                            icon: "e7fd",
                            title: "Dashboard",
                            action: "https://example.com/dashboard"
                        },
                        {
                            icon: "e7ff",
                            title: "Profile",
                            action: "https://example.com/profile"
                        },
                        {
                            icon: "e9ba",
                            title: "Logout",
                            action: "https://example.com/logout"
                        }
                    ]
                }
            }
        }
    }
}));

Revert to default tabs after logout:

javascript
appilix.postMessage(JSON.stringify({
    type: "update_settings",
    updates: {
        modules: {
            bottom_nav: {
                settings: {
                    items: [
                        {
                            icon: "e88a",
                            title: "Home",
                            action: "https://example.com"
                        },
                        {
                            icon: "e88e",
                            title: "About",
                            action: "https://example.com/about"
                        },
                        {
                            icon: "e0be",
                            title: "Contact",
                            action: "https://example.com/contact"
                        }
                    ]
                }
            }
        }
    }
}));
The update takes effect immediately and persists for the current app session. The configured default items are restored when the app is next launched.

For a general introduction to the JavaScript Bridge, see the Overview article.