Merge branch 'feature/layoutzones' into 1.x

Conflicts: src/Orchard.Web/Modules/Orchard.Search/Handlers/SearchSettingsPartHandler.cs
2025-10-15 19:54:57 +08:00 · 2015-04-22 13:09:36 +02:00
parent 5dabbf7aec b639d893c0
commit c32d4f485b
116 changed files with 1277 additions and 282 deletions
--- a/src/Orchard.Web/Modules/Orchard.DynamicForms/Drivers/CheckboxElementDriver.cs
+++ b/src/Orchard.Web/Modules/Orchard.DynamicForms/Drivers/CheckboxElementDriver.cs
@@ -64,7 +64,7 @@ namespace Orchard.DynamicForms.Drivers {
            });
        }

-        protected override void OnDisplaying(CheckBox element, ElementDisplayContext context) {
+        protected override void OnDisplaying(CheckBox element, ElementDisplayingContext context) {
            context.ElementShape.TokenizedValue = _tokenizer.Replace(element.RuntimeValue, null);
        }
    }
--- a/src/Orchard.Web/Modules/Orchard.DynamicForms/Drivers/CommonFormElementDriver.cs
+++ b/src/Orchard.Web/Modules/Orchard.DynamicForms/Drivers/CommonFormElementDriver.cs
@@ -41,7 +41,7 @@ namespace Orchard.DynamicForms.Drivers {
            });
        }

-        protected override void OnDisplaying(FormElement element, ElementDisplayContext context) {
+        protected override void OnDisplaying(FormElement element, ElementDisplayingContext context) {
            context.ElementShape.Metadata.Wrappers.Add("FormElement_Wrapper");
            context.ElementShape.Child.Add(New.PlaceChildContent(Source: context.ElementShape));

--- a/src/Orchard.Web/Modules/Orchard.DynamicForms/Drivers/EmailFieldElementDriver.cs
+++ b/src/Orchard.Web/Modules/Orchard.DynamicForms/Drivers/EmailFieldElementDriver.cs
@@ -75,7 +75,7 @@ namespace Orchard.DynamicForms.Drivers {
            });
        }

-        protected override void OnDisplaying(EmailField element, ElementDisplayContext context) {
+        protected override void OnDisplaying(EmailField element, ElementDisplayingContext context) {
            context.ElementShape.TokenizedValue = _tokenizer.Replace(element.RuntimeValue, null);
        }
    }
--- a/src/Orchard.Web/Modules/Orchard.DynamicForms/Drivers/EnumerationElementDriver.cs
+++ b/src/Orchard.Web/Modules/Orchard.DynamicForms/Drivers/EnumerationElementDriver.cs
@@ -79,7 +79,7 @@ namespace Orchard.DynamicForms.Drivers {
            });
        }

-        protected override void OnDisplaying(Enumeration element, ElementDisplayContext context) {
+        protected override void OnDisplaying(Enumeration element, ElementDisplayingContext context) {
            var tokenizedOptions = _tokenizer.Replace(element.Options).ToArray();
            var typeName = element.GetType().Name;
            var displayType = context.DisplayType;
--- a/src/Orchard.Web/Modules/Orchard.DynamicForms/Drivers/FormElementDriver.cs
+++ b/src/Orchard.Web/Modules/Orchard.DynamicForms/Drivers/FormElementDriver.cs
@@ -128,7 +128,7 @@ namespace Orchard.DynamicForms.Drivers {
            });
        }

-        protected override void OnDisplaying(Form element, ElementDisplayContext context) {
+        protected override void OnDisplaying(Form element, ElementDisplayingContext context) {
            var controller = _currentControllerAccessor.CurrentController;
            var values = controller.FetchPostedValues(element);
            var modelState = controller.FetchModelState(element);
--- a/src/Orchard.Web/Modules/Orchard.DynamicForms/Drivers/HiddenFieldElementDriver.cs
+++ b/src/Orchard.Web/Modules/Orchard.DynamicForms/Drivers/HiddenFieldElementDriver.cs
@@ -33,7 +33,7 @@ namespace Orchard.DynamicForms.Drivers {
            });
        }

-        protected override void OnDisplaying(HiddenField element, ElementDisplayContext context) {
+        protected override void OnDisplaying(HiddenField element, ElementDisplayingContext context) {
            context.ElementShape.TokenizedValue = _tokenizer.Replace(element.Value, null);
        }
    }
--- a/src/Orchard.Web/Modules/Orchard.DynamicForms/Drivers/QueryElementDriver.cs
+++ b/src/Orchard.Web/Modules/Orchard.DynamicForms/Drivers/QueryElementDriver.cs
@@ -116,7 +116,7 @@ namespace Orchard.DynamicForms.Drivers {
            });
        }

-        protected override void OnDisplaying(Query element, ElementDisplayContext context) {
+        protected override void OnDisplaying(Query element, ElementDisplayingContext context) {
            var queryId = element.QueryId;
            var typeName = element.GetType().Name;
            var category = element.Category.ToSafeName();
--- a/src/Orchard.Web/Modules/Orchard.DynamicForms/Drivers/RadioButtonElementDriver.cs
+++ b/src/Orchard.Web/Modules/Orchard.DynamicForms/Drivers/RadioButtonElementDriver.cs
@@ -39,7 +39,7 @@ namespace Orchard.DynamicForms.Drivers {
            });
        }

-        protected override void OnDisplaying(RadioButton element, ElementDisplayContext context) {
+        protected override void OnDisplaying(RadioButton element, ElementDisplayingContext context) {
            context.ElementShape.TokenizedValue = _tokenizer.Replace(element.Value, null);
        }
    }
--- a/src/Orchard.Web/Modules/Orchard.DynamicForms/Drivers/ReCaptchaElementDriver.cs
+++ b/src/Orchard.Web/Modules/Orchard.DynamicForms/Drivers/ReCaptchaElementDriver.cs
@@ -42,7 +42,7 @@ namespace Orchard.DynamicForms.Drivers {
            });
        }

-        protected override void OnDisplaying(ReCaptcha element, ElementDisplayContext context) {
+        protected override void OnDisplaying(ReCaptcha element, ElementDisplayingContext context) {
            var workContext = _services.WorkContext;
            var currentSite = workContext.CurrentSite;
            var settings = currentSite.As<ReCaptchaSettingsPart>();
--- a/src/Orchard.Web/Modules/Orchard.DynamicForms/Drivers/TaxonomyElementDriver.cs
+++ b/src/Orchard.Web/Modules/Orchard.DynamicForms/Drivers/TaxonomyElementDriver.cs
@@ -120,7 +120,7 @@ namespace Orchard.DynamicForms.Drivers {
            });
        }

-        protected override void OnDisplaying(Taxonomy element, ElementDisplayContext context) {
+        protected override void OnDisplaying(Taxonomy element, ElementDisplayingContext context) {
            var taxonomyId = element.TaxonomyId;
            var typeName = element.GetType().Name;
            var displayType = context.DisplayType;
--- a/src/Orchard.Web/Modules/Orchard.DynamicForms/Drivers/TextAreaElementDriver.cs
+++ b/src/Orchard.Web/Modules/Orchard.DynamicForms/Drivers/TextAreaElementDriver.cs
@@ -87,7 +87,7 @@ namespace Orchard.DynamicForms.Drivers {
            });
        }

-        protected override void OnDisplaying(TextArea element, ElementDisplayContext context) {
+        protected override void OnDisplaying(TextArea element, ElementDisplayingContext context) {
            context.ElementShape.TokenizedValue = _tokenizer.Replace(element.RuntimeValue, null);
        }
    }
--- a/src/Orchard.Web/Modules/Orchard.DynamicForms/Drivers/TextFieldElementDriver.cs
+++ b/src/Orchard.Web/Modules/Orchard.DynamicForms/Drivers/TextFieldElementDriver.cs
@@ -75,7 +75,7 @@ namespace Orchard.DynamicForms.Drivers {
            });
        }

-        protected override void OnDisplaying(TextField element, ElementDisplayContext context) {
+        protected override void OnDisplaying(TextField element, ElementDisplayingContext context) {
            context.ElementShape.TokenizedValue = _tokenizer.Replace(element.RuntimeValue, null);
        }
    }
--- a/src/Orchard.Web/Modules/Orchard.DynamicForms/Drivers/ValidationElementDriver.cs
+++ b/src/Orchard.Web/Modules/Orchard.DynamicForms/Drivers/ValidationElementDriver.cs
@@ -60,7 +60,7 @@
 //            return Editor(context, validatorsEditor);
 //        }

-//        protected override void OnDisplaying(FormElement element, ElementDisplayContext context) {
+//        protected override void OnDisplaying(FormElement element, ElementDisplayingContext context) {
 //            if (context.DisplayType == "Design" || element.Form == null)
 //                return;

--- a/src/Orchard.Web/Modules/Orchard.DynamicForms/Handlers/ClientValidationRegistrationCoordinator.cs
+++ b/src/Orchard.Web/Modules/Orchard.DynamicForms/Handlers/ClientValidationRegistrationCoordinator.cs
@@ -21,7 +21,7 @@ namespace Orchard.DynamicForms.Handlers {
            }
        }

