Updating Navigation Drawer at Runtime

Last updated: May 23, 2026

The Navigation Drawer Bridge lets you update the drawer's header and navigation items at runtime from your website JavaScript. This is useful when the drawer content should reflect the user's current state — for example, personalizing the header title and showing account-specific menu items after login.

Opening and Closing the Drawer

You can programmatically open or close the Navigation Drawer from your webpage JavaScript.

Open the drawer:

javascript
appilix.postMessage(JSON.stringify({
    type: "drawer_open"
}));

Close the drawer:

javascript
appilix.postMessage(JSON.stringify({
    type: "drawer_close"
}));
This is useful for triggering the drawer from a custom button or automatically closing it after a user taps a menu item that performs an in-page action.

Updating the Drawer

javascript
appilix.postMessage(JSON.stringify({
    type: "update_settings",
    updates: {
        modules: {
            drawer_nav: {
                settings: {
                    header_title: "App Name",
                    header_sub_title: "Slogan of the App",
                    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"
                        }
                    ]
                }
            }
        }
    }
}));

Updatable Properties

PropertyDescription
header_titleThe main title shown in the drawer header
header_sub_titleThe secondary line shown below the title in the header
itemsArray of navigation items to replace the current drawer list

All three properties are optional — you can update any combination of them in a single call.

Item Properties

PropertyDescription
iconMaterial Icon codepoint in hex (Outlined style)
titleLabel shown next to 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

Personalize the drawer when a user logs in:

javascript
appilix.postMessage(JSON.stringify({
    type: "update_settings",
    updates: {
        modules: {
            drawer_nav: {
                settings: {
                    header_title: "Welcome, John",
                    header_sub_title: "john@example.com",
                    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 defaults after logout:

javascript
appilix.postMessage(JSON.stringify({
    type: "update_settings",
    updates: {
        modules: {
            drawer_nav: {
                settings: {
                    header_title: "App Name",
                    header_sub_title: "Slogan of the App",
                    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 drawer settings are restored when the app is next launched.

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