Added Page Header document

docs/en/UI/AspNetCore/Branding.md

@@ -0,0 +1,3 @@
+# ASP.NET Core MVC / Razor Pages: Branding
+
+TODO

docs/en/UI/AspNetCore/Breadcrumbs.md

@@ -1,3 +0,0 @@
-# Breadcrumbs
-
-TODO

docs/en/UI/AspNetCore/Layout-Hooks.md

@@ -1,4 +1,4 @@
-# ASP.NET Core MVC / Razor Pages Layout Hooks
+# ASP.NET Core MVC / Razor Pages: Layout Hooks
 
 ABP Framework theming system places the page layout into the [theme](Theming.md) NuGet packages. That means the final application doesn't include a `Layout.cshtml`, so you can't directly change the layout code to customize it.
 

docs/en/UI/AspNetCore/Navigation-Menu.md

@@ -83,7 +83,7 @@ Here, a few notes on the menu contributors;
 
 There are more options of a menu item (the constructor of the `ApplicationMenuItem` class). Here, the list of all available options;
 
-* `name` (`string`, required): The unique name of the menu item.
+* `name` (`string`, required): The **unique name** of the menu item.
 * `displayName` (`string`, required): Display name/text of the menu item. You can [localize](../../Localization.md) this as shown before.
 * `url` (`string`): The URL of the menu item.
 * `icon` (`string`): An icon name. Free [Font Awesome](https://fontawesome.com/) icon classes are supported out of the box. Example: `fa fa-book`. You can use any CSS font icon class as long as you include the necessary CSS files to your application.

docs/en/UI/AspNetCore/Page-Header.md

@@ -0,0 +1,58 @@
+# ASP.NET Core MVC / Razor Pages: Page Header
+
+`IPageLayout` service can be used to set the page title, selected menu item and the breadcrumb items for a page. It's the [theme](Theming.md)'s responsibility to render these on the page.
+
+## IPageLayout
+
+`IPageLayout` can be injected in any page/view to set the page header properties.
+
+### Page Title
+
+Page Title can be set as shown in the example below:
+
+````csharp
+@inject IPageLayout PageLayout
+@{
+    PageLayout.Content.Title = "Book List";
+}
+````
+
+* The Page Title is set to the HTML `title` tag (in addition to the [brand/application name](Branding.md)).
+* The theme may render the Page Title before the Page Content (not implemented by the Basic Theme).
+
+### Breadcrumb
+
+> **The [Basic Theme](Basic-Theme.md) currently doesn't implement the breadcrumbs.**
+
+Breadcrumb items can be added to the `PageLayout.Content.BreadCrumb`.
+
+**Example: Add Language Management to the breadcrumb items.**
+
+````
+PageLayout.Content.BreadCrumb.Add("Language Management");
+````
+
+The theme then renders the breadcrumb. An example render result can be:
+
+![breadcrumbs-example](../../images/breadcrumbs-example.png)
+
+* The Home icon is rendered by default. Set `PageLayout.Content.BreadCrumb.ShowHome` to `false` to hide it.
+* Current Page name (got from the `PageLayout.Content.Title`) is added as the last by default. Set `PageLayout.Content.BreadCrumb.ShowCurrent` to `false` to hide it.
+
+Any item that you add is inserted between Home and Current Page items. You can add as many item as you need. `BreadCrumb.Add(...)` method gets three parameters:
+
+* `text`: The text to show for the breadcrumb item.
+* `url` (optional): A URL to navigate to, if the user clicks to the breadcrumb item.
+* `icon` (optional): An icon class (like `fas fa-user-tie` for Font-Awesome) to show with the `text`.
+
+### The Selected Menu Item
+
+> **The [Basic Theme](Basic-Theme.md) currently doesn't implement the selected menu item since it is not applicable to the top menu which is the only option for the Basic Theme for now.**
+
+You can set the Menu Item name related to this page:
+
+````csharp
+PageLayout.Content.MenuItemName = "BookStore.Books";
+````
+
+Menu item name should match a unique menu item name defined using the [Navigation / Menu](Navigation-Menu.md) system. In this case, it is expected from the theme to make the menu item "active" in the main menu.

docs/en/UI/AspNetCore/Theming.md

@@ -406,6 +406,8 @@ The Basic Theme doesn't implement this service, but the Lepton Theme implements:
 
 ![breadcrumbs-example](../../images/breadcrumbs-example.png)
 
+See the [Page Header](Page-Header.md) document for more.
+
 #### Tenant Switch
 
 The Account Layout should allow the user to switch the current tenant if the application is multi-tenant and the tenant was resolved from the cookies. See the [Basic Theme Account Layout](https://github.com/abpframework/abp/blob/dev/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic/Themes/Basic/Layouts/Account.cshtml) as an example implementation.

docs/en/docs-nav.json

@@ -452,6 +452,10 @@
               "text": "Toolbars",
               "path": "UI/AspNetCore/Toolbars.md"
             },
+            {
+              "text": "Page Header",
+              "path": "UI/AspNetCore/Page-Header.md"
+            },
             {
               "text": "Layout Hooks",
               "path": "UI/AspNetCore/Layout-Hooks.md"