Navbar active state does not reflect the currently displayed page

Issue

The navigation bar (Navbar) highlights the last menu item that was clicked instead of automatically reflecting the page that is currently displayed to the user.
As a result, when a user navigates between pages using breadcrumbs, buttons, nanoflows, microflows, or other navigation mechanisms, the previously selected Navbar item remains active.
The active state is not synchronized with the current page.

Environment

Studio Pro (all versions)

Cause

This behavior is expected, as the Navbar does not support interaction with other elements.

The Navbar component does not automatically synchronize its active state with the currently displayed page. The active state is triggered only by a direct click on a Navbar element, and there is no built-in mechanism to update it when navigation occurs via other means (e.g., breadcrumbs, nanoflows, or direct URL access).

Solution/Workaround

There is currently no out-of-the-box solution. The following workaround can be applied while a platform-level fix is being investigated:

1. Manually reset the active state of Navbar elements using JavaScript actions within nanoflows. This involves programmatically updating the active class on the relevant Navbar element when a page is loaded or navigation occurs.

2. Call the nanoflow that resets the Navbar state on each page's on-load event or as part of every navigation action to ensure the correct element is highlighted.

Note: This workaround does not cover the scenario where a user opens a page directly via a URL, in which case the Navbar active state will still not reflect the current page.

Custom developments are not supported by Mendix.

Additional information

Not applicable