Pineapple Builder

Breadcrumbs

Show links to parent pages derived from a page path.

Code name: Breadcrumbs · Category: Navigation

Registered in the live renderer. Website context and the limitations below still apply.

When to use it

Use breadcrumbs on deeper pages to help visitors understand where they are. Keep the main header navigation as the primary way to browse the site.

In the editor

  1. Supply the relevant page path.
  2. Choose a separator.
  3. Check that each parent destination exists.

Example

This example uses illustrative content. Media placeholders must be replaced with your own assets; data-backed blocks need the normal website context.

<Breadcrumbs url="/services/strategy/details" separator="/" />

Behaviour and limitations

  • The block omits the last path segment and links to parents. A shallow path may produce no visible trail.
  • url should be the intended page path, not invented navigation data.

Property reference

Types below describe the editor controls and known choices, not every value accepted by the renderer. A renderer default is extracted from its parameter; an editor-only default does not prove the runtime default. “Not declared here” does not mean required. Preserve omitted values unless the requested edit needs them.

PropertyEditor value typeDefault evidenceGuidance
urlstring"" (renderer)URL. See the usage notes for this block.
separatorstring">" (renderer)Separator. See the usage notes for this block.
spacingobject{"pb":1} (renderer)An object of spacing settings. Preserve existing responsive values when changing a single setting.
Pineapple Builder - AI Website Builder Create Docs