diff --git a/modules/ve/ui/dialogs/ve.ui.PagedDialog.js b/modules/ve/ui/dialogs/ve.ui.PagedDialog.js
index 94713b6b0d..7bd2acd586 100644
--- a/modules/ve/ui/dialogs/ve.ui.PagedDialog.js
+++ b/modules/ve/ui/dialogs/ve.ui.PagedDialog.js
@@ -78,10 +78,11 @@ ve.ui.PagedDialog.prototype.onOutlineSelect = function ( item ) {
  * @param {string} name Symbolic name of page
  * @param {jQuery|string} [label] Page label
  * @param {string} [icon] Symbolic name of icon
+ * @param {number} [level=0] Indentation level
  * @chainable
  */
-ve.ui.PagedDialog.prototype.addPage = function ( name, label, icon ) {
-	var config = { '$$': this.$$, 'icon': icon, 'label': label || name };
+ve.ui.PagedDialog.prototype.addPage = function ( name, label, icon, level ) {
+	var config = { '$$': this.$$, 'icon': icon, 'label': label || name, 'level': level || 0 };
 
 	// Create and add page panel and outline item
 	this.pages[name] = new ve.ui.PanelLayout( config );
diff --git a/modules/ve/ui/styles/ve.ui.Widget.css b/modules/ve/ui/styles/ve.ui.Widget.css
index ad71f279fa..08dde78d31 100644
--- a/modules/ve/ui/styles/ve.ui.Widget.css
+++ b/modules/ve/ui/styles/ve.ui.Widget.css
@@ -187,6 +187,16 @@
 	font-size: 1.1em;
 }
 
+.ve-ui-outlineItemWidget-level-1 {
+	padding-left: 5.5em;
+	background-position: 3em center;
+}
+
+.ve-ui-outlineItemWidget-level-2 {
+	padding-left: 7.5em;
+	background-position: 5em center;
+}
+
 .ve-ui-outlineItemWidget.ve-ui-optionWidget-selected {
 	background-color: #a7dcff;
 	text-shadow: 0 1px 1px rgba(255,255,255,0.5);
diff --git a/modules/ve/ui/widgets/ve.ui.OutlineItemWidget.js b/modules/ve/ui/widgets/ve.ui.OutlineItemWidget.js
index aed8c88b71..1eda48b79b 100644
--- a/modules/ve/ui/widgets/ve.ui.OutlineItemWidget.js
+++ b/modules/ve/ui/widgets/ve.ui.OutlineItemWidget.js
@@ -14,6 +14,8 @@
  * @constructor
  * @param {Mixed} data Item data
  * @param {Object} [config] Config options
+ * @cfg {string} [icon] Symbolic name of icon
+ * @cfg {number} [level] Indentation level
  */
 ve.ui.OutlineItemWidget = function VeUiOutlineItemWidget( data, config ) {
 	// Config intialization
@@ -22,11 +24,15 @@ ve.ui.OutlineItemWidget = function VeUiOutlineItemWidget( data, config ) {
 	// Parent constructor
 	ve.ui.OptionWidget.call( this, data, config );
 
+	// Properties
+	this.level = 0;
+
 	// Initialization
 	this.$.addClass( 've-ui-outlineItemWidget' );
 	if ( config.icon ) {
 		this.$.addClass( 've-ui-icon-' + config.icon );
 	}
+	this.setLevel( config.level );
 };
 
 /* Inheritance */
@@ -36,3 +42,42 @@ ve.inheritClass( ve.ui.OutlineItemWidget, ve.ui.OptionWidget );
 /* Static Properties */
 
 ve.ui.OutlineItemWidget.static.highlightable = false;
+
+ve.ui.OutlineItemWidget.static.levelClass = 've-ui-outlineItemWidget-level-';
+
+ve.ui.OutlineItemWidget.static.levels = 3;
+
+/* Methods */
+
+/**
+ * Get indentation level.
+ *
+ * @returns {number} Indentation level
+ */
+ve.ui.OutlineItemWidget.prototype.getLevel = function () {
+	return this.level;
+};
+
+/**
+ * Set indentation level.
+ *
+ * @method
+ * @param {number} [level=0] Indentation level, in the range of [0,#maxLevel]
+ * @chainable
+ */
+ve.ui.OutlineItemWidget.prototype.setLevel = function ( level ) {
+	var levels = this.constructor.static.levels,
+		levelClass = this.constructor.static.levelClass,
+		i = levels;
+
+	this.level = level ? Math.max( 0, Math.min( levels - 1, level ) ) : 0;
+	while ( i-- ) {
+		if ( this.level === i ) {
+			this.$.addClass( levelClass + i );
+		} else {
+			this.$.removeClass( levelClass + i );
+		}
+	}
+
+	return this;
+};