AppBar.layout property

Article
04/14/2015

Applies to Windows only

Gets or sets the layout of the app bar contents.

Syntax

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

Property value

Type: String

One of the following values:

Value	Condition
"commands"	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". 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. 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).
"custom"	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.
"menu"	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".

"commands"

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".

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.

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).

"custom"

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.

"menu"

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".

Requirements

Minimum supported client	Windows 8 [Windows Store apps only]
Minimum supported server	Windows Server 2012 [Windows Store apps only]
Minimum supported phone	None supported
Namespace	WinJS.UI
Library	Winjs.js

AppBar.layout property

Syntax

Property value

Requirements

See also

Additional resources