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:
- Inside a column from the Section widget, click Add widget here…
- Select the Navigation & Search tab.
- 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:
- In the page editor, hover over the widget.
- Click the toggle menu in the widget label.
- Click (Edit).
In this section, choose which pages to display in the breadcrumb.
Perform the following:
- 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.
- Under Display…, choose one or more of the following options:
In this section, choose how to display the breadcrumb on the page.
Perform the following:
- 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.
- 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).
- 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.
- 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.