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?
TL;DR
- Add a text link in Webflow with URL set to "#" and label it "Go Back".
- Add a custom attribute: onclick="window.history.back(); return false;" to enable back navigation using browser history.
To create a breadcrumb-style “Go Back” link in Webflow that reliably sends users to the previous page, you’ll need to use a bit of custom code with a JavaScript history function. Here’s how to implement that correctly and avoid navigation errors.
1. Add a Text Link Element
- Drag a Text Link into your Webflow layout where you want the “Go Back” breadcrumb.
- Name it something like Go Back so users know it’s a back navigation item.
2. Set the Link’s Link Type
- In the Link Settings panel, choose "URL" as the link type.
- Enter "#" as a placeholder (this is needed, but it will be overridden by custom code).
3. Add Custom Code for Back Navigation
- Select the link and go to the Element Settings panel (gear icon).
- In the panel, find the Custom Attributes section.
- Add the following attribute:
- Name:
onclick - Value:
window.history.back(); return false;
This uses JavaScript's window.history.back() to send the user to the previous page the browser remembers, and return false; prevents the default # behavior that would otherwise scroll the page to the top.
4. Optional: Add Styling for UX Consistency
- Style the breadcrumb text to match the rest of your navigation UI.
- Optionally include an icon (like a left arrow) to visually indicate back navigation.
5. Understand Its Limitations
- This method works only if the user previously navigated to the current page via a browser action (e.g., link click from another page).
- If the page is opened directly (e.g., from an email or new tab),
history.back()may not work or may appear to do nothing.
Summary
To create a breadcrumb-style “Go Back” link in Webflow without errors, use a standard text link with a # URL and add a custom attribute onclick="window.history.back(); return false;". This safely leverages browser history without breaking navigation.
