AppBar.layout property

Applies to Windows only

Gets or sets the layout of the app bar contents.


var layout = appBar.layout;
appBar.layout = layout;

Property value

Type: String

One of the following values:


The content of the app bar is laid out using AppBarCommand.section.

A layout property set to "commands" can include two sections: "global" and "selection".

  • Applies to Windows

Note  For Windows Store apps:

"global" maps to right and "selection" maps to left in LTR (left-to-right) layouts. The opposite is true in RTL (right-to-left) layouts.

"global" is intended for commands that should be displayed at all times.

"selection" is intended for context commands for selected objects.

  • Applies to Windows Phone

Note  For Windows Phone Store apps:

"global" is for primary commands that are always visible in the app bar. Only the first four commands declared as "global" are displayed.

"selection" is for non-primary (or secondary) commands. These are text-based menu items that appear when a primary command is invoked. All commands declared as "selection" are displayed (based on display resolution).


The app is responsible for its own custom layout.

An AppBar control with a layout property set to "custom" can contain any HTML. However, an app bar with a "custom" layout doesn’t have the full functionality available to an app bar using the "commands" layout.


The content of the app bar is laid into primary and secondary sections. This is the default value.

Commands in the primary section are displayed whenever possible; commands in the secondary section are hidden initially and displayed in an overflow area.

To specify the section for a command, set its section property to "primary" or "secondary".



Minimum supported client

Windows 8 [Windows Store apps only]

Minimum supported server

Windows Server 2012 [Windows Store apps only]

Minimum supported phone

None supported





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