Creating a Simple Nav Bar

You need to work with three WinJS controls to create a nav bar: the NavBar control, the NavBarContainer control, and the NavBarCommand control. Here is how you can create a simple nav bar that contains a single row of navigation links:

Click here to view code image

<!-- Nav Bar Control --><div id="navBar1"    data-win-control="WinJS.UI.NavBar"    data-win-options="{        placement:'top'    }">    <!-- Nav Bar Container -->    <div data-win-control="WinJS.UI.NavBarContainer">        <!-- Nav Bar Commands -->        <div data-win-control="WinJS.UI.NavBarCommand"            data-win-options="{                label:'Home',                icon:'home',                location: '/pages/home/home.html'            }">         ...

Get Windows® 8.1 Apps with HTML5 and JavaScript Unleashed now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial