Breadcrumb widget

Overview

You use the Breadcrumb widget to display the path to the current page. This helps your users to navigate the website and to understand where the page they are looking at is located.

Place the widget on the page

You can place a Breadcrumb widget only inside a Section widget.
To do this, perform the following:

  1. Inside a column from the Section widget, click Add widget here…
  2. Select the Navigation & Search tab.
  3. Under Main navigation, click the BREADCRUMB widget.
    The widget is placed inside the selected column of the Section widget.

Configure the widget

To configure the widget, perform the following:

  1. In the page editor, hover over the widget.
  2. Click the toggle menu in the widget label.
  3. Click DotNetCore8 (Edit).

Breadcrumb setup

In this section, choose which pages to display in the breadcrumb.
Perform the following:

  1. Under Include in the breadcrumb…, choose one of the following radio buttons:
    • Full path to the current page
      The system displays the full path to the current page, starting from the homepage.
    • Path starting from a specific page...
      The system displays the path from a selected page to the current page.

      Click Add Select page and select the page where you want the breadcrumb to begin from.

      NOTE: For the breadcrumb to fulfill its purpose, you should select a page that is parent to the current page.

  2. Under Display…, choose one or more of the following options:
    • Home page link
      Displays the home page at the beginning of the breadcrumb.
    • Current page in the end of the breadcrumb
      This displays the current page as a link at the end of the breadcrumb.
    • Group pages in the breadcrumb
      A group page is a container for pages and does not have its own content. It redirects to its first child page.
    • Detail items in the breadcrumb
      For example, when you open a widget in details view, Sitefinity displays it in a predefined page or a page that you have chosen. Select this option, if you want to include it in the breadcrumb.

      NOTE: For this option to function as intended, you must also have selected Current page in the end of the breadcrumb.

Display settings

In this section, choose how to display the breadcrumb on the page.
Perform the following:

  1. In View dropdown, you can select a template other than the default one that will be used to display the Breadcrumb widget on the website.

    You must first have created a custom template.
    For more information, see ASP.NET Core pages and templates.

  2. In Margins, you can choose the margins between the widget and the column where it is placed.
    Choose from the predefined values of none, small, medium, or large.

Save your changes.

Advanced settings

To open the advanced settings, in the upper-right corner of the Recommendation widget page, click DotNetCore11 (Advanced settings).

  1. Change the label
    In Label, you can enter a specific name for this widget.
    This name will be displayed in:
    • The page editor as a label for the widget
    • In the treeview with the page structure in the right pane of the page editor.
  2. Apply custom CSS
    In CSS class input field, you can choose a class name for the textbox, if later you want to set a CSS style for this particular textbox.

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Web Security for Sitefinity Administrators

The free standalone Web Security lesson teaches administrators how to protect your websites and Sitefinity instance from external threats. Learn to configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?

Next article

Search box widget