Quickstart: Add a menu
Collapse the table of content
Expand the table of content

Quickstart: Adding a menu (HTML)

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

This quickstart explains how to create a menu to present commands to the user. (Windows only)


Building your first Windows Windows Store app with JavaScript

Guidelines and checklist for flyouts

Create a menu

In this example, when the user presses the Respond button, a menu appears above the button. A menu is a control in the Windows Library for JavaScript, WinJS.UI.Menu, and should be the direct child of the <body> element.

    <!-- Button that launches the respond menu. -->
    <button id="respondButton" aria-haspopup="true">Respond</button>

    <!-- Respond menu. -->
    <div id="respondFlyout" data-win-control="WinJS.UI.Menu">
        <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'alwaysSaveMenuItem',label:'Always save drafts',type:'toggle', selected:'true'}"></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:'replyMenuItem',label:'Reply'}"></button>
        <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'replyAllMenuItem',label:'Reply All'}"></button>
        <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'forwardMenuItem',label:'Forward'}"></button>

// Initialize WinJS controls.

// Initialize event listeners.
document.getElementById("respondButton").addEventListener("click", showRespondFlyout, false);
document.getElementById("alwaysSaveMenuItem").addEventListener("click", alwaysSave, false);
document.getElementById("replyMenuItem").addEventListener("click", reply, false);
document.getElementById("replyAllMenuItem").addEventListener("click", replyAll, false);
document.getElementById("forwardMenuItem").addEventListener("click", forward, false);

// Command and menu functions.
function showFlyout(flyout, anchor, placement) {
    flyout.winControl.show(anchor, placement);
function showRespondFlyout() {
    showFlyout(respondFlyout, respondButton, "bottom");
function hideFlyout(flyout) {
function alwaysSave() {
    var alwaysSaveState = document.getElementById("alwaysSaveMenuItem").winControl.selected;
function reply() {
function replyAll() {
function forward() {


In this quickstart you created a menu to present commands to the user.



© 2018 Microsoft