How to Dynamically Change the Items of Bottom Navigation Bar

In some cases, you might want to change the bottom navigation bar items dynamically depending on the user’s action or state — such as switching between “Login” and “Logout” when a user logs in or out.

Appilix allows you to achieve this from your website code (displayed inside the app) by calling a simple JavaScript function.

🧪 Syntax

let titles = "Home<=>Search<=>Profile";
let icons = "e88a<=>e8b6<=>e853"; // Material Icon Unicode
let actions = "https://example.com<=>https://example.com/search<=>https://example.com/profile";

bottomNavUpdateItems(titles, icons, actions);

🔍 Parameters

✅ Use Case Example

Let’s say:

• When a user is logged out, you want the bottom nav item to show Login.

• When the user is logged in, it should be replaced by Logout.

You can control that dynamically using JavaScript.

if (userIsLoggedIn) {
    bottomNavUpdateItems(
        "Home<=>Profile<=>Logout",
        "e88a<=>e853<=>e9ba",
        "https://example.com/home<=>https://example.com/profile<=>https://example.com/logout"
    );
} else {
    bottomNavUpdateItems(
        "Home<=>Profile<=>Login",
        "e88a<=>e853<=>e890",
        "https://example.com/home<=>https://example.com/profile<=>https://example.com/login"
    );
}