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.

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.

Contributors


Last updated: August 16, 2022 Edit this page on GitHub

Was this page helpful?

Please make a selection.

To help us improve, please share your reason for the negative feedback in the field below.

Please enter a note.

Thank you for your valuable feedback!

Please note that although we cannot respond to feedback, our team will use your comments to improve the experience.

In this document
Community Talks

Building Modular Monolith Applications Using .Net and ABP Framework

17 Oct, 20:00
Online
Register Now
Mastering ABP Framework Book
Mastering ABP Framework

This book will help you gain a complete understanding of the framework and modern web application development techniques.

Learn More