Breadcrumbs

The Breadcrumbs component displays a navigation trail that reflects the user’s current location within a website or application. It helps users understand the site hierarchy and provides a convenient way to navigate back to parent pages.

This component is built using two parts:

• Breadcrumbs List – the container that holds all breadcrumb items.
• Breadcrumbs Item – individual links or labels representing each step in the navigation path.

Usage

1. Drag the Breadcrumbs List component onto the canvas.
2. Insert one or more Breadcrumbs Item components inside the list.
3. For each item, configure the following options in the Component Properties panel:
   • Text label
   • Linkable toggle (enable or disable hyperlink behavior)
   • Icon (optional – shown before the label)
   • Chevron visibility (used to indicate hierarchy — typically hidden on the last item)
4. To represent collapsed breadcrumb levels (e.g. when several pages are skipped in the trail), use the ellipsis icon in the icon slot of a Breadcrumbs Item.

This component is ideal for dashboards, content-heavy websites, and applications with multi-level navigation structures.