Show currenctly selected page in navigationbar

How-to Discussions
1

Hi!

I have a navigation menu docked to the bottom of the app. The app is using multi-level navigation.

What would be best practice to keep an icon/menu-element in a selected state after navigating to the selected router destination?

2

Hi Pål,

one decent way is to have a stand-alone JavaScript module that holds a list of your pages, where for each of them you have an Observable boolean property to store the active state in.

Then, as you navigate (or from <Activated>) you set which page is active.

Here’s what the JS module (stored in pages.js) would look like. Code not tested:

var Observable = require("FuseJS/Observable");
var pages = [
    {name: "pageOne", isActive: Observable(true)},
    {name: "pageTwo", isActive: Observable(false)},
    {name: "pageThree", isActive: Observable(false)}
];

function setActive(name) {
    pages.forEach(function(p) {
        if (p.name == name) {
            p.isActive.value = true;
        } else {
            p.isActive.value = false;
        }
    });
}

module.exports = {
    setActive: setActive
    pages: pages
};

And then, you could access it from the navigation menu like this:

<StackPanel ux:Class="NavigationMenuBar">
    <JavaScript>
    var Pages = require("pages.js");
    module.exports = {
        pages: Pages.pages
    };
    </JavaScript>
    <Each Items="pages">
        <WhileTrue Value="{isActive}">
        </WhileTrue>
        <WhileFalse Value="{isActive}">
        </WhileFalse>
    </Each>
</StackPanel>