Breadcrumb
The Breadcrumb element displays a navigation trail showing the user's current location within a multi-page app. Users can click breadcrumb items to navigate back to previous pages.
Overview
Breadcrumbs render as a horizontal trail of clickable page links separated by a configurable separator:
Home > Muay Thai > Techniques > Elbow Strike
Common uses:
- Multi-page app navigation
- Content hierarchy display (e.g., Category > Sub-Category > Item)
- Page context awareness
- Quick back-navigation
Adding a Breadcrumb
- Open the Website Builder
- Find Breadcrumb in the Elements panel (under Navigation)
- Drag it onto your page
- Configure breadcrumb items in the General Tab
Properties
General Tab
Data Source
| Option | Description |
|---|---|
| Static | Define breadcrumb items manually |
| From Element | Pull data from another element (e.g., JSON Data Source) |
Static Breadcrumb Items
Add items directly:
- Click Add Item to add a new breadcrumb item
- Enter the Label (display text)
- Select a Target Page from the dropdown (or "No Link" for the current page)
- Click the X button to remove an item
- The last item is automatically styled as the current page (non-clickable)
Element Data Source
When using "From Element":
| Property | Description |
|---|---|
| Source Element ID | The ID of the source element |
| Label Field | Field name for breadcrumb label (e.g., name) |
| Page ID Field | Field name for target page ID (e.g., pageId) |
Appearance Settings
| Property | Options | Default |
|---|---|---|
| Separator | Chevron (>), Slash (/), Arrow (→), Dot (·) | Chevron |
| Size | Small, Medium, Large | Medium |
| Active Item Style | Bold, Muted, None | Bold |
Color Tab
| Property | Description | Default |
|---|---|---|
| Background Color | Container background | Transparent |
| Border Color | Container border | Transparent |
Dimensions Tab
| Property | Description |
|---|---|
| Width | Element width |
| Height | Element height (auto by default) |
| Padding | Inner spacing |
| Margin | Outer spacing |
| Border Radius | Corner rounding |
Use Cases
Multi-Page App Navigation
Show users where they are in a page hierarchy and let them navigate back.
Content Browsing
Display the path through a content taxonomy (e.g., Home > Category > Article).
Wizard / Multi-Step Forms
Show progress through a multi-step process with clickable steps.
Best Practices
Always include a "Home" item - Give users a way back to the start
Make the last item non-clickable - It represents the current page
Keep labels short - Use 1-3 word labels for each breadcrumb item
Use Chevron separator - It's the most universally recognized breadcrumb style
Place at the top of the page - Breadcrumbs are most useful at the top of content areas
Questions?
If you have any questions, please don't hesitate to contact us. Alternatively, you can submit an issue on this platform.
Useful Links:
Web Elements - https://help.acenji.com/#/./create-web-application/elements/index