Breadcrumb widget

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.

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.

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  (Edit).

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

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 Next.js 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.

To open the advanced settings, in the upper-right corner of the Recommendation widget page, click  (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.