Content layout system for the content area within the Page component. It divides up the content area into combinations like navigation+content, content+sidebar, etc.

Note this component can only be used once per document, within the #content element; and it cannot be nested.

If you need generic columns of content further down in the DOM, use layout groups.


API status: general
Web resource key: com.atlassian.auiplugin:aui-page-layout
AMD Module key: N/A
Experimental API: 5
General API: 5.1



The core layout requires the page panel, a page panel inner and at least one panel - usually a content panel. The extra elements are used across layout variations so do not omit them.

For a simple content area with no divisions:

Navigation (aui-page-panel-nav), sidebar (aui-page-panel-sidebar) and generic items (aui-page-panel-item) can be added as siblings of content (aui-page-panel-content). By default the items are rendered as columns.

A three-column layout:

The generic item is relatively unstyled - it allows custom extensions to content layouts where required:


Called with JavaScript:

Server-side Soy: