How to: Get and Set the App's Menu Items

Updated on 14. October 2024 by Jan Bunk


For some websites it may be useful to dynamically modify the apps' menu items. You can achieve this with these JavaScript functions.

Using the JavaScript Functions

You might want to check out the executeWhenAppReady() function of our app helper script. It ensures that your website doesn't try to interact with the app before it's ready or when your website is loaded using a regular browser (ReferenceError, function is not defined).

getMenuItems

Use this function to get a list of objects representing all the menu items that are currently being displayed.


<script>
    try {
        // returns a list of objects representing the menu items
        let menuItems = (await getMenuItems())["menuItems"];
    }
    catch (e) {
        // Can occur if:
        // - the app couldn't connect to the native code. Should be very unlikely.
        console.log(e);
    }
</script>
    

setMenuItems

Use this function to modify the menu items that should be displayed.


<script>
    try {
        // example for a menu item object
        let newMenuItem = {
            name: "Contact",
            action: {
                urlToRedirectTo: "https://webtoapp.design/contact",
                javascriptToExecute: null,
                elementToClickSelector: null,
                isFavoriteAction: false,
                isShareAction: false,
                isOpenExternallyAction: false,
                isSettingsAction: false
            },
            icon: null,
            children: []
        };

        // get the currently displayed menu items
        let allMenuItems = (await getMenuItems())["menuItems"];

        // add the new menu item to the list of menu items
        allMenuItems.push(newMenuItem);

        // display the list of menu items, including the new menu item
        await setMenuItems(allMenuItems);
    }
    catch (e) {
        // Can occur if:
        // - the app couldn't connect to the native code. Should be very unlikely.
        console.log(e);
    }
</script>
    

convertElementToMenuItem

This is a utility function to get a menu item object that is equivalent to clicking a certain element, usually a link or a button.


<a href="https://webtoapp.design/" id="my-link">My Link</a>

<script>
    let myLinkElement = document.getElementById("my-link");

    let myMenuItem = convertElementToMenuItem(myLinkElement);
    /*
        The result will look something like this:
        {
            name: "My Link",
            action: {
                urlToRedirectTo: null,
                javascriptToExecute: null,
                elementToClickSelector: "#my-link",
                isFavoriteAction: false,
                isShareAction: false,
                isOpenExternallyAction: false,
                isSettingsAction: false
            },
            icon: null,
            children: []
        };

        or (depending on the app configuration)

        {
            name: "My Link",
            action: {
                urlToRedirectTo: "https://webtoapp.design/",
                javascriptToExecute: null,
                elementToClickSelector: null,
                isFavoriteAction: false,
                isShareAction: false,
                isOpenExternallyAction: false,
                isSettingsAction: false
            },
            icon: null,
            children: []
        };
    */
</script>
    

Modifying the App Menu

Here's a list of related developer documentation about dynamically changing the app's menu. Make sure you're viewing the one applicable to your app's layout.