Breadcrumb
This component provides secondary navigation. It displays a hierarchical path of links with a separator between each link. Users can click any link to navigate to the corresponding page. This topic explains how to configure the component.
Example
Add a navigation path to an application page to guide users.
For example, a path is displayed as Homepage | User Management | Security Configuration.Step 1: Add the component
Create a web application. For more information, see Create a web application.
In the Web application editor, click the component icon
on the left.- In the search box above the component list, enter Breadcrumb. Then, drag the component onto the center canvas.
For more information about adding components, see Add a component.
Step 2: Configure the data source
- In the right-side pane of the web application editor, on the Style tab, click Data Source and then Configure Data Source.
- On the Data Source Configuration page, select a data source type and configure its settings.
Available data source types include API, static data, and application push.Important The data source uses the label field for the link text and the value field for the URL. The value field must contain a valid URL.
- Click OK.
Step 3: Configure the style
- In the Style panel, configure the component's appearance.
Parameter Description Breadcrumb configuration Set the separator symbol and the link navigation behavior. Breadcrumb style Set the component's background color and the text styles for the final link and all preceding links. Adjust the position of the component on the page. For more information about common component style configurations, see Style configuration.
Click Preview in the upper-right corner of the page to preview and test the component's data and style.