Add custom text & image to drop down bar


  • HI,

    I would like to do exactly what the title says.  Add multiple images(icons) and text to the drop down menu using HTML & WinJS.  Where do I start?


    Monday, January 07, 2013 7:09 AM


  • Hi nmillett,

    Do you mean the built-in flyout menu provided in WinJS controls? If so, flyout menu doesn't have much customization options for the menu item(command button). You have to define each menu itemm (command button) through <button> element and use CSS styles to customize its appearance if necessary (such as adjust its foreground and background color or apply a background image ...).

    If you want to provide your custom UI by completely, you can use a normal flyout (WinJS.UI.Flyout) instead. The flyout control is hosted in a <div> element in html and you can add custom html content into it to compose your custom UI layout. For example, you can add some image elements into it and wrap "click" events so as to simulate  image menu buttons.

    #Quickstart: adding a Flyout(Windows Store apps using JavaScript and HTML) (Windows)

    #Windows Store App: Working with HTML 5 Menu Flyout

    You can get more about using flyout control through the windows store samples:

    #HTML flyout control sample

    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Song Tian Friday, January 11, 2013 9:41 AM
    Tuesday, January 08, 2013 2:51 AM