How can I create a go back link as a breadcrumb link in Webflow that goes back to the previous page without getting an error?

To create a breadcrumb “Go Back” link in Webflow that reliably returns the user to the previous page without causing an error, use JavaScript-based history navigation rather than hardcoded links.

1. Use a Link Element as the "Go Back" Button

• Drag a Link Block or Text Link into your navigation or breadcrumb section.
• Label it something like “← Go Back” or “Back to Previous.”

2. Set the Link to Use JavaScript History

• Select the link element in Webflow.

• In the Element Settings (gear icon), go to the Link Settings.

• Under “Link Settings,” choose URL and enter this JavaScript snippet:

  javascript:history.back();

• This will call the browser’s built-in history.back(), which navigates to the most recent page the user came from.

3. Publish and Test the Link

• Publish your site or use Webflow's preview with the staging domain to test.
• Visit a page, click to go forward to the next page, then click your breadcrumb “Go Back” link.
• It should return the user to the previous URL in their browser history.

4. Use a Fallback If Needed

Sometimes users land on a page directly (e.g., via search engine or external link), and there's no stored history. You can optionally add a fallback destination using custom code:

• Add this script in your Page Settings → Before tag:

  if (document.referrer === "") { document.querySelector('#go-back').href = "/"; }

• Replace #go-back with your actual link’s ID (set it in the Settings panel).

• This script checks if there’s no referrer and, if so, sets the link to point to your homepage or another default.

Summary

To create a reliable “Go Back” breadcrumb in Webflow, link to javascript:history.back();. Optionally, use a fallback with custom code to define a default page if the user has no history.