-        void IElementEventHandler.Displaying(ElementDisplayContext context) {
+        void IElementEventHandler.Displaying(ElementDisplayingContext context) {
            if (context.DisplayType == "Design")
                return;

@@ -45,6 +45,8 @@ namespace Orchard.DynamicForms.Handlers {
            context.ElementShape.ClientValidationAttributes = registrationContext.ClientAttributes;
        }

+        void IElementEventHandler.CreatingDisplay(ElementCreatingDisplayShapeContext context) { }
+        void IElementEventHandler.Displayed(ElementDisplayedContext context) {}
        void IFormElementEventHandler.GetElementValue(FormElement element, ReadElementValuesContext context) { }
        void IElementEventHandler.Creating(ElementCreatingContext context) {}
        void IElementEventHandler.Created(ElementCreatedContext context) {}
--- a/src/Orchard.Web/Modules/Orchard.DynamicForms/Scripts/Forms.js
+++ b/src/Orchard.Web/Modules/Orchard.DynamicForms/Scripts/Forms.js
@@ -30,8 +30,8 @@
 var LayoutEditor;
 (function ($, LayoutEditor) {

-    LayoutEditor.Form = function (data, htmlId, htmlClass, htmlStyle, isTemplated, name, formBindingContentType, contentType, contentTypeLabel, contentTypeClass, hasEditor, children) {
-        LayoutEditor.Element.call(this, "Form", data, htmlId, htmlClass, htmlStyle, isTemplated);
+    LayoutEditor.Form = function (data, htmlId, htmlClass, htmlStyle, isTemplated, name, formBindingContentType, contentType, contentTypeLabel, contentTypeClass, hasEditor, rule, children) {
+        LayoutEditor.Element.call(this, "Form", data, htmlId, htmlClass, htmlStyle, isTemplated, rule);
        LayoutEditor.Container.call(this, ["Grid", "Content"], children);

        var self = this;
@@ -62,6 +62,10 @@ var LayoutEditor;
            });
        }

+        this.allowSealedFocus = function () {
+            return this.children.length === 0;
+        };
+
        this.setChildren = function (children) {
            this.children = children;
            _(this.children).each(function (child) {
@@ -96,6 +100,7 @@ var LayoutEditor;
            value.contentTypeLabel,
            value.contentTypeClass,
            value.hasEditor,
+            value.rule,
            LayoutEditor.childrenFrom(value.children));
    };

--- a/src/Orchard.Web/Modules/Orchard.DynamicForms/Scripts/Forms.min.js
+++ b/src/Orchard.Web/Modules/Orchard.DynamicForms/Scripts/Forms.min.js
@@ -1 +1 @@
-angular.module("LayoutEditor").directive("orcLayoutForm",["$compile","scopeConfigurator","environment",function(n,t,i){return{restrict:"E",scope:{element:"="},controller:["$scope","$element",function(n,i){t.configureForElement(n,i);t.configureForContainer(n,i);n.sortableOptions.axis="y";n.edit=function(){n.$root.editElement(n.element).then(function(t){t.cancel||(n.element.data=decodeURIComponent(t.element.data),n.element.name=t.elementEditorModel.name,n.element.formBindingContentType=t.elementEditorModel.formBindingContentType,n.$apply())})}}],templateUrl:i.templateUrl("Form"),replace:!0}}]);var LayoutEditor;(function(n,t){t.Form=function(i,r,u,f,e,o,s,h,c,l,a,v){var y,p;t.Element.call(this,"Form",i,r,u,f,e);t.Container.call(this,["Grid","Content"],v);y=this;this.isContainable=!0;this.dropTargetClass="layout-common-holder";this.contentType=h;this.contentTypeLabel=c;this.contentTypeClass=l;this.name=o||"Untitled";this.formBindingContentType=s;this.hasEditor=a;this.toObject=function(){var n=this.elementToObject();return n.name=this.name,n.formBindingContentType=this.formBindingContentType,n.children=this.childrenToObject(),n};p=this.getEditorObject;this.getEditorObject=function(){var t=p();return n.extend(t,{FormName:this.name,FormBindingContentType:this.formBindingContentType})};this.setChildren=function(n){this.children=n;_(this.children).each(function(n){n.parent=y;y.linkChild(n)})};this.linkChild=function(t){var i=t.getEditorObject;t.getEditorObject=function(){var t=i();return n.extend(t,{FormBindingContentType:y.formBindingContentType})}};this.setChildren(v)};t.Form.from=function(n){return new t.Form(n.data,n.htmlId,n.htmlClass,n.htmlStyle,n.isTemplated,n.name,n.formBindingContentType,n.contentType,n.contentTypeLabel,n.contentTypeClass,n.hasEditor,t.childrenFrom(n.children))};t.registerFactory("Form",function(n){return t.Form.from(n)})})(jQuery,LayoutEditor||(LayoutEditor={}));
+angular.module("LayoutEditor").directive("orcLayoutForm",["$compile","scopeConfigurator","environment",function(n,t,i){return{restrict:"E",scope:{element:"="},controller:["$scope","$element",function(n,i){t.configureForElement(n,i);t.configureForContainer(n,i);n.sortableOptions.axis="y";n.edit=function(){n.$root.editElement(n.element).then(function(t){t.cancel||(n.element.data=decodeURIComponent(t.element.data),n.element.name=t.elementEditorModel.name,n.element.formBindingContentType=t.elementEditorModel.formBindingContentType,n.$apply())})}}],templateUrl:i.templateUrl("Form"),replace:!0}}]);var LayoutEditor;(function(n,t){t.Form=function(i,r,u,f,e,o,s,h,c,l,a,v,y){var p,w;t.Element.call(this,"Form",i,r,u,f,e,v);t.Container.call(this,["Grid","Content"],y);p=this;this.isContainable=!0;this.dropTargetClass="layout-common-holder";this.contentType=h;this.contentTypeLabel=c;this.contentTypeClass=l;this.name=o||"Untitled";this.formBindingContentType=s;this.hasEditor=a;this.toObject=function(){var n=this.elementToObject();return n.name=this.name,n.formBindingContentType=this.formBindingContentType,n.children=this.childrenToObject(),n};w=this.getEditorObject;this.getEditorObject=function(){var t=w();return n.extend(t,{FormName:this.name,FormBindingContentType:this.formBindingContentType})};this.allowSealedFocus=function(){return this.children.length===0};this.setChildren=function(n){this.children=n;_(this.children).each(function(n){n.parent=p;p.linkChild(n)})};this.linkChild=function(t){var i=t.getEditorObject;t.getEditorObject=function(){var t=i();return n.extend(t,{FormBindingContentType:p.formBindingContentType})}};this.setChildren(y)};t.Form.from=function(n){return new t.Form(n.data,n.htmlId,n.htmlClass,n.htmlStyle,n.isTemplated,n.name,n.formBindingContentType,n.contentType,n.contentTypeLabel,n.contentTypeClass,n.hasEditor,n.rule,t.childrenFrom(n.children))};t.registerFactory("Form",function(n){return t.Form.from(n)})})(jQuery,LayoutEditor||(LayoutEditor={}));
--- a/src/Orchard.Web/Modules/Orchard.DynamicForms/Scripts/Layouts/Models/Form.js
+++ b/src/Orchard.Web/Modules/Orchard.DynamicForms/Scripts/Layouts/Models/Form.js
@@ -1,8 +1,8 @@
 var LayoutEditor;
 (function ($, LayoutEditor) {

-    LayoutEditor.Form = function (data, htmlId, htmlClass, htmlStyle, isTemplated, name, formBindingContentType, contentType, contentTypeLabel, contentTypeClass, hasEditor, children) {
-        LayoutEditor.Element.call(this, "Form", data, htmlId, htmlClass, htmlStyle, isTemplated);
+    LayoutEditor.Form = function (data, htmlId, htmlClass, htmlStyle, isTemplated, name, formBindingContentType, contentType, contentTypeLabel, contentTypeClass, hasEditor, rule, children) {
+        LayoutEditor.Element.call(this, "Form", data, htmlId, htmlClass, htmlStyle, isTemplated, rule);
        LayoutEditor.Container.call(this, ["Grid", "Content"], children);

        var self = this;
@@ -33,6 +33,10 @@
            });
        }

+        this.allowSealedFocus = function () {
+            return this.children.length === 0;
+        };
+
        this.setChildren = function (children) {
            this.children = children;
            _(this.children).each(function (child) {
@@ -67,6 +71,7 @@
            value.contentTypeLabel,
            value.contentTypeClass,
            value.hasEditor,
+            value.rule,
            LayoutEditor.childrenFrom(value.children));
    };

--- a/src/Orchard.Web/Modules/Orchard.DynamicForms/Styles/forms-admin.css
+++ b/src/Orchard.Web/Modules/Orchard.DynamicForms/Styles/forms-admin.css
@@ -1,11 +1,4 @@
-.layout-editor .layout-content > .layout-element-wrapper .layout-content-markup > .validation-message,
-.layout-editor .layout-content > .layout-element-wrapper .layout-content-markup > .validation-summary {
-    border: 1px dashed #ccc;
-    padding: 0.2em;
-    background: #e8e8e8;
-}
-
-.layout-editor .layout-content > .layout-element-wrapper .layout-content-markup > .form-field-element input[type="text"],
+.layout-editor .layout-content > .layout-element-wrapper .layout-content-markup > .form-field-element input[type="text"],
 .layout-editor .layout-content > .layout-element-wrapper .layout-content-markup > .form-field-element input[type="password"],
 .layout-editor .layout-content > .layout-element-wrapper .layout-content-markup > .form-field-element input[type="email"],
 .layout-editor .layout-content > .layout-element-wrapper .layout-content-markup > .form-field-element input[type="tel"],
--- a/src/Orchard.Web/Modules/Orchard.DynamicForms/Views/Elements/ValidationMessage.Design.cshtml
+++ b/src/Orchard.Web/Modules/Orchard.DynamicForms/Views/Elements/ValidationMessage.Design.cshtml
@@ -3,7 +3,8 @@
    var element = (ValidationMessage)Model.Element;
    var forField = element.For;
 }
-<div class="validation-message">
+<div class="layout-placeholder">
+    <span class="fa fa-file-code-o"></span>
    @if (String.IsNullOrWhiteSpace(forField)) {
        @T("Validation message (target not specified)")
    }
--- a/src/Orchard.Web/Modules/Orchard.DynamicForms/Views/Elements/ValidationSummary.Design.cshtml
+++ b/src/Orchard.Web/Modules/Orchard.DynamicForms/Views/Elements/ValidationSummary.Design.cshtml
@@ -1 +1,4 @@
-<div class="validation-summary">@T("Validation summary")</div>
+<div class="layout-placeholder">
+    <span class="fa fa-file-code-o"></span>
+    @T("Validation summary")
+</div>
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Drivers/BreadcrumbsElementDriver.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Drivers/BreadcrumbsElementDriver.cs
@@ -0,0 +1,126 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using Orchard.ContentManagement;
+using Orchard.Core.Navigation.Services;
+using Orchard.Core.Title.Models;
+using Orchard.DisplayManagement;
+using Orchard.Environment.Extensions;
+using Orchard.Layouts.Elements;
+using Orchard.Layouts.Framework.Display;
+using Orchard.Layouts.Framework.Drivers;
+using Orchard.Layouts.ViewModels;
+using Orchard.UI.Navigation;
+using Orchard.Utility.Extensions;
+
+namespace Orchard.Layouts.Drivers {
+    [OrchardFeature("Orchard.Layouts.UI")]
+    public class BreadcrumbsElementDriver : ElementDriver<Breadcrumbs> {
+        private readonly IWorkContextAccessor _workContextAccessor;
+        private readonly IMenuService _menuService;
+        private readonly INavigationManager _navigationManager;
+
+        public BreadcrumbsElementDriver(IMenuService menuService, INavigationManager navigationManager, IWorkContextAccessor workContextAccessor, IShapeFactory shapeFactory) {
+            _workContextAccessor = workContextAccessor;
+            _menuService = menuService;
+            _navigationManager = navigationManager;
+            New = shapeFactory;
+        }
+
+        public dynamic New { get; set; }
+
+        protected override EditorResult OnBuildEditor(Breadcrumbs element, ElementEditorContext context) {
+            var viewModel = new BreadcrumbsEditorViewModel {
+                CurrentMenuId = element.MenuContentItemId,
+                StartLevel = element.StartLevel,
+                StopLevel = element.Levels,
+                AddCurrentPage = element.AddCurrentPage,
+                AddHomePage = element.AddHomePage,
+                Menus = _menuService.GetMenus(),
+            };
+            var editor = context.ShapeFactory.EditorTemplate(TemplateName: "Elements.Breadcrumbs", Model: viewModel);
+
+            if (context.Updater != null) {
+                if (context.Updater.TryUpdateModel(viewModel, context.Prefix, null, null)) {
+                    element.StartLevel = viewModel.StartLevel;
+                    element.Levels = viewModel.StopLevel;
+                    element.AddCurrentPage = viewModel.AddCurrentPage;
+                    element.AddHomePage = viewModel.AddHomePage;
+                    element.MenuContentItemId = viewModel.CurrentMenuId;
+                }
+            }
+
+            return Editor(context, editor);
+        }
+
+        protected override void OnDisplaying(Breadcrumbs element, ElementDisplayingContext context) {
+            var menu = _menuService.GetMenu(element.MenuContentItemId);
+
+            if (menu == null)
+                return;
+
+            var menuName = menu.As<TitlePart>().Title.HtmlClassify();
+            var currentCulture = _workContextAccessor.GetContext().CurrentCulture;
+            var menuItems = _navigationManager.BuildMenu(menu);
+            var localized = new List<MenuItem>();
+            foreach (var menuItem in menuItems) {
+                // If there is no associated content, it as culture neutral.
+                if (menuItem.Content == null)
+                    localized.Add(menuItem);
+
+                // If the menu item is culture neutral or of the current culture.
+                else if (String.IsNullOrEmpty(menuItem.Culture) || String.Equals(menuItem.Culture, currentCulture, StringComparison.OrdinalIgnoreCase))
+                    localized.Add(menuItem);
+            }
+
+            menuItems = localized;
+
+            var shapeHelper = New;
+            var request = _workContextAccessor.GetContext().HttpContext.Request;
+            var routeData = request.RequestContext.RouteData;
+            var selectedPath = NavigationHelper.SetSelectedPath(menuItems, request, routeData);
+            var menuShape = shapeHelper.Menu();
+
+
+            menuItems = selectedPath ?? new Stack<MenuItem>();
+            foreach (var menuItem in menuItems) {
+                menuItem.Items = Enumerable.Empty<MenuItem>();
+            }
+
+            // Apply level limits to breadcrumb.
+            menuItems = menuItems.Skip(element.StartLevel - 1);
+            if (element.Levels > 0) {
+                menuItems = menuItems.Take(element.Levels);
+            }
+
+            var result = new List<MenuItem>(menuItems);
+
+            // Inject the home page.
+            if (element.AddHomePage) {
+                result.Insert(0, new MenuItem {
+                    Href = _navigationManager.GetUrl("~/", null),
+                    Text = T("Home")
+                });
+            }
+
+            // Inject the current page.
+            if (!element.AddCurrentPage && selectedPath != null) {
+                result.RemoveAt(result.Count - 1);
+            }
+
+            // Prevent the home page to be added as the home page and the current page.
+            if (result.Count == 2 && String.Equals(result[0].Href, result[1].Href, StringComparison.OrdinalIgnoreCase)) {
+                result.RemoveAt(1);
+            }
+
+            menuItems = result;
+            menuShape = shapeHelper.Breadcrumb();
+            menuShape.MenuName(menuName);
+            menuShape.ContentItem(menu);
+
+            NavigationHelper.PopulateMenu(shapeHelper, menuShape, menuShape, menuItems);
+
+            context.ElementShape.Menu = menuShape;
+        }
+    }
+}
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Drivers/ColumnElementDriver.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Drivers/ColumnElementDriver.cs
@@ -1,37 +1,14 @@
-using System.Collections.Generic;
-using Orchard.Forms.Services;
-using Orchard.Layouts.Elements;
+using Orchard.Layouts.Elements;
+using Orchard.Layouts.Framework.Display;
 using Orchard.Layouts.Framework.Drivers;

 namespace Orchard.Layouts.Drivers {
-    public class ColumnElementDriver : FormsElementDriver<Column> {
-        public ColumnElementDriver(IFormManager formManager) : base(formManager) {
-        }
+    public class ColumnElementDriver : ElementDriver<Column> {

-        protected override IEnumerable<string> FormNames {
-            get {
-                yield return "Column";
-            }
-        }
-
-        protected override void DescribeForm(DescribeContext context) {
-            context.Form("Column", factory => {
-                var shape = (dynamic)factory;
-                var form = shape.Fieldset(
-                    Id: "Column",
-                    _Span: shape.Textbox(
-                        Id: "ColumnSpan",
-                        Name: "ColumnSpan",
-                        Title: "Span",
-                        Description: T("The column span.")),
-                    _Offset: shape.Textbox(
-                        Id: "ColumnOffset",
-                        Name: "ColumnOffset",
-                        Title: "Offset",
-                        Description: T("The column offset expressed in span size.")));
-
-                return form;
-            });
+        protected override void OnDisplaying(Column element, ElementDisplayingContext context) {
+            context.ElementShape.Width = element.Width;
+            context.ElementShape.Offset = element.Offset;
+            context.ElementShape.Collapsed = false;
        }
    }
 }
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Drivers/ContentItemElementDriver.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Drivers/ContentItemElementDriver.cs
@@ -37,7 +37,7 @@ namespace Orchard.Layouts.Drivers {
            return Editor(context, editor);
        }

-        protected override void OnDisplaying(ContentItem element, ElementDisplayContext context) {
+        protected override void OnDisplaying(ContentItem element, ElementDisplayingContext context) {
            var contentItemIds = context.Content != null ? RemoveCurrentContentItemId(element.ContentItemIds, context.Content.Id) : element.ContentItemIds;
            var displayType = element.DisplayType;
            var contentItems = GetContentItems(contentItemIds).ToArray();
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Drivers/ContentPartElementDriver.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Drivers/ContentPartElementDriver.cs
@@ -19,7 +19,7 @@ namespace Orchard.Layouts.Drivers {
            _transactionManager = transactionManager;
        }

-        protected override void OnDisplaying(ContentPart element, ElementDisplayContext context) {
+        protected override void OnDisplaying(ContentPart element, ElementDisplayingContext context) {
            // Content is optional context, so if it's null, we can't render the part element.
            // This typically only happens when the layout editor is used outside the context of
            // a content item and still renders the various content part elements as part of the toolbox.
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Drivers/HtmlElementDriver.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Drivers/HtmlElementDriver.cs
@@ -27,7 +27,7 @@ namespace Orchard.Layouts.Drivers {
            return Editor(context, editor);
        }

-        protected override void OnDisplaying(Html element, ElementDisplayContext context) {
+        protected override void OnDisplaying(Html element, ElementDisplayingContext context) {
            var text = element.Content;
            var flavor = "html";
            var processedText = ApplyHtmlFilters(text, flavor);
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Drivers/ImageElementDriver.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Drivers/ImageElementDriver.cs
@@ -33,7 +33,7 @@ namespace Orchard.Layouts.Drivers {
            return Editor(context, editor);
        }

-        protected override void OnDisplaying(Image element, ElementDisplayContext context) {
+        protected override void OnDisplaying(Image element, ElementDisplayingContext context) {
            var imageId = element.MediaId;
            var image = imageId != null ? GetImage(imageId.Value) : default(ImagePart);
            context.ElementShape.ImagePart = image;
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Drivers/MarkdownElementDriver.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Drivers/MarkdownElementDriver.cs
@@ -22,7 +22,7 @@ namespace Orchard.Layouts.Drivers {
            return Editor(context, editor);
        }

-        protected override void OnDisplaying(MarkdownElement element, ElementDisplayContext context) {
+        protected override void OnDisplaying(MarkdownElement element, ElementDisplayingContext context) {
            context.ElementShape.ProcessedContent = ToHtml(element.Content);
        }

--- a/src/Orchard.Web/Modules/Orchard.Layouts/Drivers/MediaItemElementDriver.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Drivers/MediaItemElementDriver.cs
@@ -39,7 +39,7 @@ namespace Orchard.Layouts.Drivers {
            return Editor(context, editor);
        }

-        protected override void OnDisplaying(MediaItem element, ElementDisplayContext context) {
+        protected override void OnDisplaying(MediaItem element, ElementDisplayingContext context) {
            var contentItemIds = RemoveCurrentContentItemId(element.MediaItemIds, context.Content.Id);
            var displayType = context.DisplayType != "Design" ? element.DisplayType : "Thumbnail";
            var contentItems = GetContentItems(contentItemIds).ToArray();
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Drivers/MenuElementDriver.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Drivers/MenuElementDriver.cs
@@ -0,0 +1,128 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using Orchard.ContentManagement;
+using Orchard.Core.Navigation.Services;
+using Orchard.Core.Title.Models;
+using Orchard.DisplayManagement;
+using Orchard.Environment.Extensions;
+using Orchard.Layouts.Elements;
+using Orchard.Layouts.Framework.Display;
+using Orchard.Layouts.Framework.Drivers;
+using Orchard.Layouts.ViewModels;
+using Orchard.UI.Navigation;
+using Orchard.Utility.Extensions;
+
+namespace Orchard.Layouts.Drivers {
+    [OrchardFeature("Orchard.Layouts.UI")]
+    public class MenuElementDriver : ElementDriver<Menu> {
+        private readonly IWorkContextAccessor _workContextAccessor;
+        private readonly IMenuService _menuService;
+        private readonly INavigationManager _navigationManager;
+
+        public MenuElementDriver(IMenuService menuService, INavigationManager navigationManager, IWorkContextAccessor workContextAccessor, IShapeFactory shapeFactory) {
+            _workContextAccessor = workContextAccessor;
+            _menuService = menuService;
+            _navigationManager = navigationManager;
+            New = shapeFactory;
+        }
+
+        public dynamic New { get; set; }
+
+        protected override EditorResult OnBuildEditor(Menu element, ElementEditorContext context) {
+            var viewModel = new MenuEditorViewModel {
+                CurrentMenuId = element.MenuContentItemId,
+                StartLevel = element.StartLevel,
+                StopLevel = element.Levels,
+                ShowFullMenu = element.ShowFullMenu,
+                Menus = _menuService.GetMenus(),
+            };
+            var editor = context.ShapeFactory.EditorTemplate(TemplateName: "Elements.Menu", Model: viewModel);
+
+            if (context.Updater != null) {
+                if (context.Updater.TryUpdateModel(viewModel, context.Prefix, null, null)) {
+                    element.StartLevel = viewModel.StartLevel;
+                    element.Levels = viewModel.StopLevel;
+                    element.ShowFullMenu = viewModel.ShowFullMenu;
+                    element.MenuContentItemId = viewModel.CurrentMenuId;
+                }
+            }
+
+            return Editor(context, editor);
+        }
+
+        protected override void OnDisplaying(Menu element, ElementDisplayingContext context) {
+            var menu = _menuService.GetMenu(element.MenuContentItemId);
+
+            if (menu == null)
+                return;
+
+            var menuName = menu.As<TitlePart>().Title.HtmlClassify();
+            var currentCulture = _workContextAccessor.GetContext().CurrentCulture;
+            var menuItems = _navigationManager.BuildMenu(menu);
+            var localized = new List<MenuItem>();
+            foreach (var menuItem in menuItems) {
+                // If there is no associated content, it as culture neutral.
+                if (menuItem.Content == null)
+                    localized.Add(menuItem);
+
+                // If the menu item is culture neutral or of the current culture.
+                else if (String.IsNullOrEmpty(menuItem.Culture) || String.Equals(menuItem.Culture, currentCulture, StringComparison.OrdinalIgnoreCase))
+                    localized.Add(menuItem);
+            }
+
+            menuItems = localized;
+
+            var shapeHelper = New;
+            var request = _workContextAccessor.GetContext().HttpContext.Request;
+            var routeData = request.RequestContext.RouteData;
+            var selectedPath = NavigationHelper.SetSelectedPath(menuItems, request, routeData);
+            var menuShape = shapeHelper.Menu();
+            var topLevelItems = menuItems.ToList();
+
+            // Apply start level by pushing children as top level items. When the start level is
+            // greater than 1 (ie. below the top level), only menu items along the selected path
+            // will be displayed.
+            for (var i = 0; topLevelItems.Any() && i < element.StartLevel - 1; i++) {
+                var temp = new List<MenuItem>();
+                // Should the menu be filtered on the currently displayed page?
+                if (element.ShowFullMenu) {
+                    foreach (var menuItem in topLevelItems) {
+                        temp.AddRange(menuItem.Items);
+                    }
+                }
+                else if (selectedPath != null) {
+                    topLevelItems = topLevelItems.Intersect(selectedPath.Where(x => x.Selected)).ToList();
+                    foreach (var menuItem in topLevelItems) {
+                        temp.AddRange(menuItem.Items);
+                    }
+                }
+                topLevelItems = temp;
+            }
+
+            // Limit the number of levels to display (down from and including the start level).
+            if (element.Levels > 0) {
+                var current = topLevelItems.ToList();
+                for (var i = 1; current.Any() && i < element.Levels; i++) {
+                    var temp = new List<MenuItem>();
+                    foreach (var menuItem in current) {
+                        temp.AddRange(menuItem.Items);
+                    }
+                    current = temp;
+                }
+                // Cut the sub-levels beneath any menu items that are at the lowest level being displayed.
+                foreach (var menuItem in current) {
+                    menuItem.Items = Enumerable.Empty<MenuItem>();
+                }
+            }
+
+            menuItems = topLevelItems;
+            menuShape.MenuName(menuName);
+            menuShape.ContentItem(menu);
+
+            NavigationHelper.PopulateMenu(shapeHelper, menuShape, menuShape, menuItems);
+
+            context.ElementShape.Menu = menuShape;
+        }
+    }
+}
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Drivers/NotificationsElementDriver.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Drivers/NotificationsElementDriver.cs
@@ -0,0 +1,43 @@
+using System.Collections.Generic;
+using System.Linq;
+using Orchard.DisplayManagement;
+using Orchard.Environment.Extensions;
+using Orchard.Layouts.Elements;
+using Orchard.Layouts.Framework.Display;
+using Orchard.Layouts.Framework.Drivers;
+using Orchard.Mvc;
+using Orchard.UI.Notify;
+
+namespace Orchard.Layouts.Drivers {
+    [OrchardFeature("Orchard.Layouts.UI")]
+    public class NotificationsElementDriver : ElementDriver<Notifications> {
+        private readonly IHttpContextAccessor _httpContextAccessor;
+        public NotificationsElementDriver(IHttpContextAccessor httpContextAccessor, IShapeFactory shapeFactory) {
+            _httpContextAccessor = httpContextAccessor;
+            New = shapeFactory;
+        }
+
+        public dynamic New { get; set; }
+
+        protected override void OnCreatingDisplay(Notifications element, ElementCreatingDisplayShapeContext context) {
+            if (context.DisplayType == "Design")
+                return;
+
+            var httpContext = _httpContextAccessor.Current();
+            if (httpContext == null)
+                return;
+
+            var messageEntries = httpContext.Items[NotifyFilter.TempDataMessages] as IList<NotifyEntry> ?? new List<NotifyEntry>();
+
+            context.Cancel = !messageEntries.Any();
+        }
+
+        protected override void OnDisplaying(Notifications element, ElementDisplayingContext context) {
+            var httpContext = _httpContextAccessor.Current();
+            var messageEntries = httpContext.Items[NotifyFilter.TempDataMessages] as IList<NotifyEntry> ?? new List<NotifyEntry>();
+            var shapes = messageEntries.Select(x => New.Message(x)).ToList();
+
+            context.ElementShape.Messages = shapes;
+        }
+    }
+}
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Drivers/ParagraphElementDriver.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Drivers/ParagraphElementDriver.cs
@@ -27,7 +27,7 @@ namespace Orchard.Layouts.Drivers {
            return Editor(context, editor);
        }

-        protected override void OnDisplaying(Paragraph element, ElementDisplayContext context) {
+        protected override void OnDisplaying(Paragraph element, ElementDisplayingContext context) {
            var text = element.Content;
            var flavor = "html";
            var processedText = ApplyHtmlFilters(text, flavor);
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Drivers/ProjectionElementDriver.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Drivers/ProjectionElementDriver.cs
@@ -53,7 +53,7 @@ namespace Orchard.Layouts.Drivers {
            }
        }

-        protected override void OnDisplaying(Projection element, ElementDisplayContext context) {
+        protected override void OnDisplaying(Projection element, ElementDisplayingContext context) {
            var queryId = element.QueryId;
            var layoutId = element.LayoutId;

--- a/src/Orchard.Web/Modules/Orchard.Layouts/Drivers/RowElementDriver.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Drivers/RowElementDriver.cs
@@ -1,7 +1,48 @@
-using Orchard.Layouts.Elements;
+using System.Collections.Generic;
+using System.Linq;
+using Orchard.Layouts.Elements;
+using Orchard.Layouts.Framework.Display;
 using Orchard.Layouts.Framework.Drivers;

 namespace Orchard.Layouts.Drivers {
    public class RowElementDriver : ElementDriver<Row> {
+        protected override void OnDisplaying(Row element, ElementDisplayingContext context) {
+            context.ElementShape.Collapsed = false;
+        }
+
+        protected override void OnDisplayed(Row element, ElementDisplayedContext context) {
+            var columnShapes = ((IEnumerable<dynamic>)context.ElementShape.Items).ToList();
+            var columnIndex = 0;
+
+            foreach (var columnShape in columnShapes) {
+                var column = (Column)columnShape.Element;
+
+                if (column.Collapsible == true && IsEmpty(columnShape)) {
+                    columnShape.Collapsed = true;
+
+                    // Get the first non-collapsed sibling column so we can increase its width with the width of the current column being collapsed.
+                    var sibling = GetNonCollapsedSibling(columnShapes, columnIndex);
+                    if (sibling != null) {
+                        // Increase the width of the sibling by the width of the current column.
+                        sibling.Width += columnShape.Width;
+                    }
+                    else {
+                        // The row has only one column, which is collapsed, so we hide the row entirely.
+                        context.ElementShape.Collapsed = true;
+                    } 
+                }
+
+                ++columnIndex;
+            }
+        }
+
+        private dynamic GetNonCollapsedSibling(IList<dynamic> columnShapes, int index) {
+            var siblings = index == 0 ? columnShapes : columnShapes.Reverse();
+            return siblings.FirstOrDefault(x => x.Collapsed == false);
+        }
+
+        private static bool IsEmpty(dynamic shape) {
+            return shape.Items.Count == 0;
+        }
    }
 }
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Drivers/ShapeElementDriver.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Drivers/ShapeElementDriver.cs
@@ -19,7 +19,7 @@ namespace Orchard.Layouts.Drivers {
            get { yield return "ShapeElement"; }
        }

-        protected override void OnDisplaying(Shape element, ElementDisplayContext context) {
+        protected override void OnDisplaying(Shape element, ElementDisplayingContext context) {
            if (String.IsNullOrWhiteSpace(element.ShapeType))
                return;

--- a/src/Orchard.Web/Modules/Orchard.Layouts/Drivers/TextElementDriver.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Drivers/TextElementDriver.cs
@@ -27,7 +27,7 @@ namespace Orchard.Layouts.Drivers {
            return Editor(context, editor);
        }

-        protected override void OnDisplaying(Text element, ElementDisplayContext context) {
+        protected override void OnDisplaying(Text element, ElementDisplayingContext context) {
            var text = element.Content;
            var flavor = "textarea";
            var processedText = ApplyHtmlFilters(text, flavor);
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Drivers/VectorImageElementDriver.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Drivers/VectorImageElementDriver.cs
@@ -37,7 +37,7 @@ namespace Orchard.Layouts.Drivers {
            return Editor(context, editor);
        }

-        protected override void OnDisplaying(VectorImage element, ElementDisplayContext context) {
+        protected override void OnDisplaying(VectorImage element, ElementDisplayingContext context) {
            var mediaId = element.MediaId;
            var vectorImage = mediaId != null ? GetVectorImage(mediaId.Value) : default(VectorImagePart);
            context.ElementShape.VectorImagePart = vectorImage;
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Elements/Breadcrumbs.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Elements/Breadcrumbs.cs
@@ -0,0 +1,30 @@
+using Orchard.Layouts.Helpers;
+
+namespace Orchard.Layouts.Elements {
+    public class Breadcrumbs : UIElement {
+        public int StartLevel {
+            get { return this.Retrieve(x => x.StartLevel); }
+            set { this.Store(x => x.StartLevel, value); }
+        }
+
+        public int Levels {
+            get { return this.Retrieve(x => x.Levels); }
+            set { this.Store(x => x.Levels, value); }
+        }
+
+        public bool AddHomePage {
+            get { return this.Retrieve(x => x.AddHomePage); }
+            set { this.Store(x => x.AddHomePage, value); }
+        }
+
+        public bool AddCurrentPage {
+            get { return this.Retrieve(x => x.AddCurrentPage); }
+            set { this.Store(x => x.AddCurrentPage, value); }
+        }
+
+        public int MenuContentItemId {
+            get { return this.Retrieve(x => x.MenuContentItemId); }
+            set { this.Store(x => x.MenuContentItemId, value); }
+        }
+    }
+}
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Elements/Column.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Elements/Column.cs
@@ -1,10 +1,9 @@
-using Orchard.Layouts.Framework.Elements;
 using Orchard.Layouts.Helpers;
 using Orchard.Localization;

 namespace Orchard.Layouts.Elements {
    public class Column : Container {
-        
+
        public override string Category {
            get { return "Layout"; }
        }
@@ -22,7 +21,7 @@ namespace Orchard.Layouts.Elements {
        }

        public int? Width {
-            get { return  this.Retrieve<int?>("Width") ?? this.Retrieve<int?>("ColumnSpan") ?? 0; } // Falling back on "ColumnSpan" for backward compatibility.
+            get { return this.Retrieve<int?>("Width") ?? this.Retrieve<int?>("ColumnSpan") ?? 0; } // Falling back on "ColumnSpan" for backward compatibility.
            set { this.Store(x => x.Width, value); }
        }

@@ -34,5 +33,10 @@ namespace Orchard.Layouts.Elements {
        public int Size {
            get { return Width.GetValueOrDefault() + Offset.GetValueOrDefault(); }
        }
+
+        public bool? Collapsible {
+            get { return this.Retrieve(x => x.Collapsible); }
+            set { this.Store(x => x.Collapsible, value); }
+        }
    }
 }
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Elements/Menu.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Elements/Menu.cs
@@ -0,0 +1,25 @@
+using Orchard.Layouts.Helpers;
+
+namespace Orchard.Layouts.Elements {
+    public class Menu : UIElement {
+        public int StartLevel {
+            get { return this.Retrieve(x => x.StartLevel); }
+            set { this.Store(x => x.StartLevel, value); }
+        }
+
+        public int Levels {
+            get { return this.Retrieve(x => x.Levels); }
+            set { this.Store(x => x.Levels, value); }
+        }
+
+        public int MenuContentItemId {
+            get { return this.Retrieve(x => x.MenuContentItemId); }
+            set { this.Store(x => x.MenuContentItemId, value); }
+        }
+
+        public bool ShowFullMenu {
+            get { return this.Retrieve(x => x.ShowFullMenu); }
+            set { this.Store(x => x.ShowFullMenu, value); }
+        }
+    }
+}
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Elements/Notifications.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Elements/Notifications.cs
@@ -0,0 +1,8 @@
+namespace Orchard.Layouts.Elements {
+    public class Notifications : UIElement {
+        
+        public override bool HasEditor {
+            get { return false; }
+        }
+    }
+}
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Elements/UIElement.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Elements/UIElement.cs
@@ -0,0 +1,13 @@
+using Orchard.Layouts.Framework.Elements;
+
+namespace Orchard.Layouts.Elements {
+    public abstract class UIElement : Element {
+        public override string Category {
+            get { return "UI"; }
+        }
+
+        public override string ToolboxIcon {
+            get { return "\uf0c8"; }
+        }
+    }
+}
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Framework/Display/ElementCreatingDisplayShapeContext.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Framework/Display/ElementCreatingDisplayShapeContext.cs
@@ -6,5 +6,6 @@ namespace Orchard.Layouts.Framework.Display {
        public IContent Content { get; set; }
        public Element Element { get; set; }
        public string DisplayType { get; set; }
+        public bool Cancel { get; set; }
    }
 }
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Framework/Display/ElementDisplay.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Framework/Display/ElementDisplay.cs
@@ -25,24 +25,27 @@ namespace Orchard.Layouts.Framework.Display {
            Element element,
            IContent content,
            string displayType = null,
-            IUpdateModel updater = null,
-            string renderEventName = null,
-            string renderEventArgs = null) {
+            IUpdateModel updater = null) {

+            var typeName = element.GetType().Name;
+            var category = element.Category.ToSafeName();
+            var drivers = element.Descriptor.GetDrivers().ToList();
            var createShapeContext = new ElementCreatingDisplayShapeContext {
                Element = element,
                DisplayType = displayType,
                Content = content,
            };

-            element.Descriptor.CreatingDisplay(createShapeContext);
+            _elementEventHandlerHandler.CreatingDisplay(createShapeContext);
+            InvokeDrivers(drivers, driver => driver.CreatingDisplay(createShapeContext));
+            if (element.Descriptor.CreatingDisplay != null)
+                element.Descriptor.CreatingDisplay(createShapeContext);
+
+            if (createShapeContext.Cancel)
+                return null;

-            var typeName = element.GetType().Name;
-            var category = element.Category.ToSafeName();
-            var drivers = element.Descriptor.GetDrivers();
            var elementShapeArguments = CreateArguments(element, content);
            var elementShape = (dynamic)_shapeFactory.Create("Element", elementShapeArguments, () => new ZoneHolding(() => _shapeFactory.Create("ElementZone")));
-            

            elementShape.Metadata.DisplayType = displayType;
            elementShape.Metadata.Alternates.Add(String.Format("Elements_{0}", typeName));
@@ -50,41 +53,60 @@ namespace Orchard.Layouts.Framework.Display {
            elementShape.Metadata.Alternates.Add(String.Format("Elements_{0}__{1}", typeName, category));
            elementShape.Metadata.Alternates.Add(String.Format("Elements_{0}_{1}__{2}", typeName, displayType, category));

-            var displayContext = new ElementDisplayContext {
+            var displayingContext = new ElementDisplayingContext {
                Element = element,
                ElementShape = elementShape,
                DisplayType = displayType,
                Content = content,
-                Updater = updater,
-                RenderEventName = renderEventName,
-                RenderEventArgs = renderEventArgs
+                Updater = updater
            };

-            _elementEventHandlerHandler.Displaying(displayContext);
-            InvokeDrivers(drivers, driver => driver.Displaying(displayContext));
-            element.Descriptor.Display(displayContext);
+            _elementEventHandlerHandler.Displaying(displayingContext);
+            InvokeDrivers(drivers, driver => driver.Displaying(displayingContext));
+
+            if (element.Descriptor.Displaying != null)
+                element.Descriptor.Displaying(displayingContext);

            var container = element as Container;

            if (container != null) {
                if (container.Elements.Any()) {
+                    var childIndex = 0;
                    foreach (var child in container.Elements) {
                        var childShape = DisplayElement(child, content, displayType: displayType, updater: updater);
-                        childShape.Parent = elementShape;
-                        elementShape.Add(childShape);
+
+                        if (childShape != null) {
+                            childShape.Parent = elementShape;
+                            elementShape.Add(childShape, childIndex++.ToString());
+                        }
                    }
                }
            }

+            var displayedContext = new ElementDisplayedContext {
+                Element = element,
+                ElementShape = elementShape,
+                DisplayType = displayType,
+                Content = content,
+                Updater = updater
+            };
+
+            _elementEventHandlerHandler.Displayed(displayedContext);
+            InvokeDrivers(drivers, driver => driver.Displayed(displayedContext));
+
+            if (element.Descriptor.Displayed != null)
+                element.Descriptor.Displayed(displayedContext);
+
            return elementShape;
        }

-        public dynamic DisplayElements(IEnumerable<Element> elements, IContent content, string displayType = null, IUpdateModel updater = null, string renderEventName = null, string renderEventArgs = null) {
+        public dynamic DisplayElements(IEnumerable<Element> elements, IContent content, string displayType = null, IUpdateModel updater = null) {
            var layoutRoot = (dynamic)_shapeFactory.Create("LayoutRoot");
+            var index = 0;

            foreach (var element in elements) {
-                var elementShape = DisplayElement(element, content, displayType, updater, renderEventName, renderEventArgs);
-                layoutRoot.Add(elementShape);
+                var elementShape = DisplayElement(element, content, displayType, updater);
+                layoutRoot.Add(elementShape, index++.ToString());
            }

            return layoutRoot;
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Framework/Display/ElementDisplayedContext.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Framework/Display/ElementDisplayedContext.cs
@@ -2,13 +2,11 @@ using Orchard.ContentManagement;
 using Orchard.Layouts.Framework.Elements;

 namespace Orchard.Layouts.Framework.Display {
-    public class ElementDisplayContext {
+    public class ElementDisplayedContext {
        public IContent Content { get; set; }
        public Element Element { get; set; }
        public string DisplayType { get; set; }
        public dynamic ElementShape { get; set; }
        public IUpdateModel Updater { get; set; }
-        public string RenderEventName { get; set; }
-        public string RenderEventArgs { get; set; }
    }
 }
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Framework/Display/ElementDisplayingContext.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Framework/Display/ElementDisplayingContext.cs
@@ -0,0 +1,12 @@
+using Orchard.ContentManagement;
+using Orchard.Layouts.Framework.Elements;
+
+namespace Orchard.Layouts.Framework.Display {
+    public class ElementDisplayingContext {
+        public IContent Content { get; set; }
+        public Element Element { get; set; }
+        public string DisplayType { get; set; }
+        public dynamic ElementShape { get; set; }
+        public IUpdateModel Updater { get; set; }
+    }
+}
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Framework/Display/IElementDisplay.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Framework/Display/IElementDisplay.cs
@@ -4,7 +4,7 @@ using Orchard.Layouts.Framework.Elements;

 namespace Orchard.Layouts.Framework.Display {
    public interface IElementDisplay : IDependency {
-        dynamic DisplayElement(Element element, IContent content, string displayType = null, IUpdateModel updater = null, string renderEventName = null, string renderEventArgs = null);
-        dynamic DisplayElements(IEnumerable<Element> elements, IContent content, string displayType = null, IUpdateModel updater = null, string renderEventName = null, string renderEventArgs = null);
+        dynamic DisplayElement(Element element, IContent content, string displayType = null, IUpdateModel updater = null);
+        dynamic DisplayElements(IEnumerable<Element> elements, IContent content, string displayType = null, IUpdateModel updater = null);
    }
 }
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Framework/Drivers/ElementDriver.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Framework/Drivers/ElementDriver.cs
@@ -17,10 +17,18 @@ namespace Orchard.Layouts.Framework.Drivers {
            return OnUpdateEditor((TElement)context.Element, context);
        }

-        public void Displaying(ElementDisplayContext context) {
+        public void CreatingDisplay(ElementCreatingDisplayShapeContext context) {
+            OnCreatingDisplay((TElement)context.Element, context);
+        }
+
+        public void Displaying(ElementDisplayingContext context) {
            OnDisplaying((TElement) context.Element, context);
        }

+        public void Displayed(ElementDisplayedContext context) {
+            OnDisplayed((TElement)context.Element, context);
+        }
+
        public void LayoutSaving(ElementSavingContext context) {
            OnLayoutSaving((TElement) context.Element, context);
        }
@@ -45,7 +53,13 @@ namespace Orchard.Layouts.Framework.Drivers {
            return OnBuildEditor(element, context);
        }

-        protected virtual void OnDisplaying(TElement element, ElementDisplayContext context) {
+        protected virtual void OnCreatingDisplay(TElement element, ElementCreatingDisplayShapeContext context) {
+        }
+
+        protected virtual void OnDisplaying(TElement element, ElementDisplayingContext context) {
+        }
+
+        protected virtual void OnDisplayed(TElement element, ElementDisplayedContext context) {
        }

        protected virtual void OnLayoutSaving(TElement element, ElementSavingContext context) {
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Framework/Drivers/IElementDriver.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Framework/Drivers/IElementDriver.cs
@@ -6,7 +6,9 @@ namespace Orchard.Layouts.Framework.Drivers {
        int Priority { get; }
        EditorResult BuildEditor(ElementEditorContext context);
        EditorResult UpdateEditor(ElementEditorContext context);
-        void Displaying(ElementDisplayContext context);
+        void CreatingDisplay(ElementCreatingDisplayShapeContext context);
+        void Displaying(ElementDisplayingContext context);
+        void Displayed(ElementDisplayedContext context);
        void LayoutSaving(ElementSavingContext context);
        void Removing(ElementRemovingContext context);
        void Exporting(ExportElementContext context);
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Framework/Elements/Element.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Framework/Elements/Element.cs
@@ -41,6 +41,7 @@ namespace Orchard.Layouts.Framework.Elements {
        public string HtmlId { get; set; }
        public string HtmlClass { get; set; }
        public string HtmlStyle { get; set; }
+        public string Rule { get; set; }
        public ElementDataDictionary ExportableData { get; set; }
        public ElementDescriptor Descriptor { get; set; }
        public ElementDataDictionary Data { get; set; }
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Framework/Elements/ElementDescriptor.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Framework/Elements/ElementDescriptor.cs
@@ -15,7 +15,7 @@ namespace Orchard.Layouts.Framework.Elements {
            Category = category;
            GetDrivers = Enumerable.Empty<IElementDriver>;
            CreatingDisplay = context => { };
-            Display = context => {};
+            Displaying = context => {};
            Editor = context => { };
            UpdateEditor = context => { };
            StateBag = new Dictionary<string, object>();
@@ -29,7 +29,8 @@ namespace Orchard.Layouts.Framework.Elements {
        public string TypeName { get; set; }
        public Func<IEnumerable<IElementDriver>> GetDrivers { get; set; }
        public Action<ElementCreatingDisplayShapeContext> CreatingDisplay { get; set; }
-        public Action<ElementDisplayContext> Display { get; set; }
+        public Action<ElementDisplayingContext> Displaying { get; set; }
+        public Action<ElementDisplayedContext> Displayed { get; set; }
        public Action<ElementEditorContext> Editor { get; set; }
        public Action<ElementEditorContext> UpdateEditor { get; set; }
        public bool IsSystemElement { get; set; }
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Handlers/ElementRuleCoordinator.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Handlers/ElementRuleCoordinator.cs
@@ -0,0 +1,35 @@
+using System;
+using System.Collections.Generic;
+using Orchard.Layouts.Framework.Display;
+using Orchard.Layouts.Services;
+using Orchard.Widgets.Services;
+
+namespace Orchard.Layouts.Handlers {
+    public class ElementRuleCoordinator : ElementEventHandlerBase {
+        private readonly IRuleManager _ruleManager;
+        private readonly Dictionary<string, bool> _evaluations = new Dictionary<string, bool>();
+
+        public ElementRuleCoordinator(IRuleManager ruleManager) {
+            _ruleManager = ruleManager;
+        }
+
+        public override void CreatingDisplay(ElementCreatingDisplayShapeContext context) {
+            if (context.DisplayType == "Design")
+                return;
+
+            if (String.IsNullOrWhiteSpace(context.Element.Rule))
+                return;
+
+            context.Cancel = !EvaluateRule(context.Element.Rule);
+        }
+
+        private bool EvaluateRule(string rule) {
+            if (_evaluations.ContainsKey(rule))
+                return _evaluations[rule];
+
+            var result = _ruleManager.Matches(rule);
+            _evaluations[rule] = result;
+            return result;
+        }
+    }
+}
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Handlers/LayoutPartHandler.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Handlers/LayoutPartHandler.cs
@@ -1,4 +1,5 @@
-using Orchard.ContentManagement;
+using Orchard.Caching;
+using Orchard.ContentManagement;
 using Orchard.ContentManagement.Handlers;
 using Orchard.Data;
 using Orchard.DisplayManagement;
@@ -12,6 +13,7 @@ namespace Orchard.Layouts.Handlers {
        private readonly IContentPartDisplay _contentPartDisplay;
        private readonly IShapeDisplay _shapeDisplay;
        private readonly ILayoutSerializer _serializer;
+        private readonly ISignals _signals;

        public LayoutPartHandler(
            IRepository<LayoutPartRecord> repository, 
@@ -19,13 +21,15 @@ namespace Orchard.Layouts.Handlers {
            IContentManager contentManager, 
            IContentPartDisplay contentPartDisplay, 
            IShapeDisplay shapeDisplay, 
-            ILayoutSerializer serializer) {
+            ILayoutSerializer serializer,
+            ISignals signals) {

            _layoutManager = layoutManager;
            _contentManager = contentManager;
            _contentPartDisplay = contentPartDisplay;
            _shapeDisplay = shapeDisplay;
            _serializer = serializer;
+            _signals = signals;

            Filters.Add(StorageFilter.For(repository));
            OnPublished<LayoutPart>(UpdateTemplateClients);
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Models/ILayoutAspect.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Models/ILayoutAspect.cs
@@ -2,6 +2,7 @@

 namespace Orchard.Layouts.Models {
    public interface ILayoutAspect : IContent {
+        int? TemplateId { get; set; }
        string LayoutData { get; set; }
    }
 }
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Module.txt
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Module.txt
@@ -10,7 +10,7 @@ Features:
    Orchard.Layouts:
        Name: Layouts
        Description: Provides tools to create layouts.
-        Dependencies: Common, Orchard.jQuery, Orchard.Forms, Orchard.Tokens, Orchard.MediaLibrary, TinyMCE
+        Dependencies: Common, Orchard.jQuery, Orchard.Forms, Orchard.Tokens, Orchard.MediaLibrary, TinyMCE, Orchard.Widgets
        Category: Layout
    Orchard.Layouts.Snippets:
        Name: Layout Snippets
@@ -32,3 +32,8 @@ Features:
        Description: Provides an element token provider that enables elements to be rendered using a token and enables tokens to be used inside of various elements such as Html, Text and Paragraph.
        Category: Layout
        Dependencies: Orchard.Layouts, Orchard.Tokens
+    Orchard.Layouts.UI:
+        Name: UI Elements
+        Description: Adds UI elements to the system, such as Notifications and Menu.
+        Category: Layout
+        Dependencies: Orchard.Layouts
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Orchard.Layouts.csproj
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Orchard.Layouts.csproj
@@ -186,6 +186,12 @@
    <Content Include="Styles\LayoutEditor\Element.min.css">
      <DependentUpon>Element.css</DependentUpon>
    </Content>
+    <Content Include="Styles\LayoutEditor\Menu.css">
+      <DependentUpon>Menu.less</DependentUpon>
+    </Content>
+    <Content Include="Styles\LayoutEditor\Menu.min.css">
+      <DependentUpon>Menu.css</DependentUpon>
+    </Content>
    <Content Include="Styles\LayoutEditor\Popup.css">
      <DependentUpon>Popup.less</DependentUpon>
    </Content>
@@ -415,17 +421,29 @@
      <Project>{6f759635-13d7-4e94-bcc9-80445d63f117}</Project>
      <Name>Orchard.Tokens</Name>
    </ProjectReference>
+    <ProjectReference Include="..\Orchard.Widgets\Orchard.Widgets.csproj">
+      <Project>{194d3ccc-1153-474d-8176-fde8d7d0d0bd}</Project>
+      <Name>Orchard.Widgets</Name>
+    </ProjectReference>
  </ItemGroup>
  <ItemGroup>
    <Compile Include="AdminMenu.cs" />
    <Compile Include="Controllers\BlueprintAdminController.cs" />
    <Compile Include="Controllers\TemplateController.cs" />
    <Compile Include="Drivers\CanvasElementDriver.cs" />
+    <Compile Include="Drivers\BreadcrumbsElementDriver.cs" />
+    <Compile Include="Drivers\MenuElementDriver.cs" />
+    <Compile Include="Drivers\NotificationsElementDriver.cs" />
    <Compile Include="Drivers\ShapeElementDriver.cs" />
    <Compile Include="Elements\Canvas.cs" />
    <Compile Include="Elements\ContentElement.cs" />
+    <Compile Include="Elements\Breadcrumbs.cs" />
+    <Compile Include="Elements\Menu.cs" />
+    <Compile Include="Elements\Notifications.cs" />
    <Compile Include="Elements\Shape.cs" />
+    <Compile Include="Elements\UIElement.cs" />
    <Compile Include="Filters\TokensFilter.cs" />
+    <Compile Include="Framework\Display\ElementDisplayedContext.cs" />
    <Compile Include="Framework\Drivers\ImportContentContextWrapper.cs" />
    <Compile Include="Framework\Drivers\IContentImportSession.cs" />
    <Compile Include="Framework\Drivers\ExportElementContext.cs" />
@@ -442,6 +460,7 @@
    <Compile Include="Framework\Display\ElementCreatingDisplayShapeContext.cs" />
    <Compile Include="Framework\Drivers\ImportElementContext.cs" />
    <Compile Include="Framework\Drivers\ImportLayoutContext.cs" />
+    <Compile Include="Handlers\ElementRuleCoordinator.cs" />
    <Compile Include="Handlers\ElementDriversCoordinator.cs" />
    <Compile Include="Helpers\DictionaryExtensions.cs" />
    <Compile Include="Helpers\EditorResultExtensions.cs" />
@@ -514,6 +533,8 @@
    <Compile Include="ViewModels\HtmlEditorViewModel.cs" />
    <Compile Include="ViewModels\LayoutEditor.cs" />
    <Compile Include="ViewModels\LayoutEditorPropertiesViewModel.cs" />
+    <Compile Include="ViewModels\BreadcrumbsEditorViewModel.cs" />
+    <Compile Include="ViewModels\MenuEditorViewModel.cs" />
    <Compile Include="ViewModels\VectorImageEditorViewModel.cs" />
    <Compile Include="ViewModels\ImageEditorViewModel.cs" />
    <Compile Include="ViewModels\MarkdownEditorViewModel.cs" />
@@ -562,7 +583,7 @@
    <Compile Include="Services\ILayoutSerializer.cs" />
    <Compile Include="Helpers\ElementDataHelper.cs" />
    <Compile Include="Models\ElementInstance.cs" />
-    <Compile Include="Framework\Display\ElementDisplayContext.cs" />
+    <Compile Include="Framework\Display\ElementDisplayingContext.cs" />
    <Compile Include="Elements\Column.cs" />
    <Compile Include="Services\LayoutSerializer.cs" />
    <Compile Include="Providers\SnippetElementHarvester.cs" />
@@ -618,6 +639,33 @@
  <ItemGroup>
    <Content Include="Views\LayoutEditor.Template.Html.cshtml" />
  </ItemGroup>
+  <ItemGroup>
+    <Content Include="Views\Elements\Notifications.cshtml" />
+  </ItemGroup>
+  <ItemGroup>
+    <Content Include="Views\Elements\Notifications.Design.cshtml" />
+  </ItemGroup>
+  <ItemGroup>
+    <Content Include="Views\EditorTemplates\Elements.Menu.cshtml" />
+  </ItemGroup>
+  <ItemGroup>
+    <Content Include="Views\Elements\Menu.Design.cshtml" />
+  </ItemGroup>
+  <ItemGroup>
+    <Content Include="Views\Elements\Menu.cshtml" />
+  </ItemGroup>
+  <ItemGroup>
+    <Content Include="Views\Elements\Breadcrumbs.cshtml" />
+  </ItemGroup>
+  <ItemGroup>
+    <Content Include="Views\Elements\Breadcrumbs.Design.cshtml" />
+  </ItemGroup>
+  <ItemGroup>
+    <Content Include="Views\EditorTemplates\Elements.Breadcrumbs.cshtml" />
+  </ItemGroup>
+  <ItemGroup>
+    <Content Include="Styles\LayoutEditor\Menu.less" />
+  </ItemGroup>
  <PropertyGroup>
    <VisualStudioVersion Condition="'$(VisualStudioVersion)' == ''">10.0</VisualStudioVersion>
    <VSToolsPath Condition="'$(VSToolsPath)' == ''">$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)</VSToolsPath>
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Providers/BlueprintElementHarvester.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Providers/BlueprintElementHarvester.cs
@@ -41,7 +41,7 @@ namespace Orchard.Layouts.Providers {
                        EnableEditorDialog = false,
                        IsSystemElement = false,
                        CreatingDisplay = creatingDisplayContext => CreatingDisplay(creatingDisplayContext, blueprint),
-                        Display = displayContext => Displaying(displayContext, baseElement),
+                        Displaying = displayContext => Displaying(displayContext, baseElement),
                        StateBag = new Dictionary<string, object> {
                            {"Blueprint", true},
                            {"ElementTypeName", baseElement.Descriptor.TypeName}
@@ -62,7 +62,7 @@ namespace Orchard.Layouts.Providers {
            context.Element.Data = bluePrintState;
        }

-        private void Displaying(ElementDisplayContext context, Element element) {
+        private void Displaying(ElementDisplayingContext context, Element element) {
            var drivers = _elementManager.Value.GetDrivers(element);

            foreach (var driver in drivers) {
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Providers/ContentFieldElementHarvester.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Providers/ContentFieldElementHarvester.cs
@@ -45,7 +45,7 @@ namespace Orchard.Layouts.Providers {
                var name = String.Format("{0}.{1}", part.Name, field.Name);
                var displayName = field.DisplayName;
                yield return new ElementDescriptor(elementType, name, T(displayName), T(field.DisplayName), contentFieldElement.Category) {
-                    Display = displayContext => Displaying(displayContext),
+                    Displaying = displayContext => Displaying(displayContext),
                    ToolboxIcon = "\uf1b2"
                };
            }
@@ -68,7 +68,7 @@ namespace Orchard.Layouts.Providers {
            return fields.Where(t => blackList.All(x => t.Item2.FieldDefinition.Name != x));
        }

-        private void Displaying(ElementDisplayContext context) {
+        private void Displaying(ElementDisplayingContext context) {
            var contentItem = context.Content.ContentItem;
            var typeName = context.Element.Descriptor.TypeName;
            var contentField = contentItem.GetContentField(typeName);
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Providers/ContentPartElementHarvester.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Providers/ContentPartElementHarvester.cs
@@ -39,7 +39,7 @@ namespace Orchard.Layouts.Providers {
                var partDescription = partSettings != null ? partSettings.Description : null;
                var description = T(!String.IsNullOrWhiteSpace(partDescription) ? partDescription : contentPart.Name);
                return new ElementDescriptor(elementType, contentPart.Name, T(contentPart.Name.CamelFriendly()), description, contentPartElement.Category) {
-                    Display = displayContext => Displaying(displayContext),
+                    Displaying = displayContext => Displaying(displayContext),
                    ToolboxIcon = "\uf1b2",
                    StateBag = new Dictionary<string, object> {
                        {"ElementTypeName", contentPart.Name}
@@ -60,7 +60,7 @@ namespace Orchard.Layouts.Providers {
            return parts.Where(p => p.Settings.GetModel<ContentPartLayoutSettings>().Placable);
        }

-        private void Displaying(ElementDisplayContext context) {
+        private void Displaying(ElementDisplayingContext context) {
            var drivers = _elementManager.Value.GetDrivers(context.Element);

            foreach (var driver in drivers) {
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Providers/SnippetElementHarvester.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Providers/SnippetElementHarvester.cs
@@ -49,13 +49,13 @@ namespace Orchard.Layouts.Providers {
                var elementName = GetDisplayName(shapeDescriptor.Value.BindingSource);
                var closureDescriptor = shapeDescriptor;
                yield return new ElementDescriptor(elementType, shapeType, T(elementName), T("An element that renders the {0} shape.", shapeType), snippetElement.Category) {
-                    Display = displayContext => Displaying(displayContext, closureDescriptor.Value),
+                    Displaying = displayContext => Displaying(displayContext, closureDescriptor.Value),
                    ToolboxIcon = "\uf10c"
                };
            }
        }

-        private void Displaying(ElementDisplayContext context, ShapeDescriptor shapeDescriptor) {
+        private void Displaying(ElementDisplayingContext context, ShapeDescriptor shapeDescriptor) {
            var shapeType = shapeDescriptor.ShapeType;
            var shape = _shapeFactory.Value.Create(shapeType);
            context.ElementShape.Snippet = shape;
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Scripts/LayoutEditor.js
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Scripts/LayoutEditor.js
@@ -864,6 +864,15 @@ angular
                                })
                            ];

+                            $scope.canvasElements = [
+                                LayoutEditor.Canvas.from({
+                                    toolboxIcon: "\uf044",
+                                    toolboxLabel: "Canvas",
+                                    toolboxDescription: "Empty canvas.",
+                                    children: []
+                                })
+                            ];
+
                            $scope.contentElementCategories = _($scope.element.config.categories).map(function (category) {
                                return {
                                    name: category.name,
@@ -916,6 +925,10 @@ angular
                                    parentClasses = [".layout-canvas", ".layout-column", ".layout-common-holder"];
                                    placeholderClasses = "layout-element layout-content ui-sortable-placeholder";
                                    break;
+                                case "Canvas":
+                                    parentClasses = [".layout-canvas", ".layout-column", ".layout-common-holder"];
+                                    placeholderClasses = "layout-element layout-container layout-grid ui-sortable-placeholder";
+                                    break;
                            }

                            return {
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Scripts/LayoutEditor.min.js
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Scripts/LayoutEditor.min.js
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Scripts/LayoutEditor/Directives/Toolbox.js
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Scripts/LayoutEditor/Directives/Toolbox.js
@@ -73,6 +73,15 @@
                                })
                            ];

+                            $scope.canvasElements = [
+                                LayoutEditor.Canvas.from({
+                                    toolboxIcon: "\uf044",
+                                    toolboxLabel: "Canvas",
+                                    toolboxDescription: "Empty canvas.",
+                                    children: []
+                                })
+                            ];
+
                            $scope.contentElementCategories = _($scope.element.config.categories).map(function (category) {
                                return {
                                    name: category.name,
@@ -125,6 +134,10 @@
                                    parentClasses = [".layout-canvas", ".layout-column", ".layout-common-holder"];
                                    placeholderClasses = "layout-element layout-content ui-sortable-placeholder";
                                    break;
+                                case "Canvas":
+                                    parentClasses = [".layout-canvas", ".layout-column", ".layout-common-holder"];
+                                    placeholderClasses = "layout-element layout-container layout-grid ui-sortable-placeholder";
+                                    break;
                            }

                            return {
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Scripts/Models.js
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Scripts/Models.js
@@ -16,6 +16,7 @@
        factories[type] = factory;
    };

+    registerFactory("Canvas", function (value) { return LayoutEditor.Canvas.from(value); });
    registerFactory("Grid", function(value) { return LayoutEditor.Grid.from(value); });
    registerFactory("Row", function(value) { return LayoutEditor.Row.from(value); });
    registerFactory("Column", function(value) { return LayoutEditor.Column.from(value); });
@@ -76,7 +77,7 @@ var LayoutEditor;
 var LayoutEditor;
 (function (LayoutEditor) {

-    LayoutEditor.Element = function (type, data, htmlId, htmlClass, htmlStyle, isTemplated) {
+    LayoutEditor.Element = function (type, data, htmlId, htmlClass, htmlStyle, isTemplated, rule) {
        if (!type)
            throw new Error("Parameter 'type' is required.");

@@ -86,6 +87,7 @@ var LayoutEditor;
        this.htmlClass = htmlClass;
        this.htmlStyle = htmlStyle;
        this.isTemplated = isTemplated;
+        this.rule = rule;

        this.editor = null;
        this.parent = null;
@@ -140,11 +142,15 @@ var LayoutEditor;
            return this.editor.focusedElement === this;
        };

+        this.allowSealedFocus = function() {
+            return false;
+        };
+
        this.setIsFocused = function () {
            if (!this.editor)
-            	return;
-            if (this.isTemplated)
-            	return;
+                return;
+            if (this.isTemplated && !this.allowSealedFocus())
+                return;
            if (this.editor.isDragging || this.editor.inlineEditingIsActive || this.editor.isResizing)
                return;

@@ -221,7 +227,8 @@ var LayoutEditor;
                htmlId: this.htmlId,
                htmlClass: this.htmlClass,
                htmlStyle: this.htmlStyle,
-                isTemplated: this.isTemplated
+                isTemplated: this.isTemplated,
+                rule: this.rule
            };
        };

@@ -387,8 +394,8 @@ var LayoutEditor;
 var LayoutEditor;
 (function (LayoutEditor) {

-    LayoutEditor.Canvas = function (data, htmlId, htmlClass, htmlStyle, isTemplated, children) {
-        LayoutEditor.Element.call(this, "Canvas", data, htmlId, htmlClass, htmlStyle, isTemplated);
+    LayoutEditor.Canvas = function (data, htmlId, htmlClass, htmlStyle, isTemplated, rule, children) {
+        LayoutEditor.Element.call(this, "Canvas", data, htmlId, htmlClass, htmlStyle, isTemplated, rule);
        LayoutEditor.Container.call(this, ["Grid", "Content"], children);

        this.toObject = function () {
@@ -396,16 +403,27 @@ var LayoutEditor;
            result.children = this.childrenToObject();
            return result;
        };
+
+        this.allowSealedFocus = function() {
+            return this.children.length === 0;
+        };
    };

    LayoutEditor.Canvas.from = function (value) {
-        return new LayoutEditor.Canvas(
+        var result = new LayoutEditor.Canvas(
            value.data,
            value.htmlId,
            value.htmlClass,
            value.htmlStyle,
            value.isTemplated,
+            value.rule,
            LayoutEditor.childrenFrom(value.children));
+
+        result.toolboxIcon = value.toolboxIcon;
+        result.toolboxLabel = value.toolboxLabel;
+        result.toolboxDescription = value.toolboxDescription;
+
+        return result;
    };

 })(LayoutEditor || (LayoutEditor = {}));
@@ -413,8 +431,8 @@ var LayoutEditor;
 var LayoutEditor;
 (function (LayoutEditor) {

-    LayoutEditor.Grid = function (data, htmlId, htmlClass, htmlStyle, isTemplated, children) {
-        LayoutEditor.Element.call(this, "Grid", data, htmlId, htmlClass, htmlStyle, isTemplated);
+    LayoutEditor.Grid = function (data, htmlId, htmlClass, htmlStyle, isTemplated, rule, children) {
+        LayoutEditor.Element.call(this, "Grid", data, htmlId, htmlClass, htmlStyle, isTemplated, rule);
        LayoutEditor.Container.call(this, ["Row"], children);

        this.toObject = function () {
@@ -431,6 +449,7 @@ var LayoutEditor;
            value.htmlClass,
            value.htmlStyle,
            value.isTemplated,
+            value.rule,
            LayoutEditor.childrenFrom(value.children));
        result.toolboxIcon = value.toolboxIcon;
        result.toolboxLabel = value.toolboxLabel;
@@ -442,8 +461,8 @@ var LayoutEditor;
 var LayoutEditor;
 (function (LayoutEditor) {

-    LayoutEditor.Row = function (data, htmlId, htmlClass, htmlStyle, isTemplated, children) {
-        LayoutEditor.Element.call(this, "Row", data, htmlId, htmlClass, htmlStyle, isTemplated);
+    LayoutEditor.Row = function (data, htmlId, htmlClass, htmlStyle, isTemplated, rule, children) {
+        LayoutEditor.Element.call(this, "Row", data, htmlId, htmlClass, htmlStyle, isTemplated, rule);
        LayoutEditor.Container.call(this, ["Column"], children);

        var _self = this;
@@ -716,6 +735,7 @@ var LayoutEditor;
            value.htmlClass,
            value.htmlStyle,
            value.isTemplated,
+            value.rule,
            LayoutEditor.childrenFrom(value.children));
        result.toolboxIcon = value.toolboxIcon;
        result.toolboxLabel = value.toolboxLabel;
@@ -726,21 +746,24 @@ var LayoutEditor;
 })(LayoutEditor || (LayoutEditor = {}));
 var LayoutEditor;
 (function (LayoutEditor) {
-
-    LayoutEditor.Column = function (data, htmlId, htmlClass, htmlStyle, isTemplated, width, offset, children) {
-        LayoutEditor.Element.call(this, "Column", data, htmlId, htmlClass, htmlStyle, isTemplated);
+    LayoutEditor.Column = function (data, htmlId, htmlClass, htmlStyle, isTemplated, width, offset, collapsible, rule, children) {
+        LayoutEditor.Element.call(this, "Column", data, htmlId, htmlClass, htmlStyle, isTemplated, rule);
        LayoutEditor.Container.call(this, ["Grid", "Content"], children);
-
        this.width = width;
        this.offset = offset;
+        this.collapsible = collapsible;

        var _hasPendingChange = false;
        var _origWidth = 0;
        var _origOffset = 0;

+        this.allowSealedFocus = function () {
+            return this.children.length === 0;
+        };
+
        this.beginChange = function () {
            if (!!_hasPendingChange)
-                throw new Error("Column already has a pending change.")
+                throw new Error("Column already has a pending change.");
            _hasPendingChange = true;
            _origWidth = this.width;
            _origOffset = this.offset;
@@ -748,7 +771,7 @@ var LayoutEditor;

        this.commitChange = function () {
            if (!_hasPendingChange)
-                throw new Error("Column has no pending change.")
+                throw new Error("Column has no pending change.");
            _origWidth = 0;
            _origOffset = 0;
            _hasPendingChange = false;
@@ -756,7 +779,7 @@ var LayoutEditor;

        this.rollbackChange = function () {
            if (!_hasPendingChange)
-                throw new Error("Column has no pending change.")
+                throw new Error("Column has no pending change.");
            this.width = _origWidth;
            this.offset = _origOffset;
            _origWidth = 0;
@@ -782,7 +805,7 @@ var LayoutEditor;
                offset: 0,
                children: []
            });
-            
+
            this.width = this.width - newColumnWidth;
            this.parent.insertChild(newColumn, this);
            newColumn.setIsFocused();
@@ -824,6 +847,7 @@ var LayoutEditor;
            var result = this.elementToObject();
            result.width = this.width;
            result.offset = this.offset;
+            result.collapsible = this.collapsible;
            result.children = this.childrenToObject();
            return result;
        };
@@ -838,6 +862,8 @@ var LayoutEditor;
            value.isTemplated,
            value.width,
            value.offset,
+            value.collapsible,
+            value.rule,
            LayoutEditor.childrenFrom(value.children));
        result.toolboxIcon = value.toolboxIcon;
        result.toolboxLabel = value.toolboxLabel;
@@ -854,17 +880,17 @@ var LayoutEditor;
                isTemplated: false,
                width: 12 / value,
                offset: 0,
+                collapsible: null,
                children: []
            });
        });
    };
-
 })(LayoutEditor || (LayoutEditor = {}));
 var LayoutEditor;
 (function (LayoutEditor) {

-    LayoutEditor.Content = function (data, htmlId, htmlClass, htmlStyle, isTemplated, contentType, contentTypeLabel, contentTypeClass, html, hasEditor) {
-        LayoutEditor.Element.call(this, "Content", data, htmlId, htmlClass, htmlStyle, isTemplated);
+    LayoutEditor.Content = function (data, htmlId, htmlClass, htmlStyle, isTemplated, contentType, contentTypeLabel, contentTypeClass, html, hasEditor, rule) {
+        LayoutEditor.Element.call(this, "Content", data, htmlId, htmlClass, htmlStyle, isTemplated, rule);

        this.contentType = contentType;
        this.contentTypeLabel = contentTypeLabel;
@@ -912,7 +938,8 @@ var LayoutEditor;
            value.contentTypeLabel,
            value.contentTypeClass,
            value.html,
-            value.hasEditor);
+            value.hasEditor,
+            value.rule);

        return result;
    };
@@ -921,8 +948,8 @@ var LayoutEditor;
 var LayoutEditor;
 (function ($, LayoutEditor) {

-    LayoutEditor.Html = function (data, htmlId, htmlClass, htmlStyle, isTemplated, contentType, contentTypeLabel, contentTypeClass, html, hasEditor) {
-        LayoutEditor.Element.call(this, "Html", data, htmlId, htmlClass, htmlStyle, isTemplated);
+    LayoutEditor.Html = function (data, htmlId, htmlClass, htmlStyle, isTemplated, contentType, contentTypeLabel, contentTypeClass, html, hasEditor, rule) {
+        LayoutEditor.Element.call(this, "Html", data, htmlId, htmlClass, htmlStyle, isTemplated, rule);

        this.contentType = contentType;
        this.contentTypeLabel = contentTypeLabel;
@@ -979,7 +1006,8 @@ var LayoutEditor;
            value.contentTypeLabel,
            value.contentTypeClass,
            value.html,
-            value.hasEditor);
+            value.hasEditor,
+            value.rule);

        return result;
    };
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Scripts/Models.min.js
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Scripts/Models.min.js
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Scripts/Models/Canvas.js
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Scripts/Models/Canvas.js
@@ -1,8 +1,8 @@
 var LayoutEditor;
 (function (LayoutEditor) {

-    LayoutEditor.Canvas = function (data, htmlId, htmlClass, htmlStyle, isTemplated, children) {
-        LayoutEditor.Element.call(this, "Canvas", data, htmlId, htmlClass, htmlStyle, isTemplated);
+    LayoutEditor.Canvas = function (data, htmlId, htmlClass, htmlStyle, isTemplated, rule, children) {
+        LayoutEditor.Element.call(this, "Canvas", data, htmlId, htmlClass, htmlStyle, isTemplated, rule);
        LayoutEditor.Container.call(this, ["Grid", "Content"], children);

        this.toObject = function () {
@@ -10,16 +10,27 @@
            result.children = this.childrenToObject();
            return result;
        };
+
+        this.allowSealedFocus = function() {
+            return this.children.length === 0;
+        };
    };

    LayoutEditor.Canvas.from = function (value) {
-        return new LayoutEditor.Canvas(
+        var result = new LayoutEditor.Canvas(
            value.data,
            value.htmlId,
            value.htmlClass,
            value.htmlStyle,
            value.isTemplated,
+            value.rule,
            LayoutEditor.childrenFrom(value.children));
+
+        result.toolboxIcon = value.toolboxIcon;
+        result.toolboxLabel = value.toolboxLabel;
+        result.toolboxDescription = value.toolboxDescription;
+
+        return result;
    };

 })(LayoutEditor || (LayoutEditor = {}));
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Scripts/Models/Column.js
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Scripts/Models/Column.js
@@ -1,20 +1,23 @@
 var LayoutEditor;
 (function (LayoutEditor) {
-
-    LayoutEditor.Column = function (data, htmlId, htmlClass, htmlStyle, isTemplated, width, offset, children) {
-        LayoutEditor.Element.call(this, "Column", data, htmlId, htmlClass, htmlStyle, isTemplated);
+    LayoutEditor.Column = function (data, htmlId, htmlClass, htmlStyle, isTemplated, width, offset, collapsible, rule, children) {
+        LayoutEditor.Element.call(this, "Column", data, htmlId, htmlClass, htmlStyle, isTemplated, rule);
        LayoutEditor.Container.call(this, ["Grid", "Content"], children);
-
        this.width = width;
        this.offset = offset;
+        this.collapsible = collapsible;

        var _hasPendingChange = false;
        var _origWidth = 0;
        var _origOffset = 0;

+        this.allowSealedFocus = function () {
+            return this.children.length === 0;
+        };
+
        this.beginChange = function () {
            if (!!_hasPendingChange)
-                throw new Error("Column already has a pending change.")
+                throw new Error("Column already has a pending change.");
            _hasPendingChange = true;
            _origWidth = this.width;
            _origOffset = this.offset;
@@ -22,7 +25,7 @@

        this.commitChange = function () {
            if (!_hasPendingChange)
-                throw new Error("Column has no pending change.")
+                throw new Error("Column has no pending change.");
            _origWidth = 0;
            _origOffset = 0;
            _hasPendingChange = false;
@@ -30,7 +33,7 @@

        this.rollbackChange = function () {
            if (!_hasPendingChange)
-                throw new Error("Column has no pending change.")
+                throw new Error("Column has no pending change.");
            this.width = _origWidth;
            this.offset = _origOffset;
            _origWidth = 0;
@@ -56,7 +59,7 @@
                offset: 0,
                children: []
            });
-            
+
            this.width = this.width - newColumnWidth;
            this.parent.insertChild(newColumn, this);
            newColumn.setIsFocused();
@@ -98,6 +101,7 @@
            var result = this.elementToObject();
            result.width = this.width;
            result.offset = this.offset;
+            result.collapsible = this.collapsible;
            result.children = this.childrenToObject();
            return result;
        };
@@ -112,6 +116,8 @@
            value.isTemplated,
            value.width,
            value.offset,
+            value.collapsible,
+            value.rule,
            LayoutEditor.childrenFrom(value.children));
        result.toolboxIcon = value.toolboxIcon;
        result.toolboxLabel = value.toolboxLabel;
@@ -128,9 +134,9 @@
                isTemplated: false,
                width: 12 / value,
                offset: 0,
+                collapsible: null,
                children: []
            });
        });
    };
-
 })(LayoutEditor || (LayoutEditor = {}));
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Scripts/Models/Content.js
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Scripts/Models/Content.js
@@ -1,8 +1,8 @@
 var LayoutEditor;
 (function (LayoutEditor) {

-    LayoutEditor.Content = function (data, htmlId, htmlClass, htmlStyle, isTemplated, contentType, contentTypeLabel, contentTypeClass, html, hasEditor) {
-        LayoutEditor.Element.call(this, "Content", data, htmlId, htmlClass, htmlStyle, isTemplated);
+    LayoutEditor.Content = function (data, htmlId, htmlClass, htmlStyle, isTemplated, contentType, contentTypeLabel, contentTypeClass, html, hasEditor, rule) {
+        LayoutEditor.Element.call(this, "Content", data, htmlId, htmlClass, htmlStyle, isTemplated, rule);

        this.contentType = contentType;
        this.contentTypeLabel = contentTypeLabel;
@@ -50,7 +50,8 @@
            value.contentTypeLabel,
            value.contentTypeClass,
            value.html,
-            value.hasEditor);
+            value.hasEditor,
+            value.rule);

        return result;
    };
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Scripts/Models/Element.js
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Scripts/Models/Element.js
@@ -1,7 +1,7 @@
 var LayoutEditor;
 (function (LayoutEditor) {

-    LayoutEditor.Element = function (type, data, htmlId, htmlClass, htmlStyle, isTemplated) {
+    LayoutEditor.Element = function (type, data, htmlId, htmlClass, htmlStyle, isTemplated, rule) {
        if (!type)
            throw new Error("Parameter 'type' is required.");

@@ -11,6 +11,7 @@
        this.htmlClass = htmlClass;
        this.htmlStyle = htmlStyle;
        this.isTemplated = isTemplated;
+        this.rule = rule;

        this.editor = null;
        this.parent = null;
@@ -65,11 +66,15 @@
            return this.editor.focusedElement === this;
        };

+        this.allowSealedFocus = function() {
+            return false;
+        };
+
        this.setIsFocused = function () {
            if (!this.editor)
-            	return;
-            if (this.isTemplated)
-            	return;
+                return;
+            if (this.isTemplated && !this.allowSealedFocus())
+                return;
            if (this.editor.isDragging || this.editor.inlineEditingIsActive || this.editor.isResizing)
                return;

@@ -146,7 +151,8 @@
                htmlId: this.htmlId,
                htmlClass: this.htmlClass,
                htmlStyle: this.htmlStyle,
-                isTemplated: this.isTemplated
+                isTemplated: this.isTemplated,
+                rule: this.rule
            };
        };

--- a/src/Orchard.Web/Modules/Orchard.Layouts/Scripts/Models/Grid.js
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Scripts/Models/Grid.js
@@ -1,8 +1,8 @@
 var LayoutEditor;
 (function (LayoutEditor) {

-    LayoutEditor.Grid = function (data, htmlId, htmlClass, htmlStyle, isTemplated, children) {
-        LayoutEditor.Element.call(this, "Grid", data, htmlId, htmlClass, htmlStyle, isTemplated);
+    LayoutEditor.Grid = function (data, htmlId, htmlClass, htmlStyle, isTemplated, rule, children) {
+        LayoutEditor.Element.call(this, "Grid", data, htmlId, htmlClass, htmlStyle, isTemplated, rule);
        LayoutEditor.Container.call(this, ["Row"], children);

        this.toObject = function () {
@@ -19,6 +19,7 @@
            value.htmlClass,
            value.htmlStyle,
            value.isTemplated,
+            value.rule,
            LayoutEditor.childrenFrom(value.children));
        result.toolboxIcon = value.toolboxIcon;
        result.toolboxLabel = value.toolboxLabel;
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Scripts/Models/Helpers.js
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Scripts/Models/Helpers.js
@@ -16,6 +16,7 @@
        factories[type] = factory;
    };

+    registerFactory("Canvas", function (value) { return LayoutEditor.Canvas.from(value); });
    registerFactory("Grid", function(value) { return LayoutEditor.Grid.from(value); });
    registerFactory("Row", function(value) { return LayoutEditor.Row.from(value); });
    registerFactory("Column", function(value) { return LayoutEditor.Column.from(value); });
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Scripts/Models/Html.js
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Scripts/Models/Html.js
@@ -1,8 +1,8 @@
 var LayoutEditor;
 (function ($, LayoutEditor) {

-    LayoutEditor.Html = function (data, htmlId, htmlClass, htmlStyle, isTemplated, contentType, contentTypeLabel, contentTypeClass, html, hasEditor) {
-        LayoutEditor.Element.call(this, "Html", data, htmlId, htmlClass, htmlStyle, isTemplated);
+    LayoutEditor.Html = function (data, htmlId, htmlClass, htmlStyle, isTemplated, contentType, contentTypeLabel, contentTypeClass, html, hasEditor, rule) {
+        LayoutEditor.Element.call(this, "Html", data, htmlId, htmlClass, htmlStyle, isTemplated, rule);

        this.contentType = contentType;
        this.contentTypeLabel = contentTypeLabel;
@@ -59,7 +59,8 @@
            value.contentTypeLabel,
            value.contentTypeClass,
            value.html,
-            value.hasEditor);
+            value.hasEditor,
+            value.rule);

        return result;
    };
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Scripts/Models/Row.js
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Scripts/Models/Row.js
@@ -1,8 +1,8 @@
 var LayoutEditor;
 (function (LayoutEditor) {

-    LayoutEditor.Row = function (data, htmlId, htmlClass, htmlStyle, isTemplated, children) {
-        LayoutEditor.Element.call(this, "Row", data, htmlId, htmlClass, htmlStyle, isTemplated);
+    LayoutEditor.Row = function (data, htmlId, htmlClass, htmlStyle, isTemplated, rule, children) {
+        LayoutEditor.Element.call(this, "Row", data, htmlId, htmlClass, htmlStyle, isTemplated, rule);
        LayoutEditor.Container.call(this, ["Column"], children);

        var _self = this;
@@ -275,6 +275,7 @@
            value.htmlClass,
            value.htmlStyle,
            value.isTemplated,
+            value.rule,
            LayoutEditor.childrenFrom(value.children));
        result.toolboxIcon = value.toolboxIcon;
        result.toolboxLabel = value.toolboxLabel;
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Services/DefaultModelMaps.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Services/DefaultModelMaps.cs
@@ -1,4 +1,5 @@
-using Newtonsoft.Json.Linq;
+using System;
+using Newtonsoft.Json.Linq;
 using Orchard.DisplayManagement;
 using Orchard.Layouts.Elements;
 using Orchard.Layouts.Framework.Display;
@@ -35,6 +36,7 @@ namespace Orchard.Layouts.Services {
            node["htmlClass"] = element.HtmlClass;
            node["htmlStyle"] = element.HtmlStyle;
            node["isTemplated"] = element.IsTemplated;
+            node["rule"] = element.Rule;
        }

        protected virtual void ToElement(T element, JToken node) {
@@ -43,6 +45,23 @@ namespace Orchard.Layouts.Services {
            element.HtmlClass = (string)node["htmlClass"];
            element.HtmlStyle = (string)node["htmlStyle"];
            element.IsTemplated = (bool)(node["isTemplated"] ?? false);
+            element.Rule = (string) node["rule"];
+        }
+
+        protected bool? ReadBoolean(JToken node) {
+            if (node == null)
+                return null;
+
+            var value = node.Value<string>();
+            if (String.IsNullOrWhiteSpace(value))
+                return null;
+
+            bool result;
+
+            if (Boolean.TryParse(value, out result))
+                return result;
+
+            return null;
        }
    }

@@ -55,12 +74,14 @@ namespace Orchard.Layouts.Services {
            base.ToElement(element, node);
            element.Width = (int?)node["width"];
            element.Offset = (int?)node["offset"];
+            element.Collapsible = ReadBoolean(node["collapsible"]);
        }

        public override void FromElement(Column element, DescribeElementsContext describeContext, JToken node) {
            base.FromElement(element, describeContext, node);
            node["width"] = element.Width;
            node["offset"] = element.Offset;
+            node["collapsible"] = element.Collapsible;
        }
    }

@@ -92,6 +113,7 @@ namespace Orchard.Layouts.Services {
            element.HtmlClass = (string)node["htmlClass"];
            element.HtmlStyle = (string)node["htmlStyle"];
            element.IsTemplated = (bool)(node["isTemplated"] ?? false);
+            element.Rule = (string) node["rule"];

            return element;
        }
@@ -101,6 +123,7 @@ namespace Orchard.Layouts.Services {
            node["htmlId"] = element.HtmlId;
            node["htmlClass"] = element.HtmlClass;
            node["htmlStyle"] = element.HtmlStyle;
+            node["rule"] = element.Rule;
            node["isTemplated"] = element.IsTemplated;
            node["hasEditor"] = element.HasEditor;
            node["contentType"] = element.Descriptor.TypeName;
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Services/ElementEventHandlerBase.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Services/ElementEventHandlerBase.cs
@@ -5,7 +5,9 @@ namespace Orchard.Layouts.Services {
    public abstract class ElementEventHandlerBase : Component, IElementEventHandler {
        public virtual void Creating(ElementCreatingContext context) { }
        public virtual void Created(ElementCreatedContext context) { }
-        public virtual void Displaying(ElementDisplayContext context) { }
+        public virtual void CreatingDisplay(ElementCreatingDisplayShapeContext context) {}
+        public virtual void Displaying(ElementDisplayingContext context) { }
+        public virtual void Displayed(ElementDisplayedContext context) { }
        public virtual void BuildEditor(ElementEditorContext context) { }
        public virtual void UpdateEditor(ElementEditorContext context) { }
    }
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Services/ElementSerializer.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Services/ElementSerializer.cs
@@ -22,7 +22,7 @@ namespace Orchard.Layouts.Services {
                return null;

            var token = JToken.Parse(data);
-            var element = ParseNode(node: token, parent: null, index: 0, describeContext: describeContext); 
+            var element = ParseNode(node: token, parent: null, index: 0, describeContext: describeContext);

            return element;
        }
@@ -43,7 +43,8 @@ namespace Orchard.Layouts.Services {
                isTemplated = element.IsTemplated,
                htmlId = element.HtmlId,
                htmlClass = element.HtmlClass,
-                htmlStyle = element.HtmlStyle
+                htmlStyle = element.HtmlStyle,
+                rule = element.Rule
            };
            return dto;
        }
@@ -54,10 +55,11 @@ namespace Orchard.Layouts.Services {
            if (String.IsNullOrWhiteSpace(elementTypeName))
                return null;

-            var data = (string) node["data"];
-            var htmlId = (string) node["htmlId"];
+            var data = (string)node["data"];
+            var htmlId = (string)node["htmlId"];
            var htmlClass = (string)node["htmlClass"];
            var htmlStyle = (string)node["htmlStyle"];
+            var rule = (string)node["rule"];
            var elementData = ElementDataHelper.Deserialize(data);
            var exportableData = ElementDataHelper.Deserialize((string)node["exportableData"]);
            var childNodes = node["elements"];
@@ -68,19 +70,20 @@ namespace Orchard.Layouts.Services {

            var element = _elementFactory.Activate(elementDescriptor, e => {
                e.Container = parent;
-                    e.Index = index; 
-                    e.Data = elementData;
-                    e.ExportableData = exportableData;
-                    e.HtmlId = htmlId;
-                    e.HtmlClass = htmlClass;
-                    e.HtmlStyle = htmlStyle;
+                e.Index = index;
+                e.Data = elementData;
+                e.ExportableData = exportableData;
+                e.HtmlId = htmlId;
+                e.HtmlClass = htmlClass;
+                e.HtmlStyle = htmlStyle;
+                e.Rule = rule;
            });

            var container = element as Container;

            if (container != null)
-                container.Elements = childNodes != null 
-                    ? childNodes.Select((x, i) => ParseNode(x, container, i, describeContext)).Where(x => x != null).ToList() 
+                container.Elements = childNodes != null
+                    ? childNodes.Select((x, i) => ParseNode(x, container, i, describeContext)).Where(x => x != null).ToList()
                    : new List<Element>();

            element.IsTemplated = node.Value<bool>("isTemplated");
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Services/IElementEventHandler.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Services/IElementEventHandler.cs
@@ -6,7 +6,9 @@ namespace Orchard.Layouts.Services {
    public interface IElementEventHandler : IEventHandler {
        void Creating(ElementCreatingContext context);
        void Created(ElementCreatedContext context);
-        void Displaying(ElementDisplayContext context);
+        void CreatingDisplay(ElementCreatingDisplayShapeContext context);
+        void Displaying(ElementDisplayingContext context);
+        void Displayed(ElementDisplayedContext context);
        void BuildEditor(ElementEditorContext context);
        void UpdateEditor(ElementEditorContext context);
    }
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Services/ILayoutManager.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Services/ILayoutManager.cs
@@ -6,7 +6,16 @@ using Orchard.Layouts.Models;

 namespace Orchard.Layouts.Services {
    public interface ILayoutManager : IDependency {
+        /// <summary>
+        /// Returns all content items with a LayoutPart whose IsTemplate setting is set to true.
+        /// </summary>
        IEnumerable<LayoutPart> GetTemplates();
+
+        /// <summary>
+        /// Returns all content items with a LayoutPart.
+        /// </summary>
+        IEnumerable<LayoutPart> GetLayouts();
+
        LayoutPart GetLayout(int id);
        IEnumerable<Element> LoadElements(ILayoutAspect layout);

--- a/src/Orchard.Web/Modules/Orchard.Layouts/Services/LayoutManager.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Services/LayoutManager.cs
@@ -17,7 +17,12 @@ namespace Orchard.Layouts.Services {
        private readonly IElementDisplay _elementDisplay;
        private readonly IElementManager _elementManager;

-        public LayoutManager(IContentManager contentManager, ILayoutSerializer serializer, IElementDisplay elementDisplay, IElementManager elementManager) {
+        public LayoutManager(
+            IContentManager contentManager,
+            ILayoutSerializer serializer,
+            IElementDisplay elementDisplay,
+            IElementManager elementManager) {
+
            _contentManager = contentManager;
            _serializer = serializer;
            _elementDisplay = elementDisplay;
@@ -35,6 +40,16 @@ namespace Orchard.Layouts.Services {
            return _contentManager.Query<LayoutPart>(templateTypeNames).List();
        }

+        public IEnumerable<LayoutPart> GetLayouts() {
+            var templateTypeNamesQuery = from typeDefinition in _contentManager.GetContentTypeDefinitions()
+                                         from typePartDefinition in typeDefinition.Parts
+                                         where typePartDefinition.PartDefinition.Name == "LayoutPart"
+                                         select typeDefinition.Name;
+
+            var templateTypeNames = templateTypeNamesQuery.ToArray();
+            return _contentManager.Query<LayoutPart>(templateTypeNames).List();
+        }
+
        public LayoutPart GetLayout(int id) {
            return _contentManager.Get<LayoutPart>(id);
        }
@@ -84,7 +99,7 @@ namespace Orchard.Layouts.Services {
            var nonTemplatedElements = ExtractNonTemplatedElements(layout).ToList();

            foreach (var element in nonTemplatedElements) {
-                
+
                // Move the element to the template and try to maintain its index.
                var column = element.Container as Column;
                var indexInTemplate = templateColumns.Any() ? 0 : -1;
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Shapes/ElementShapes.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Shapes/ElementShapes.cs
@@ -33,13 +33,12 @@ namespace Orchard.Layouts.Shapes {
        public void Discover(ShapeTableBuilder builder) {
            builder.Describe("Element").OnDisplaying(context => {
                var element = (Element)context.Shape.Element;
-
-                // Tokenize common settings
                var content = (ContentItem)context.Shape.ContentItem;
                var htmlId = element.HtmlId;
                var htmlClass = element.HtmlClass;
                var htmlStyle = element.HtmlStyle;

+                // Provide tokenizer functions.
                context.Shape.TokenizeHtmlId = (Func<string>)(() => _tokenizer.Value.Replace(htmlId, new { Content = content }));
                context.Shape.TokenizeHtmlClass = (Func<string>)(() => _tokenizer.Value.Replace(htmlClass, new { Content = content }));
                context.Shape.TokenizeHtmlStyle = (Func<string>)(() => _tokenizer.Value.Replace(htmlStyle, new { Content = content }));
@@ -70,6 +69,7 @@ namespace Orchard.Layouts.Shapes {
        }

        private static void DisplayChildren(dynamic shape, dynamic display, TextWriter output) {
+            shape = CoreShapes.Order(shape);
            foreach (var child in shape) {
                output.Write(display(child));
            }
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Styles/LayoutEditor.css
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Styles/LayoutEditor.css
@@ -17,6 +17,11 @@
 .layout-editor > .layout-canvas-wrapper > .layout-toolbar-container > .mce-panel {
  width: 100% !important;
 }
+.layout-editor > .layout-canvas-wrapper .layout-content > .layout-element-wrapper .layout-content-markup > .layout-placeholder {
+  border: 1px dashed #ccc;
+  padding: 0.2em 0.4em;
+  background: #e8e8e8;
+}

 .layout-editor .layout-element {
  position: relative;
@@ -757,6 +762,10 @@ table[rules=all i] > tfoot > tr > td, table[rules=all i] > tfoot > tr > th {
  cursor: default;
  white-space: nowrap;
  line-height: normal;
+  min-width: 300px;
+}
+.layout-editor .layout-popup.wide {
+  width: 600px;
 }
 .layout-editor .layout-popup .layout-popup-flex {
  display: flex;
@@ -779,8 +788,39 @@ table[rules=all i] > tfoot > tr > td, table[rules=all i] > tfoot > tr > th {
  background-color: #f3f4f5;
  cursor: pointer;
 }
+.layout-editor .layout-popup .layout-popup-input input[type='text'],
+.layout-editor .layout-popup .layout-popup-input textarea {
+  width: 100%;
+}
 .layout-editor .layout-popup .layout-popup-input > label {
  display: block;
  font-size: 0.9em;
 }

+.layout-editor .layout-content {
+  min-height: 1em;
+}
+.layout-editor .layout-content > .layout-element-wrapper .layout-content-markup .layout-menu-element ul,
+.layout-editor .layout-content > .layout-element-wrapper .layout-content-markup .layout-breadcrumbs-element ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.layout-editor .layout-content > .layout-element-wrapper .layout-content-markup .layout-menu-element ul li,
+.layout-editor .layout-content > .layout-element-wrapper .layout-content-markup .layout-breadcrumbs-element ul li {
+  float: left;
+  margin-right: 1em;
+}
+.layout-editor .layout-content > .layout-element-wrapper .layout-content-markup .layout-menu-element ul li.menu-icon,
+.layout-editor .layout-content > .layout-element-wrapper .layout-content-markup .layout-breadcrumbs-element ul li.menu-icon {
+  margin-right: 4px;
+}
+.layout-editor .layout-content > .layout-element-wrapper .layout-content-markup .layout-menu-element ul:after,
+.layout-editor .layout-content > .layout-element-wrapper .layout-content-markup .layout-breadcrumbs-element ul:after {
+  content: ".";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+}
+
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Styles/LayoutEditor.css.bundle
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Styles/LayoutEditor.css.bundle
@@ -21,5 +21,6 @@
        <file>/Styles/LayoutEditor/Content.css</file>
        <file>/Styles/LayoutEditor/Toolbox.css</file>
        <file>/Styles/LayoutEditor/Popup.css</file>
+        <file>/Styles/LayoutEditor/Menu.css</file>
    </files>
 </bundle>
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Styles/LayoutEditor.min.css
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Styles/LayoutEditor.min.css
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Styles/LayoutEditor/Editor.css
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Styles/LayoutEditor/Editor.css
@@ -17,3 +17,8 @@
 .layout-editor > .layout-canvas-wrapper > .layout-toolbar-container > .mce-panel {
  width: 100% !important;
 }
+.layout-editor > .layout-canvas-wrapper .layout-content > .layout-element-wrapper .layout-content-markup > .layout-placeholder {
+  border: 1px dashed #ccc;
+  padding: 0.2em 0.4em;
+  background: #e8e8e8;
+}
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Styles/LayoutEditor/Editor.less
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Styles/LayoutEditor/Editor.less
@@ -20,5 +20,11 @@
                width: 100% !important;
            }
        }
+
+        .layout-content > .layout-element-wrapper .layout-content-markup > .layout-placeholder {
+            border: 1px dashed #ccc;
+            padding: 0.2em 0.4em;
+            background: #e8e8e8;
+        }
    }
 }
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Styles/LayoutEditor/Editor.min.css
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Styles/LayoutEditor/Editor.min.css
@@ -1 +1 @@
-.layout-editor{display:flex;margin-top:1em;font-size:14px;align-items:flex-start}.layout-editor>.layout-canvas-wrapper{flex-grow:1;background-color:#f3f4f5;border:1px solid #e4e5e6}.layout-editor>.layout-canvas-wrapper>.layout-toolbar-container{display:none;margin:12px 12px 0;min-height:71px}.layout-editor>.layout-canvas-wrapper>.layout-toolbar-container>.mce-panel{width:100% !important}
+.layout-editor{display:flex;margin-top:1em;font-size:14px;align-items:flex-start}.layout-editor>.layout-canvas-wrapper{flex-grow:1;background-color:#f3f4f5;border:1px solid #e4e5e6}.layout-editor>.layout-canvas-wrapper>.layout-toolbar-container{display:none;margin:12px 12px 0;min-height:71px}.layout-editor>.layout-canvas-wrapper>.layout-toolbar-container>.mce-panel{width:100% !important}.layout-editor>.layout-canvas-wrapper .layout-content>.layout-element-wrapper .layout-content-markup>.layout-placeholder{border:1px dashed #ccc;padding:.2em .4em;background:#e8e8e8}
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Styles/LayoutEditor/Menu.css
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Styles/LayoutEditor/Menu.css
@@ -0,0 +1,26 @@
+.layout-editor .layout-content {
+  min-height: 1em;
+}
+.layout-editor .layout-content > .layout-element-wrapper .layout-content-markup .layout-menu-element ul,
+.layout-editor .layout-content > .layout-element-wrapper .layout-content-markup .layout-breadcrumbs-element ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.layout-editor .layout-content > .layout-element-wrapper .layout-content-markup .layout-menu-element ul li,
+.layout-editor .layout-content > .layout-element-wrapper .layout-content-markup .layout-breadcrumbs-element ul li {
+  float: left;
+  margin-right: 1em;
+}
+.layout-editor .layout-content > .layout-element-wrapper .layout-content-markup .layout-menu-element ul li.menu-icon,
+.layout-editor .layout-content > .layout-element-wrapper .layout-content-markup .layout-breadcrumbs-element ul li.menu-icon {
+  margin-right: 4px;
+}
+.layout-editor .layout-content > .layout-element-wrapper .layout-content-markup .layout-menu-element ul:after,
+.layout-editor .layout-content > .layout-element-wrapper .layout-content-markup .layout-breadcrumbs-element ul:after {
+  content: ".";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+}
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Styles/LayoutEditor/Menu.less
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Styles/LayoutEditor/Menu.less
@@ -0,0 +1,36 @@
+.layout-editor {
+    .layout-content {
+        min-height: 1em;
+
+        > .layout-element-wrapper {
+            .layout-content-markup {
+                .layout-menu-element,
+                .layout-breadcrumbs-element {
+
+                    ul {
+                        list-style: none;
+                        margin: 0;
+                        padding: 0;
+
+                        li {
+                            float: left;
+                            margin-right: 1em;
+
+                            &.menu-icon {
+                                margin-right: 4px;
+                            }
+                        }
+
+                        &:after {
+                            content: ".";
+                            display: block;
+                            height: 0;
+                            clear: both;
+                            visibility: hidden;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Styles/LayoutEditor/Menu.min.css
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Styles/LayoutEditor/Menu.min.css
@@ -0,0 +1 @@
+.layout-editor .layout-content{min-height:1em}.layout-editor .layout-content>.layout-element-wrapper .layout-content-markup .layout-menu-element ul,.layout-editor .layout-content>.layout-element-wrapper .layout-content-markup .layout-breadcrumbs-element ul{list-style:none;margin:0;padding:0}.layout-editor .layout-content>.layout-element-wrapper .layout-content-markup .layout-menu-element ul li,.layout-editor .layout-content>.layout-element-wrapper .layout-content-markup .layout-breadcrumbs-element ul li{float:left;margin-right:1em}.layout-editor .layout-content>.layout-element-wrapper .layout-content-markup .layout-menu-element ul li.menu-icon,.layout-editor .layout-content>.layout-element-wrapper .layout-content-markup .layout-breadcrumbs-element ul li.menu-icon{margin-right:4px}.layout-editor .layout-content>.layout-element-wrapper .layout-content-markup .layout-menu-element ul:after,.layout-editor .layout-content>.layout-element-wrapper .layout-content-markup .layout-breadcrumbs-element ul:after{content:".";display:block;height:0;clear:both;visibility:hidden}
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Styles/LayoutEditor/Popup.css
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Styles/LayoutEditor/Popup.css
@@ -15,6 +15,10 @@
  cursor: default;
  white-space: nowrap;
  line-height: normal;
+  min-width: 300px;
+}
+.layout-editor .layout-popup.wide {
+  width: 600px;
 }
 .layout-editor .layout-popup .layout-popup-flex {
  display: flex;
@@ -37,6 +41,10 @@
  background-color: #f3f4f5;
  cursor: pointer;
 }
+.layout-editor .layout-popup .layout-popup-input input[type='text'],
+.layout-editor .layout-popup .layout-popup-input textarea {
+  width: 100%;
+}
 .layout-editor .layout-popup .layout-popup-input > label {
  display: block;
  font-size: 0.9em;
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Styles/LayoutEditor/Popup.less
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Styles/LayoutEditor/Popup.less
@@ -18,6 +18,11 @@
        cursor: default;
        white-space: nowrap;
        line-height: normal;
+        min-width: 300px;
+
+        &.wide {
+            width: 600px;
+        }

        .layout-popup-flex {
            display: flex;
@@ -46,6 +51,10 @@
        }

        .layout-popup-input {
+            input[type='text'], textarea {
+                width: 100%;
+            }
+
            > label {
                display: block;
                font-size: 0.9em;
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Styles/LayoutEditor/Popup.min.css
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Styles/LayoutEditor/Popup.min.css
@@ -1 +1 @@
-.layout-editor .layout-popup{display:none;position:absolute;margin:0;-moz-box-shadow:3px 3px 11px 0 rgba(50,50,50,.5);-webkit-box-shadow:3px 3px 11px 0 rgba(50,50,50,.5);box-shadow:3px 3px 11px 0 rgba(50,50,50,.5);border:1px solid #e4e5e6;padding:2px 0;background-color:#f7f7f7;list-style:none;z-index:20;color:#7c7c7c;text-align:left;cursor:default;white-space:nowrap;line-height:normal}.layout-editor .layout-popup .layout-popup-flex{display:flex;padding:2px 5px}.layout-editor .layout-popup .layout-popup-flex .layout-popup-column+.layout-popup-column{margin-left:4px;border-left:1px solid rgba(128,128,128,.15);padding-left:4px}.layout-editor .layout-popup .layout-popup-item{padding:4px 6px}.layout-editor .layout-popup .layout-popup-label{font-size:.9em;font-weight:bold;color:#7c7c7c}.layout-editor .layout-popup .layout-popup-action:hover{background-color:#f3f4f5;cursor:pointer}.layout-editor .layout-popup .layout-popup-input>label{display:block;font-size:.9em}
+.layout-editor .layout-popup{display:none;position:absolute;margin:0;-moz-box-shadow:3px 3px 11px 0 rgba(50,50,50,.5);-webkit-box-shadow:3px 3px 11px 0 rgba(50,50,50,.5);box-shadow:3px 3px 11px 0 rgba(50,50,50,.5);border:1px solid #e4e5e6;padding:2px 0;background-color:#f7f7f7;list-style:none;z-index:20;color:#7c7c7c;text-align:left;cursor:default;white-space:nowrap;line-height:normal;min-width:300px}.layout-editor .layout-popup.wide{width:600px}.layout-editor .layout-popup .layout-popup-flex{display:flex;padding:2px 5px}.layout-editor .layout-popup .layout-popup-flex .layout-popup-column+.layout-popup-column{margin-left:4px;border-left:1px solid rgba(128,128,128,.15);padding-left:4px}.layout-editor .layout-popup .layout-popup-item{padding:4px 6px}.layout-editor .layout-popup .layout-popup-label{font-size:.9em;font-weight:bold;color:#7c7c7c}.layout-editor .layout-popup .layout-popup-action:hover{background-color:#f3f4f5;cursor:pointer}.layout-editor .layout-popup .layout-popup-input input[type='text'],.layout-editor .layout-popup .layout-popup-input textarea{width:100%}.layout-editor .layout-popup .layout-popup-input>label{display:block;font-size:.9em}
--- a/src/Orchard.Web/Modules/Orchard.Layouts/ViewModels/BreadcrumbsEditorViewModel.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/ViewModels/BreadcrumbsEditorViewModel.cs
@@ -0,0 +1,14 @@
+using System.Collections.Generic;
+using Orchard.ContentManagement;
+
+namespace Orchard.Layouts.ViewModels {
+    public class BreadcrumbsEditorViewModel {
+        public IEnumerable<ContentItem> Menus { get; set; }
+        public int CurrentMenuId { get; set; }
+
+        public int StartLevel { get; set; }
+        public int StopLevel { get; set; }
+        public bool AddHomePage { get; set; }
+        public bool AddCurrentPage { get; set; }
+    }
+}
--- a/src/Orchard.Web/Modules/Orchard.Layouts/ViewModels/LayoutEditorPropertiesViewModel.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/ViewModels/LayoutEditorPropertiesViewModel.cs
@@ -1,10 +1,7 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-
-namespace Orchard.Layouts.ViewModels {
+namespace Orchard.Layouts.ViewModels {
    public class LayoutEditorPropertiesItem {
        public string Label { get; set; }
        public string Model { get; set; }
+        public string Type { get; set; }
    }
 }
--- a/src/Orchard.Web/Modules/Orchard.Layouts/ViewModels/MenuEditorViewModel.cs
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/ViewModels/MenuEditorViewModel.cs
@@ -0,0 +1,13 @@
+using System.Collections.Generic;
+using Orchard.ContentManagement;
+
+namespace Orchard.Layouts.ViewModels {
+    public class MenuEditorViewModel {
+        public IEnumerable<ContentItem> Menus { get; set; }
+        public int CurrentMenuId { get; set; }
+
+        public int StartLevel { get; set; }
+        public int StopLevel { get; set; }
+        public bool ShowFullMenu { get; set; }
+    }
+}
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Views/EditorTemplates/Elements.Breadcrumbs.cshtml
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Views/EditorTemplates/Elements.Breadcrumbs.cshtml
@@ -0,0 +1,29 @@
+@model Orchard.Layouts.ViewModels.BreadcrumbsEditorViewModel
+@{
+    var menuOptions = Model.Menus.Select(x => new SelectListItem { Text = Html.ItemDisplayText(x).ToString(), Value = x.Id.ToString(), Selected = x.Id == Model.CurrentMenuId });
+}
+<fieldset>
+    @Html.LabelFor(m => m.CurrentMenuId, T("For Menu"))
+    @Html.DropDownListFor(m => m.CurrentMenuId, menuOptions)
+    @Html.Hint(T("Select which menu you want to display"))
+</fieldset>
+<fieldset>
+    @Html.LabelFor(m => m.StartLevel, T("Start Level"))
+    @Html.TextBoxFor(m => m.StartLevel, new { @class = "text small" })
+    @Html.Hint(T("The level the menu should start at."))
+</fieldset>
+<fieldset>
+    @Html.LabelFor(m => m.StopLevel, T("Levels to display"))
+    @Html.TextBoxFor(m => m.StopLevel, new { @class = "text small" })
+    @Html.Hint(T("The number of levels to display, \"0\" meaning all levels."))
+</fieldset>
+<fieldset>
+    @Html.CheckBoxFor(m => m.AddHomePage)
+    @Html.LabelFor(m => m.AddHomePage, T("Add the home page as the first element").Text, new { @class = "forcheckbox" })
+    @Html.Hint(T("Check to render the home page as the first element of the breadcrumb."))
+</fieldset>
+<fieldset>
+    @Html.CheckBoxFor(m => m.AddCurrentPage)
+    @Html.LabelFor(m => m.AddCurrentPage, T("Add the current content item as the last element").Text, new { @class = "forcheckbox" })
+    @Html.Hint(T("Check to render the current content item as the last element."))
+</fieldset>
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Views/EditorTemplates/Elements.Menu.cshtml
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Views/EditorTemplates/Elements.Menu.cshtml
@@ -0,0 +1,24 @@
+@model Orchard.Layouts.ViewModels.MenuEditorViewModel
+@{
+    var menuOptions = Model.Menus.Select(x => new SelectListItem {Text = Html.ItemDisplayText(x).ToString(), Value = x.Id.ToString(), Selected = x.Id == Model.CurrentMenuId});
+}
+<fieldset>
+    @Html.LabelFor(m => m.CurrentMenuId, T("For Menu"))
+    @Html.DropDownListFor(m => m.CurrentMenuId, menuOptions)
+    @Html.Hint(T("Select which menu you want to display"))
+</fieldset>
+<fieldset>
+    @Html.LabelFor(m => m.StartLevel, T("Start Level"))
+    @Html.TextBoxFor(m => m.StartLevel, new {@class = "text small"})
+    @Html.Hint(T("The level the menu should start at."))
+</fieldset>
+<fieldset>
+    @Html.LabelFor(m => m.StopLevel, T("Levels to display"))
+    @Html.TextBoxFor(m => m.StopLevel, new {@class = "text small"})
+    @Html.Hint(T("The number of levels to display, \"0\" meaning all levels."))
+</fieldset>
+<fieldset>
+    @Html.CheckBoxFor(m => m.ShowFullMenu)
+    @Html.LabelFor(m => m.ShowFullMenu, T("No filter on selected page").Text, new { @class = "forcheckbox" })
+    @Html.Hint(T("Check for the menu to be display without filtering the selected current page."))
+</fieldset>
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Views/Elements/Breadcrumbs.Design.cshtml
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Views/Elements/Breadcrumbs.Design.cshtml
@@ -0,0 +1,11 @@
+@{
+    var menu = Model.Menu;
+}
+<div class="layout-breadcrumbs-element layout-placeholder">
+    <ul>
+        <li class="menu-icon"><span class="fa fa-square"></span></li>
+        @foreach (var item in menu.Items) {
+            <li>@item.Text</li>
+        }
+    </ul>
+</div>
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Views/Elements/Breadcrumbs.cshtml
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Views/Elements/Breadcrumbs.cshtml
@@ -0,0 +1,7 @@
+@using Orchard.Layouts.Helpers
+@{
+    var tagBuilder = TagBuilderExtensions.CreateElementTagBuilder(Model);
+}
+@tagBuilder.StartElement
+@Display(Model.Menu)
+@tagBuilder.EndElement
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Views/Elements/Column.cshtml
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Views/Elements/Column.cshtml
@@ -1,16 +1,20 @@
-@using Orchard.Layouts.Elements
+@using Orchard.Core.Shapes
+@using Orchard.DisplayManagement.Shapes
@using Orchard.Layouts.Helpers
@{
-    var element = (Column) Model.Element;
-    var columnSpan = element.Width;
-    var columnOffset = element.Offset;
+    var columnSpan = (int?)Model.Width;
+    var columnOffset = (int?)Model.Offset;
    var columnOffsetCss = columnOffset > 0 ? "offset-" + columnOffset : default(string);
-    var tagBuilder = TagBuilderExtensions.CreateElementTagBuilder(Model);
-    
+    var tagBuilder = TagBuilderExtensions.AddCommonElementAttributes(new OrchardTagBuilder("div"), Model);
+
    tagBuilder.AddCssClass("cell");
    tagBuilder.AddCssClass(String.Concat("span-", columnSpan));
    tagBuilder.AddCssClass(columnOffsetCss);
 }
-@tagBuilder.StartElement
-@DisplayChildren(Model)
-@tagBuilder.EndElement
+@if (!Model.Collapsed) {
+    @tagBuilder.StartElement
+    foreach (var item in CoreShapes.Order(Model)) {
+        @Display(item)
+    }
+    @tagBuilder.EndElement
+}
--- a/src/Orchard.Web/Modules/Orchard.Layouts/Views/Elements/Html.cshtml
+++ b/src/Orchard.Web/Modules/Orchard.Layouts/Views/Elements/Html.cshtml
@@ -1,6 +1,14 @@
-@using Orchard.Layouts.Helpers
+@using Orchard.DisplayManagement.Shapes
+@using Orchard.Layouts.Helpers
@{
-    var tagBuilder = TagBuilderExtensions.CreateElementTagBuilder(Model);
-    tagBuilder.InnerHtml = Model.ProcessedText;
+    // Only render the surrounding div if there are any attributes to be rendered.
+    var commonAttributes = (IDictionary<string, object>)TagBuilderExtensions.GetCommonElementAttributes(Model);
+    var tagBuilder = commonAttributes.Any() ? new OrchardTagBuilder("div") : default(OrchardTagBuilder);
+
+    if (tagBuilder != null) {
+        tagBuilder.MergeAttributes(commonAttributes);
+    }
 }
-@tagBuilder.ToHtmlString()
+@if (tagBuilder != null) { @tagBuilder.StartElement }
+@Html.Raw(Model.ProcessedText)
+@if (tagBuilder != null) { @tagBuilder.EndElement }
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				.layout-editor .layout-content{min-height:1em}.layout-editor .layout-content>.layout-element-wrapper .layout-content-markup .layout-menu-element ul,.layout-editor .layout-content>.layout-element-wrapper .layout-content-markup .layout-breadcrumbs-element ul{list-style:none;margin:0;padding:0}.layout-editor .layout-content>.layout-element-wrapper .layout-content-markup .layout-menu-element ul li,.layout-editor .layout-content>.layout-element-wrapper .layout-content-markup .layout-breadcrumbs-element ul li{float:left;margin-right:1em}.layout-editor .layout-content>.layout-element-wrapper .layout-content-markup .layout-menu-element ul li.menu-icon,.layout-editor .layout-content>.layout-element-wrapper .layout-content-markup .layout-breadcrumbs-element ul li.menu-icon{margin-right:4px}.layout-editor .layout-content>.layout-element-wrapper .layout-content-markup .layout-menu-element ul:after,.layout-editor .layout-content>.layout-element-wrapper .layout-content-markup .layout-breadcrumbs-element ul:after{content:".";display:block;height:0;clear:both;visibility:hidden}