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:

Value Condition

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