Quickstart: adding a header menu (HTML)
This quickstart explains how to add a header menu to your Windows app using JavaScript.
Prerequisites
- Building your first Windows Store app with JavaScript
- Commanding design for Windows Store apps
- Navigation design for Windows Store apps
- Quickstart: adding a menu
Define the header and menu
To create a header menu:
- Convert your app's title into a button that launches a Menu control.
- Add a chevron next to the title to indicate that it launches a menu.
- Populate the menu control with items that navigate your app to the proper sections.
When you finish this quickstart, you'll have a header menu that looks like this:
![]() |
| A header menu for a music app. |
The following code defines a banner with a chevron at the end and also the menu. You can find this code in the header-menu.html file of the Header menu sample.
<!-- Define the banner with a chevron at the end --> <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">Music</span> <span class="chevron win-type-x-large"></span></h1> </button> </header> <!-- Define the header menu --> <div id="headerMenu" data-win-control="WinJS.UI.Menu"> <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'collectionMenuItem',label:'Collection'}"> </button> <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'marketplaceMenuItem',label:'Marketplace'}"> </button> <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'newsMenuItem',label:'News'}"> </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>
Attach click events to the the header menu items
The following code attaches click event handlers to the menu content. The following code is in the header-menu.js file of the Header menu sample.
var page = WinJS.UI.Pages.define("/html/header-menu.html", { ready: function (element, options) { document.querySelector(".titlearea").addEventListener("click", showHeaderMenu, false); document.getElementById("artistsMenuItem").addEventListener("click", function() { goToSection("Collection"); }, false); document.getElementById("albumsMenuItem").addEventListener("click", function () { goToSection("Marketplace"); }, false); document.getElementById("songsMenuItem").addEventListener("click", function () { goToSection("News"); }, false); document.getElementById("homeMenuItem").addEventListener("click", function () { goHome(); }, false); } }); // Place the flyout under the title and left-aligned function showHeaderMenu() { var title = document.querySelector("header .titlearea"); var menu = document.getElementById("headerMenu").winControl; menu.anchor = title; menu.placement = "bottom"; menu.alignment = "left"; menu.show(); }
Optional: Update header subtitles as users navigate
To aid way-finding, you can update the subtitles as users navigate through your app.
// When navigating using the header menu for sections,
// change the subtitle to reflect the current pivot
function goToSection(section) {
WinJS.log && WinJS.log("You are viewing the " + section + " section.",
"sample", "status");
}
// Hide the subtitle if no pivot is being used
function goHome() {
WinJS.log && WinJS.log("You are home.", "sample", "status");
}
Apply styles
You can view these styles in the header-menu.css file.
/* styles */
/* Styles for the header */
header[role=banner]
{
/* Define a grid with columns for the back button and page title. */
-ms-grid-columns: 120px 1fr;
-ms-grid-rows: 1fr;
display: -ms-grid;
}
header[role=banner] .win-backbutton
{
-ms-grid-column:1;
margin-left: 39px;
margin-top: 59px;
}
header[role=banner] .titlearea {
-ms-grid-column:2;
padding-top:43px;
}
header[role=banner] .titlecontainer
{
display:inline;
background-color:transparent;
border:none;
}
header[role=banner] .subtitlecontainer
{
display:inline;
margin-left:26px;
}
header[role=banner] .titlearea .pagetitle
{
width: calc(100% - 20px);
}
header[role=banner] .titlearea .chevron {
vertical-align:8px;
}
header[role=banner] .titlecontainer:hover
{
color: rgb(50,154,163);
}
header[role=banner] .titlecontainer:active
{
color: rgb(37,187,196);
}
#headerMenu {
width:300px;
}
Summary
In this quickstart you added a header menu to your app.
Related topics
- Menu
- MenuCommand
- Header menu sample
- Navigation design
- Supporting navigation
- Choosing the right UI surfaces
- Understanding the Windows 8 silhouette
