type property

AppBarCommand.type property

Applies to Windows and Windows Phone

Gets or sets the type of the command.


  data-win-options="{type: value}">

var type = appBarCommand.type;
appBarCommand.type = type;

Property value

Type: String

The command can be one of the following types:

  • "button"

    This is the default value for the type. It defines a standard button and can only be applied to a <button> element.

  • "toggle"

    This creates a button that can be selected or de-selected. When the button is selected, the colors of the icon of the AppBarCommand are reversed (black to white and white to black, for example). Only a <button> element can host a toggle AppBarCommand.

  • "flyout"

    This creates a button that reveals an HTML fragment adjacent to it (a flyout). To create a flyout AppBarCommand, you need to specify both the type as "flyout" and set its flyout property. The flyout property must reference a defined Flyout control. Only a <button> element can host a flyout AppBarCommand.

  • "separator"

    This creates a horizontal line in the AppBar, to create a visual separation between other AppBarCommand controls. Only a <hr/> element can host a separator AppBarCommand.

  • "content"

    This creates an AppBarCommand that can host other HTML markup inside of it, including text, <input> tags, and even a subset of WinJS controls. Only a <div> element can host a content AppBarCommand.


For an app bar toggle command to work with accessibility tools like Narrator, you must attach an onPropertyChange event handler by using the attachEvent method. You must use the detachEvent method to remove the event handler.


Minimum WinJS version

WinJS 1.0



See also

Your first app - Part 3: PageControl objects and navigation
Navigating between pages (HTML)
Adding app bars
Adding nav bars
HTML AppBar control sample
HTML NavBar control sample
Navigation and navigation history sample
Command patterns
Navigation patterns
Guidelines for app bars
Bottom app bar
Top app bar



© 2017 Microsoft