Question

How can I make a navigation menu in Windows 8 Metro Javascript with header menus and section labels like the picture below?

Answer 1

First of is to define the HTML:

 <!-- Define the header menu -->
    <div id="headerMenu" data-win-control="WinJS.UI.Menu">
        <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'section1MenuItem',label:'Section page'}"></button>
        <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'section2MenuItem',label:'Section page'}"></button>
        <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'section3MenuItem',label:'Section page'}"></button>

        <hr data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'separator',type:'separator'}" />
        <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'homeMenuItem',label:'Home'}">
        </button>
    </div>


 <!-- The content that will be loaded and displayed. -->
    <header aria-label="Header content" role="banner">
        <button class="win-backbutton" aria-label="Back"></button>
        <div class="titlearea win-type-ellipsis">
            <button class="titlecontainer">
                <h1>
                    <span class="pagetitle">Header</span>
                    <span class="chevron win-type-x-large">&#xe099</span>
                </h1>
            </button>
            <h2 class="pagesubtitle">With neat flyin effect</h2>
        </div>
     </header>

Then comes the Javascript:

   // This function is called whenever a user navigates to this page. It
   // populates the page elements with the app's data.
   ready: function (element, options) {

        document.querySelector(".titlearea").addEventListener("click", this.showHeaderMenu, false);
        document.getElementById("section1").addEventListener("click", function () { self.goToSection(0); }, false);
        document.getElementById("section2").addEventListener("click", function () { self.goToSection(1); }, false);
        document.getElementById("section3").addEventListener("click", function () { self.goToSection(2); }, false);
        document.getElementById("homeMenuItem").addEventListener("click", function () { self.goHome(); }, false);

    },
    // Binds the menu to an anchor and shows it
    showHeaderMenu: function () {

        var title = document.querySelector("header .titlearea");
        var menu = document.getElementById("headerMenu").winControl;
        menu.anchor = title;
        menu.placement = "bottom";
        menu.alignment = "left";

        menu.show();

    },
    // Navigate to a section
    goToSection: function (section) {
        switch (section) {
            case 1:
                WinJS.Navigation.navigate("/pages/section1/section1.html");
                break;
            case 2:
                WinJS.Navigation.navigate("/pages/section2/section2.html");
                break;
            case 3:
                WinJS.Navigation.navigate("/pages/section3/section3.html");
                break;

        }
        WinJS.log && WinJS.log("You are viewing the #" + section + " section.", "sample", "status");

    },
    // Go to the home screen
    goHome: function () {

        WinJS.Navigation.navigate("/default.html");

    },

Just wanted to share, hope this helps someone!