Skip to content

page-header.md

Latest commit

 

History

History
78 lines (52 loc) · 3.32 KB

page-header.md

File metadata and controls

78 lines (52 loc) · 3.32 KB
Raw

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's responsibility to render these on the page.

IPageLayout

IPageLayout can be injected in any page/view to set the page header properties.

RenderLayoutElements

The RenderLayoutElements property controls whether the application layout (navigation menu, toolbar, etc.) should be rendered around the page content:

@inject IPageLayout PageLayout
@{
    PageLayout.RenderLayoutElements = false; // Hide navigation and layout elements
}
  • When set to true (default), the full application layout including navigation menu is rendered.
  • When set to false, only the page content is rendered without the surrounding layout elements.
  • This is useful for pages public pages, error pages, or embedded content where you want a clean layout without navigation.
  • This is not Empty Layout, it's still the same layout with related page, but without the navigation menu, toolbar and footer. All the layout hooks are still available.

Page Title

Page Title can be set as shown in the example below:

@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).
  • The theme may render the Page Title before the Page Content (not implemented by the Basic Theme).

Breadcrumb

The Basic Theme currently doesn't implement the breadcrumbs.

The LeptonX Lite Theme supports 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

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

The LeptonX Lite Theme supports selected menu item.

You can set the Menu Item name related to this page:

PageLayout.Content.MenuItemName = "BookStore.Books";

Menu item name should match a unique menu item name defined using the Navigation / Menu system. In this case, it is expected from the theme to make the menu item "active" in the main menu.